/* =====================================================================
   PIBI · ABERTURA DA TRANSMISSÃO · estilos
   O palco tem sempre 1920x1080 e é escalado para caber na janela.
   Todas as animações usam @keyframes (e não transitions) para que a
   pausa congele tudo exatamente no quadro atual.
   ===================================================================== */

/* ---------- Fonte da logo ----------
   Coloque o arquivo da Playlist Script em fonts/ com um destes nomes:
   PlaylistScript.woff2 · PlaylistScript.otf · PlaylistScript.ttf
   Se a fonte estiver instalada no Windows, ela também é usada.
   Sem a fonte, a logo usa Kaushan Script (provisória). */
@font-face {
  font-family: 'Playlist Script';
  src: local('Playlist Script'), local('PlaylistScript'), local('Playlist Script Regular'),
       url('../fonts/PlaylistScript.otf') format('opentype'),
       url('../fonts/PlaylistScript.woff2') format('woff2'),
       url('../fonts/PlaylistScript.ttf') format('truetype');
  font-display: block;
}

:root {
  /* paleta */
  --preto: #05070c;
  --grafite: #14171d;
  --marinho: #0a1428;
  --marinho-2: #13264a;
  --branco: #f5f1ea;
  --bege: #e6d6bb;
  --dourado: #c9a96a;
  --dourado-claro: #e8d3a2;

  /* tipografia */
  --fonte-logo: 'Playlist Script', 'Kaushan Script', cursive;
  --fonte-sans: 'Jost', 'Segoe UI', sans-serif;
  --fonte-serif: 'Cormorant Garamond', Georgia, serif;

  /* margens de segurança usadas pelo layout (dentro da área de título de 5%) */
  --margem-x: 150px;
  --margem-y: 100px;

  /* tempos (sobrescritos pelo app.js a partir do config.js) */
  --trans: 1800ms;
  --k: 1;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-suave: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

body.transmissao { cursor: none; }

/* ---------- Palco 1920x1080 ---------- */
.palco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--escala, 1));
  overflow: hidden;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--fonte-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.palco.carregando .cenas { opacity: 0; }

/* Pausa: congela todas as animações */
body.pausado .palco *,
body.pausado .palco *::before,
body.pausado .palco *::after { animation-play-state: paused !important; }

/* ---------- Camadas globais ---------- */
.fundo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 115%, #12234a 0%, #0a1428 42%, #05070c 100%);
  overflow: hidden;
}

.orbe {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.orbe-1 {
  width: 1300px; height: 1300px; left: -420px; top: -620px;
  background: radial-gradient(circle, rgba(36, 66, 128, .55) 0%, rgba(36, 66, 128, 0) 65%);
  animation: orbe1 42s ease-in-out infinite alternate;
}
.orbe-2 {
  width: 1100px; height: 1100px; right: -380px; bottom: -560px;
  background: radial-gradient(circle, rgba(201, 169, 106, .16) 0%, rgba(201, 169, 106, 0) 65%);
  animation: orbe2 50s ease-in-out infinite alternate;
}
.orbe-3 {
  width: 900px; height: 900px; left: 40%; top: 30%;
  background: radial-gradient(circle, rgba(19, 38, 74, .5) 0%, rgba(19, 38, 74, 0) 65%);
  animation: orbe3 60s ease-in-out infinite alternate;
}
@keyframes orbe1 { to { transform: translate(260px, 180px) scale(1.15); } }
@keyframes orbe2 { to { transform: translate(-300px, -140px) scale(1.2); } }
@keyframes orbe3 { to { transform: translate(-380px, 120px) scale(.85); } }

.cenas { position: absolute; inset: 0; transition: opacity 1.2s ease; }

.particulas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
  mix-blend-mode: screen;
}

.vinheta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .6) 100%);
}

.grao {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grao .9s steps(6) infinite;
}
@keyframes grao {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Guias de área segura (só pré-visualização, tecla G) */
.guias { position: absolute; inset: 0; pointer-events: none; display: none; }
.guias.visivel { display: block; }
.guias div { position: absolute; border: 1px dashed rgba(255, 90, 90, .7); }
.guias .acao   { inset: 38px 67px; }                       /* 3,5% */
.guias .titulo { inset: 54px 96px; border-color: rgba(90, 200, 255, .7); }   /* 5% */
.guias .layout { inset: var(--margem-y) var(--margem-x); border-color: rgba(232, 211, 162, .5); }

/* ---------- Cenas e transições ---------- */
.cena {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.cena.ativa {
  visibility: visible;
  animation: cenaEntra var(--trans) var(--ease-suave) both;
}
.cena.ativa.saindo {
  animation: cenaSai var(--trans) var(--ease-suave) both;
}
/* Cena fora do ar: zera as animações para que recomecem na próxima entrada */
.cena:not(.ativa),
.cena:not(.ativa) * { animation: none !important; }

@keyframes cenaEntra {
  from { opacity: 0; transform: scale(1.025); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes cenaSai {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.985); }
}

/* ---------- Biblioteca de animações (atraso em --d, escala em --k) ---------- */
.a-sobe  { animation: sobe  calc(var(--k) * 1.7s) var(--ease) calc(var(--k) * var(--d, 0s)) both; }
.a-fade  { animation: fade  calc(var(--k) * 2.6s) ease        calc(var(--k) * var(--d, 0s)) both; }
.a-linha { animation: linha calc(var(--k) * 1.9s) var(--ease) calc(var(--k) * var(--d, 0s)) both; }
.letra   {
  display: inline-block;
  animation: letra calc(var(--k) * 1.35s) var(--ease) calc(var(--k) * var(--d, 0s)) both;
}

@keyframes sobe {
  from { opacity: 0; transform: translateY(30px); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes linha {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes letra {
  from { opacity: 0; transform: translateY(.38em); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}

.linha-texto { display: block; }
.palavra { display: inline-block; white-space: nowrap; }

/* ---------- Tipografia ---------- */
.chamada {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font: 500 17px/1 var(--fonte-sans);
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--dourado-claro);
}
.chamada::before {
  content: '';
  width: 54px;
  height: 1px;
  background: var(--dourado);
}
.chamada--centro::after {
  content: '';
  width: 54px;
  height: 1px;
  background: var(--dourado);
  margin-left: -.55em;      /* compensa o espaçamento da última letra */
}

.titulo-grande {
  margin: 34px 0 0;
  font: 300 104px/1.06 var(--fonte-sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--branco);
}

.titulo-caps {
  margin: 0;
  font: 300 50px/1.2 var(--fonte-sans);
  letter-spacing: .42em;
  text-transform: uppercase;
  margin-right: -.42em;     /* centraliza descontando o espaçamento final */
}

.subtitulo {
  margin: 0;
  font: italic 300 46px/1.3 var(--fonte-serif);
  color: rgba(245, 241, 234, .84);
}

.filete {
  height: 1px;
  width: 160px;
  background: linear-gradient(90deg, rgba(201, 169, 106, 0), var(--dourado), rgba(201, 169, 106, 0));
}
.filete--esq {
  width: 220px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--dourado), rgba(201, 169, 106, 0));
}

/* ---------- Logo "pibi" ---------- */
.logo {
  display: inline-block;
  font-family: var(--fonte-logo);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  filter: drop-shadow(0 0 40px rgba(232, 211, 162, .16));
}
/* Revelação: máscara que "escreve" da esquerda para a direita */
.logo-revela {
  display: inline-block;
  padding: .12em .4em .28em;
  -webkit-mask-image: linear-gradient(90deg, #000 0 42%, transparent 58%);
          mask-image: linear-gradient(90deg, #000 0 42%, transparent 58%);
  -webkit-mask-size: 260% 100%;
          mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: revela calc(var(--k) * 2.8s) cubic-bezier(.55, .1, .3, 1) calc(var(--k) * var(--d, 0s)) both;
}
@keyframes revela {
  0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(8px); opacity: 0; }
  18%  { opacity: 1; }
  100% { -webkit-mask-position: 0 0;    mask-position: 0 0;    filter: blur(0);   opacity: 1; }
}
/* Brilho dourado que atravessa a logo uma vez */
.logo-texto {
  display: inline-block;
  padding: .22em .35em .12em;          /* folga para as hastes da letra cursiva não serem cortadas */
  margin: -.22em -.35em -.12em;
  background: linear-gradient(105deg,
      var(--branco) 0%, var(--branco) 42%,
      #f1d9a4 47%, #fffaf0 50%, #f1d9a4 53%,
      var(--branco) 58%, var(--branco) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: brilho calc(var(--k) * 2.8s) var(--ease-suave) calc(var(--k) * var(--d-brilho, 3s)) both;
}
@keyframes brilho {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* ---------- Anéis geométricos (cenas 1 e 6) ---------- */
.aneis {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1040px;
  height: 1040px;
  margin: -520px 0 0 -520px;
}
.aneis svg { width: 100%; height: 100%; overflow: visible; }
.aneis-giro {
  transform-box: view-box;
  transform-origin: 500px 500px;
  animation: girar 140s linear infinite;
}
.aneis-giro-inv {
  transform-box: view-box;
  transform-origin: 500px 500px;
  animation: girar 90s linear infinite reverse;
}
@keyframes girar { to { transform: rotate(360deg); } }

.anel { fill: none; stroke-width: 1; }
.anel-desenha {
  stroke: rgba(201, 169, 106, .26);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: desenha calc(var(--k) * 4.5s) var(--ease-suave) calc(var(--k) * var(--d, 0s)) both;
}
.anel-arco {
  stroke: rgba(232, 211, 162, .7);
  stroke-dasharray: .14 .86;
  stroke-linecap: round;
}
.anel-pontos {
  stroke: rgba(232, 211, 162, .28);
  stroke-dasharray: 1.5 13;
}
@keyframes desenha { to { stroke-dashoffset: 0; } }

/* ---------- Ken Burns ---------- */
.foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #1b2c50 0%, #0b1426 60%, #05070c 100%);   /* aparece se a imagem faltar */
}
.kb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  animation: kbA var(--kb, 20s) linear var(--kb-d, 0s) both;
}
.kb-b { animation-name: kbB; }
.kb-c { animation-name: kbC; }
.kb-d { animation-name: kbD; }
@keyframes kbA { from { transform: scale(1.04) translate(0, 0); }       to { transform: scale(1.18) translate(-2%, -1.5%); } }
@keyframes kbB { from { transform: scale(1.2) translate(2%, 1%); }      to { transform: scale(1.05) translate(0, 0); } }
@keyframes kbC { from { transform: scale(1.12) translate(-3%, 0); }     to { transform: scale(1.12) translate(3%, -1%); } }
@keyframes kbD { from { transform: scale(1.06) translate(1.5%, 2%); }   to { transform: scale(1.17) translate(-1.5%, -1%); } }

/* =====================================================================
   CENA 1 · Boas-vindas
   ===================================================================== */
.bv-logo {
  position: absolute;
  left: 0;
  right: 0;
  top: 190px;
  text-align: center;
  font-size: 280px;
  animation: logoSobe calc(var(--k) * 2s) var(--ease-suave) calc(var(--k) * 2.7s) both;
}
@keyframes logoSobe {
  from { transform: translateY(150px) scale(1.12); }
  to   { transform: translateY(0) scale(1); }
}
.bv-texto {
  position: absolute;
  left: 0;
  right: 0;
  top: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  text-align: center;
}

/* =====================================================================
   CENA 2 · Início do culto
   ===================================================================== */
.cena--inicioCulto .veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 9, 20, .94) 0%, rgba(6, 12, 28, .82) 34%, rgba(8, 16, 36, .35) 68%, rgba(8, 16, 36, .55) 100%),
    linear-gradient(0deg, rgba(5, 7, 12, .7) 0%, rgba(5, 7, 12, 0) 40%);
}
.cena--inicioCulto .luz {
  position: absolute;
  width: 1500px;
  height: 1500px;
  right: -420px;
  top: -620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 196, 128, .26) 0%, rgba(236, 196, 128, 0) 58%);
  mix-blend-mode: screen;
  animation: luz var(--dur, 12s) ease-in-out both;
}
@keyframes luz {
  0%   { opacity: 0;   transform: translate(80px, -40px) scale(.9); }
  30%  { opacity: 1; }
  100% { opacity: .75; transform: translate(-160px, 90px) scale(1.08); }
}
.ic-conteudo {
  position: absolute;
  left: var(--margem-x);
  top: 50%;
  transform: translateY(-50%);
  max-width: 1150px;
}
.ic-conteudo .filete { margin: 46px 0 40px; }

.chamada .ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dourado-claro);
  box-shadow: 0 0 0 0 rgba(232, 211, 162, .6);
  animation: pulso 2.2s ease-out infinite;
  order: 2;
  margin-left: 6px;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(232, 211, 162, .55); }
  100% { box-shadow: 0 0 0 16px rgba(232, 211, 162, 0); }
}

.contagem {
  margin-top: 64px;
  display: flex;
  align-items: baseline;
  gap: 28px;
}
.contagem.oculta { display: none; }
.contagem-rotulo {
  font: 400 16px/1 var(--fonte-sans);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(230, 214, 187, .75);
}
.contagem-tempo {
  font: 200 72px/1 var(--fonte-sans);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--branco);
}

/* =====================================================================
   CENA 3 · Ministérios
   ===================================================================== */
.min-cabeca {
  position: absolute;
  left: 0;
  right: 0;
  top: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.min-cabeca .titulo-caps { font-size: 54px; letter-spacing: .3em; margin-right: -.3em; }

.cards {
  position: absolute;
  left: var(--margem-x);
  right: var(--margem-x);
  top: 300px;
  height: 560px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 26px;
}
.card {
  position: relative;
  flex: 0 0 254px;
  height: 530px;
  animation: cardEntra calc(var(--k) * 1.5s) var(--ease) calc(var(--k) * var(--d, 0s)) both;
}
@keyframes cardEntra {
  from { opacity: 0; transform: translateY(70px) scale(.96); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0) scale(1);      filter: blur(0); }
}
/* Destaque em sequência: keyframes gerados pelo app.js conforme o nº de cards */
.card-in {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
  outline: 1px solid rgba(255, 255, 255, .07);
  outline-offset: -1px;
  animation: var(--anim-mov) var(--ciclo) ease-in-out var(--atraso) infinite both;
}
.card .foto {
  filter: brightness(.68) saturate(.8);
  animation: var(--anim-img) var(--ciclo) ease-in-out var(--atraso) infinite both;
}
.card .kb { --kb-d: 0s; }
.card-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 7, 12, .94) 0%, rgba(5, 7, 12, .5) 34%, rgba(5, 7, 12, 0) 62%);
}
.card-num {
  position: absolute;
  top: 26px;
  left: 26px;
  font: 400 14px/1 var(--fonte-sans);
  letter-spacing: .3em;
  color: var(--dourado-claro);
}
.card-txt {
  position: absolute;
  left: 26px;
  right: 18px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-rotulo {
  font: 400 13px/1 var(--fonte-sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(230, 214, 187, .8);
}
.card-nome {
  font: 500 44px/1.02 var(--fonte-serif);
  color: var(--branco);
}
.card-traco {
  width: 34px;
  height: 1px;
  margin-top: 8px;
  background: var(--dourado);
  transform-origin: left center;
}
.card-borda {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 1px solid rgba(232, 211, 162, .75);
  box-shadow: inset 0 0 60px rgba(201, 169, 106, .12), 0 0 50px rgba(201, 169, 106, .14);
  opacity: 0;
  animation: var(--anim-borda) var(--ciclo) ease-in-out var(--atraso) infinite both;
}
.min-legenda {
  position: absolute;
  left: 0;
  right: 0;
  top: 905px;
  text-align: center;
  font-size: 36px;
  color: rgba(245, 241, 234, .72);
}

/* =====================================================================
   CENA 4 · Nossa comunidade
   ===================================================================== */
.slides {
  position: absolute;
  inset: 0;
  z-index: 0;              /* contexto próprio: os slides não passam por cima do texto */
}
.slide {
  position: absolute;
  inset: 0;
  animation: fade calc(var(--trans) * 1.3) ease-in-out var(--d, 0s) both;
}
.cena--comunidade .veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 9, 20, .9) 0%, rgba(6, 12, 28, .66) 36%, rgba(8, 16, 36, .1) 70%, rgba(8, 16, 36, .3) 100%),
    linear-gradient(0deg, rgba(5, 7, 12, .88) 0%, rgba(5, 7, 12, 0) 55%);
}
.moldura {
  position: absolute;
  inset: 56px;
  border: 1px solid rgba(232, 211, 162, .16);
}
.com-texto {
  position: absolute;
  left: var(--margem-x);
  bottom: 150px;
  max-width: 1200px;
}
.com-texto .titulo-grande { font-size: 112px; }
.com-texto .filete { margin: 44px 0 36px; }

.indicadores {
  position: absolute;
  right: var(--margem-x);
  bottom: 160px;
  display: flex;
  gap: 12px;
}
.indicador {
  width: 64px;
  height: 2px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}
.indicador span {
  display: block;
  height: 100%;
  background: var(--dourado-claro);
  transform-origin: left center;
  animation: enche var(--slot) linear var(--d) both;
}
@keyframes enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =====================================================================
   CENA 5 · Informações
   ===================================================================== */
.cena--informacoes .foto img { filter: grayscale(.35); }
.cena--informacoes .veu {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(10, 20, 40, .87) 0%, rgba(5, 7, 12, .96) 100%);
}
.info-topo {
  position: absolute;
  left: 0;
  right: 0;
  top: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.insta {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 48px;
}
.insta svg { width: 70px; height: 70px; color: var(--dourado-claro); }
.insta-arroba {
  font: 300 88px/1 var(--fonte-sans);
  letter-spacing: .03em;
}
.info-topo .subtitulo { font-size: 38px; margin-top: 26px; }
.info-topo .filete { margin-top: 56px; }

.info-grade {
  position: absolute;
  left: var(--margem-x);
  right: var(--margem-x);
  top: 585px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.info-grade--2 {
  grid-template-columns: auto auto;
  justify-content: center;
}
.info-grade--2 .info-col { padding: 0 110px; }
.info-grade--1 { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.info-col {
  padding: 0 60px;
  border-left: 1px solid rgba(232, 211, 162, .2);
}
.info-col:first-child { border-left: 0; }
.info-col svg { width: 40px; height: 40px; color: var(--dourado); }
.info-rotulo {
  margin: 24px 0 22px;
  font: 500 15px/1 var(--fonte-sans);
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--dourado-claro);
}
.info-linha {
  font: 300 29px/1.55 var(--fonte-sans);
  color: rgba(245, 241, 234, .92);
}
.info-horario { margin-bottom: 14px; }
.info-horario b {
  display: block;
  font: 400 28px/1.3 var(--fonte-sans);
  color: var(--branco);
}
.info-horario i {
  display: block;
  font: italic 400 27px/1.25 var(--fonte-serif);
  color: rgba(230, 214, 187, .78);
}

/* =====================================================================
   CENA 6 · Encerramento
   ===================================================================== */
.final {
  position: absolute;
  inset: 0;
  animation: some 2s ease-in-out var(--fim, 9s) both;
}
@keyframes some { from { opacity: 1; } to { opacity: 0; } }

.en-logo {
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
  text-align: center;
  font-size: 250px;
}
.en-texto {
  position: absolute;
  left: 0;
  right: 0;
  top: 575px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.en-texto .lema { font-size: 36px; margin: -8px 0 -10px; }
.en-texto .titulo-caps { font-size: 46px; line-height: 1.55; letter-spacing: .34em; margin-right: -.34em; }
.assinatura {
  font: 400 15px/1 var(--fonte-sans);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: rgba(230, 214, 187, .6);
  margin-right: -.5em;
}

/* =====================================================================
   Controles (somente modo pré-visualização)
   ===================================================================== */
.controles {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(12, 16, 26, .72);
  border: 1px solid rgba(232, 211, 162, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #efe8dc;
  font: 400 13px/1 'Jost', 'Segoe UI', sans-serif;
  letter-spacing: .04em;
  z-index: 10;
  transition: opacity .5s ease, transform .5s ease;
  user-select: none;
}
.controles.recolhido { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.controles[hidden] { display: none; }

.ctl-bt {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.ctl-bt:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ctl-bt:focus-visible { outline: 1px solid rgba(232, 211, 162, .8); }
.ctl-bt.principal { width: 44px; height: 44px; background: rgba(232, 211, 162, .14); color: #f3e4c0; }
.ctl-bt.ligado { color: #e8d3a2; }
.ctl-bt svg { width: 18px; height: 18px; }
.ctl-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .12); margin: 0 6px; }
.ctl-info { display: flex; flex-direction: column; gap: 7px; min-width: 210px; padding: 0 8px; }
.ctl-linha { display: flex; justify-content: space-between; gap: 14px; white-space: nowrap; }
.ctl-cena { color: #fff; }
.ctl-tempo { color: rgba(239, 232, 220, .55); font-variant-numeric: tabular-nums; }
.ctl-barra { height: 2px; background: rgba(255, 255, 255, .14); border-radius: 2px; overflow: hidden; }
.ctl-progresso { height: 100%; width: 0; background: #e8d3a2; }
.ctl-link { color: rgba(232, 211, 162, .85); text-decoration: none; padding: 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ctl-link:hover { color: #fff; }