/* ============================================================
   BATISTART — Motor de projeção
   Colégio Batista Mineiro · Poços de Caldas
   ============================================================ */

/* As cores da marca e do ambiente são escritas pelo app.js a partir do
   config.js / painel. Os valores abaixo são só o ponto de partida. */
:root{
  /* marca — vêm da logo do colégio */
  --navy:      #16297b;
  --red:       #d8232a;
  --gold:      #f9c013;

  /* ambiente — mudam conforme o tema escolhido no painel */
  --fundo:     #06101f;
  --ink:       #fbf9f6;
  --ink-dim:   rgba(251,249,246,.62);
  --painel:    rgba(6,16,31,.78);
  --vinheta:   rgba(2,6,14,.82);
  --ph-bg:     #0a1730;
  --grao:      .055;
  --ambiente:  .30;

  --red-deep:  #a5171f;

  /* Alguns elementos ficam sempre sobre foto ou sobre o painel azul da
     marca. Esses NAO podem seguir a cor de texto do tema, senao no tema
     claro viram texto escuro sobre fundo escuro. */
  --sobre-escuro:     #fbf9f6;
  --sobre-escuro-dim: rgba(251,249,246,.62);
  /* veu no topo, so no tema claro, para a assinatura nunca cair sobre
     uma foto escura sem contraste */
  --veu-topo: 0;

  --display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --body: "Outfit", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

  --gap: clamp(6px, .9vw, 18px);
  --pad: clamp(18px, 2.6vw, 52px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  width:100%; height:100%;
  overflow:hidden;
  background:var(--fundo);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
body.hide-cursor, body.hide-cursor *{ cursor:none; }
img{ display:block; }

/* ---------------- Palco / camadas ---------------- */

#stage{ position:fixed; inset:0; z-index:1; }

.layer{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1100ms var(--ease-soft);
  will-change:opacity;
}
.layer.on{ opacity:1; }

.scene{ position:absolute; inset:0; overflow:hidden; }

/* moldura de foto reutilizável */
.ph{
  position:relative;
  overflow:hidden;
  background:var(--ph-bg);
  border-radius:2px;
}
.ph > img{
  width:100%; height:100%;
  object-fit:cover;
  /* 38% em vez de 50%: quando precisa cortar uma vertical, sacrifica os pés
     e não a cabeça — em foto de criança o rosto fica na metade de cima */
  object-position:center 38%;
  will-change:transform;
}
.ph::after{
  content:"";
  position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),
             inset 0 -70px 90px -60px rgba(0,0,0,.75);
  pointer-events:none;
}

/* ---------------- Ken Burns ---------------- */

@keyframes kb-a{ from{ transform:scale(1.04) translate3d(0,0,0);} to{ transform:scale(1.20) translate3d(-2.5%,-1.5%,0);} }
@keyframes kb-b{ from{ transform:scale(1.20) translate3d(2%,1.5%,0);} to{ transform:scale(1.04) translate3d(0,0,0);} }
@keyframes kb-c{ from{ transform:scale(1.06) translate3d(2.5%,0,0);} to{ transform:scale(1.22) translate3d(-2%,-2%,0);} }
@keyframes kb-d{ from{ transform:scale(1.18) translate3d(-2%,2%,0);} to{ transform:scale(1.05) translate3d(1%,-1%,0);} }
@keyframes kb-e{ from{ transform:scale(1.03);} to{ transform:scale(1.16);} }
@keyframes kb-f{ from{ transform:scale(1.16) translate3d(0,-2%,0);} to{ transform:scale(1.03) translate3d(0,1%,0);} }

.kb-a>img{ animation:kb-a var(--kbd,14s) linear both; }
.kb-b>img{ animation:kb-b var(--kbd,14s) linear both; }
.kb-c>img{ animation:kb-c var(--kbd,14s) linear both; }
.kb-d>img{ animation:kb-d var(--kbd,14s) linear both; }
.kb-e>img{ animation:kb-e var(--kbd,14s) linear both; }
.kb-f>img{ animation:kb-f var(--kbd,14s) linear both; }

/* ---------------- Entradas ---------------- */

@keyframes rise{ from{ opacity:0; transform:translate3d(0,7%,0) scale(.97);} to{ opacity:1; transform:none;} }
@keyframes fall{ from{ opacity:0; transform:translate3d(0,-7%,0) scale(.97);} to{ opacity:1; transform:none;} }
@keyframes inL { from{ opacity:0; transform:translate3d(-9%,0,0);} to{ opacity:1; transform:none;} }
@keyframes inR { from{ opacity:0; transform:translate3d(9%,0,0);} to{ opacity:1; transform:none;} }
@keyframes pop { from{ opacity:0; transform:scale(.86);} to{ opacity:1; transform:none;} }
@keyframes wipeV{ from{ clip-path:inset(100% 0 0 0);} to{ clip-path:inset(0 0 0 0);} }
@keyframes wipeD{ from{ clip-path:inset(0 0 100% 0);} to{ clip-path:inset(0 0 0 0);} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.e-rise { animation:rise  900ms var(--ease) both; }
.e-fall { animation:fall  900ms var(--ease) both; }
.e-inL  { animation:inL   950ms var(--ease) both; }
.e-inR  { animation:inR   950ms var(--ease) both; }
.e-pop  { animation:pop   800ms var(--ease) both; }
.e-wipe { animation:wipeV 1000ms var(--ease) both; }
.e-wipeD{ animation:wipeD 1000ms var(--ease) both; }

/* ============================================================
   CENA: hero — foto horizontal em tela cheia
   ============================================================ */
.s-hero .bg{
  position:absolute; inset:-4%;
  background-size:cover; background-position:center;
  filter:blur(38px) saturate(1.25) brightness(.5);
  transform:scale(1.1);
}
.s-hero .ph{
  position:absolute; inset:0;
  border-radius:0;
}
.s-hero .ph::after{
  box-shadow:inset 0 -220px 260px -140px rgba(3,8,20,.92),
             inset 0 160px 200px -140px rgba(3,8,20,.6);
}

/* ============================================================
   CENA: showcase — foto inteira sobre a própria versão desfocada
   Usada nas quadradas, que num quadro 16:9 perderiam quase
   metade da altura se fossem cortadas.
   ============================================================ */
.s-show{ display:grid; place-items:center; }
.s-show .bg{
  position:absolute; inset:-6%;
  background-size:cover; background-position:center;
  filter:blur(50px) saturate(1.35) brightness(.45);
  transform:scale(1.15);
}
.s-show .fit{
  position:relative;
  max-width:76vw; max-height:86vh;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9);
}
.s-show .fit img{
  display:block;
  max-width:76vw; max-height:86vh;
  width:auto; height:auto;
  object-fit:contain;
}

/* ============================================================
   CENA: spotlight — 1 vertical + texto
   ============================================================ */
.s-spot{ display:flex; align-items:center; }
.s-spot .bg{
  position:absolute; inset:-6%;
  background-size:cover; background-position:center;
  filter:blur(52px) saturate(1.35) brightness(.42);
  transform:scale(1.15);
}
.s-spot .frame{
  position:relative;
  height:80vh; aspect-ratio:3/4;
  margin-left:7vw;
  flex:none;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85);
}
.s-spot .frame .ph{ position:absolute; inset:0; }
.s-spot .say{
  flex:1;
  padding:0 6vw 0 5vw;
}
.s-spot .say .kicker{
  font-family:var(--display);
  font-size:clamp(14px,1.5vw,26px);
  letter-spacing:.34em;
  color:var(--gold);
  margin-bottom:.7em;
}
.s-spot .say .line{
  font-family:var(--display);
  font-size:clamp(38px,5.6vw,110px);
  line-height:.94;
  letter-spacing:.005em;
  /* sempre sobre a cama desfocada da propria foto, que e escura */
  color:var(--sobre-escuro);
  text-shadow:0 10px 40px rgba(0,0,0,.6);
}

/* ============================================================
   CENA: tríptico / pilares — verticais lado a lado
   ============================================================ */
.s-strips{
  display:flex; gap:var(--gap);
  padding:var(--gap);
}
.s-strips .ph{ flex:1; height:100%; }
.s-strips.feature .ph:nth-child(2){ flex:1.55; }

/* ============================================================
   CENA: mosaico
   ============================================================ */
.s-mosaic{
  display:grid; gap:var(--gap); padding:var(--gap);
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(4,1fr);
}
.s-mosaic .ph{ width:100%; height:100%; }
.m-hero  { grid-column:span 3; grid-row:span 4; }
.m-tall  { grid-column:span 1; grid-row:span 2; }
.m-wide  { grid-column:span 2; grid-row:span 2; }
.m-half  { grid-column:span 2; grid-row:span 2; }

/* ============================================================
   CENA: colunas rolando
   ============================================================ */
/* align-items:flex-start é essencial: mantém a altura da coluna igual à do
   conteúdo, para que translateY(-50%) caia exatamente numa cópia da lista
   e o loop feche sem salto. */
.s-cols{ display:flex; gap:var(--gap); padding:0 var(--gap); align-items:flex-start; }
.s-cols .col{
  flex:1; height:auto;
  display:flex; flex-direction:column; gap:var(--gap);
  will-change:transform;
}
.s-cols .col .ph{ width:100%; aspect-ratio:3/4; flex:none; }
/* a lista é duplicada, então um período completo mede (total + gap) / 2 —
   usar -50% cru deixa meio gap de desalinho na emenda */
@keyframes drift-up  { from{ transform:translate3d(0,0,0);}
                       to  { transform:translate3d(0,calc(-50% - (var(--gap) / 2)),0);} }
@keyframes drift-down{ from{ transform:translate3d(0,calc(-50% - (var(--gap) / 2)),0);}
                       to  { transform:translate3d(0,0,0);} }
.s-cols .up  { animation:drift-up   var(--sp,26s) linear both; }
.s-cols .down{ animation:drift-down var(--sp,26s) linear both; }

/* ============================================================
   CENA: filmstrip horizontal
   ============================================================ */
.s-film{ display:flex; align-items:center; overflow:hidden; }
.s-film .track{
  display:flex; gap:var(--gap);
  padding:0 var(--gap);
  will-change:transform;
  animation:roll var(--sp,30s) linear both;
}
.s-film .ph{ height:74vh; aspect-ratio:3/4; flex:none; }
.s-film .ph.wide{ aspect-ratio:4/3; }
@keyframes roll{ from{ transform:translate3d(0,0,0);}
                 to  { transform:translate3d(calc(-50% - (var(--gap) / 2)),0,0);} }

/* ============================================================
   CENA: duo inclinado
   ============================================================ */
.s-duo{ display:flex; align-items:center; justify-content:center; gap:4vw; }
.s-duo .bg{
  position:absolute; inset:-6%;
  background-size:cover; background-position:center;
  filter:blur(60px) saturate(1.3) brightness(.36); transform:scale(1.15);
}
/* a rotação vai no .tilt e a animação de entrada no .ph, para que uma
   não sobrescreva o transform da outra */
.s-duo .tilt{
  /* mesma trava das fileiras: a altura é o menor valor entre o que a tela
     comporta e o que a largura permite, senão as duas fotos estouram
     lateralmente em janela estreita */
  height:min(66vh, calc((88vw - 4vw) / 2 * 4 / 3));
  aspect-ratio:3/4;
  box-shadow:0 44px 80px -34px rgba(0,0,0,.9);
}
.s-duo .tilt-l{ transform:rotate(-2.4deg); }
.s-duo .tilt-r{ transform:rotate(2.4deg); }
.s-duo .tilt .ph{ width:100%; height:100%; }
.s-duo .mid{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  padding:.5em 1em;
  background:var(--painel);
  backdrop-filter:blur(14px);
  border-top:2px solid var(--red);
  border-bottom:2px solid var(--red);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.s-duo .mid .line{
  font-family:var(--display);
  font-size:clamp(30px,4.4vw,86px);
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* ============================================================
   CENA: cartela de texto
   ============================================================ */
.s-card{ display:grid; place-items:center; text-align:center;
         color:var(--sobre-escuro); }
.s-card .wash{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 120% at 20% 10%, rgba(230,51,41,.30), transparent 60%),
    radial-gradient(80% 110% at 85% 90%, rgba(20,48,107,.85), transparent 62%),
    linear-gradient(160deg, var(--navy) 0%, var(--wash-mid) 55%, #040a16 100%);
}
.s-card .wash-2{
  position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 50%, rgba(245,179,37,.16), transparent 70%);
  animation:breathe 9s ease-in-out infinite alternate;
}
@keyframes breathe{ from{ transform:scale(1); opacity:.5;} to{ transform:scale(1.35); opacity:1;} }

.s-card .inner{ position:relative; padding:0 8vw; }
.s-card .kicker{
  font-family:var(--display);
  font-size:clamp(13px,1.35vw,24px);
  letter-spacing:.44em;
  color:var(--gold);
  margin-bottom:.9em;
  animation:fadeIn 1200ms var(--ease) both;
}
.s-card .big{
  font-family:var(--display);
  font-size:clamp(46px,8.4vw,180px);
  line-height:.88;
  letter-spacing:.01em;
}
.s-card .big .w{
  display:inline-block;
  animation:rise 1000ms var(--ease) both;
}
.s-card .rule{
  width:0; height:3px; margin:1.1em auto 0;
  background:linear-gradient(90deg, transparent, var(--red), var(--gold), transparent);
  animation:ruleGrow 1600ms 500ms var(--ease) both;
}
@keyframes ruleGrow{ from{width:0} to{width:min(46vw,760px)} }
.s-card .sub{
  margin-top:1.3em;
  font-weight:200;
  font-size:clamp(14px,1.55vw,30px);
  letter-spacing:.2em;
  color:var(--sobre-escuro-dim);
  animation:fadeIn 1400ms 900ms var(--ease) both;
}

/* ============================================================
   CENA: vídeo
   ============================================================ */
.s-video{ background:#000; display:grid; place-items:center; }
/* o clipe é 480x592: esticado até a altura toda de um projetor 1080p ficaria
   borrado, então limita a ampliação e deixa o fundo desfocado preencher */
.s-video video.main{
  position:relative; z-index:1;
  height:78vh; width:auto; max-width:58vw;
  object-fit:contain;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95);
}
.s-video video.bgv{
  position:absolute; left:-6%; top:-6%;
  width:112%; height:112%;
  object-fit:cover;
  filter:blur(46px) saturate(1.3) brightness(.42);
  z-index:0;
}

/* ============================================================
   CENA: fileira em proporção original (3 ou 4 verticais)
   A altura é o menor valor entre "o que a tela comporta" e
   "o que a largura permite", então nunca há corte nem estouro.
   ============================================================ */
.s-row{
  display:flex; align-items:center; justify-content:center;
  gap:var(--gap); padding:0 var(--gap);
}
.s-row .ph{
  flex:none;
  aspect-ratio:3/4;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85);
}
.s-row.n3 .ph{ height:min(84vh, calc((100vw - 4 * var(--gap)) / 3 * 4 / 3)); }
.s-row.n4 .ph{ height:min(80vh, calc((100vw - 5 * var(--gap)) / 4 * 4 / 3)); }
.s-row.n5 .ph{ height:min(76vh, calc((100vw - 6 * var(--gap)) / 5 * 4 / 3)); }

/* entradas pelos cantos, usadas pela fileira de quatro */
@keyframes fromTL{ from{opacity:0; transform:translate3d(-16%,-16%,0) scale(1.1);} to{opacity:1; transform:none;} }
@keyframes fromTR{ from{opacity:0; transform:translate3d( 16%,-16%,0) scale(1.1);} to{opacity:1; transform:none;} }
@keyframes fromBL{ from{opacity:0; transform:translate3d(-16%, 16%,0) scale(1.1);} to{opacity:1; transform:none;} }
@keyframes fromBR{ from{opacity:0; transform:translate3d( 16%, 16%,0) scale(1.1);} to{opacity:1; transform:none;} }
.q-tl{ animation:fromTL 1100ms var(--ease) both; }
.q-tr{ animation:fromTR 1100ms var(--ease) both; }
.q-bl{ animation:fromBL 1100ms var(--ease) both; }
.q-br{ animation:fromBR 1100ms var(--ease) both; }

/* legenda de canto usada por várias cenas */
.tag{
  position:absolute; left:var(--pad); bottom:calc(var(--pad) * .9);
  z-index:5;
  font-family:var(--display);
  letter-spacing:.16em;
  font-size:clamp(18px,2vw,42px);
  color:var(--sobre-escuro);
  text-shadow:0 8px 34px rgba(0,0,0,.9);
  animation:inL 1100ms 300ms var(--ease) both;
}
.tag i{ color:var(--gold); font-style:normal; }
/* a legenda as vezes cai sobre o fundo da pagina em vez de sobre foto;
   no tema claro isso deixaria texto branco sobre creme. Este halo escuro
   garante contraste ali e some sobre foto escura. */
.tag::before{
  content:"";
  position:absolute; inset:-.7em -2.4em -.8em -1.4em;
  z-index:-1;
  background:radial-gradient(120% 170% at 18% 60%, rgba(0,0,0,.55), transparent 72%);
}

/* ============================================================
   Camadas atmosféricas
   ============================================================ */
#ambient{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  mix-blend-mode:screen; opacity:var(--ambiente);
  background:
    radial-gradient(38% 52% at 12% 20%, rgba(230,51,41,.55), transparent 70%),
    radial-gradient(42% 55% at 88% 80%, rgba(38,96,200,.55), transparent 70%),
    radial-gradient(30% 40% at 60% 8%,  rgba(245,179,37,.30), transparent 72%);
  animation:ambient 34s ease-in-out infinite alternate;
}
@keyframes ambient{
  from{ transform:translate3d(-2%,-1%,0) scale(1.02); }
  to  { transform:translate3d(2%,2%,0)  scale(1.12); }
}

/* No tema claro a assinatura e o contador sao texto escuro; sem este veu
   eles cairiam sobre fotos escuras nas cenas que ocupam a tela toda. */
#veu-topo{
  position:fixed; left:0; right:0; top:0; height:16vh;
  z-index:3; pointer-events:none;
  opacity:var(--veu-topo);
  background:linear-gradient(180deg, var(--fundo) 0%,
                             rgba(255,255,255,0) 100%);
}

#vignette{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 105% at 50% 45%, transparent 52%, var(--vinheta) 100%);
}

#grain{
  position:fixed; inset:-120px; z-index:4; pointer-events:none;
  opacity:var(--grao);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation:grain 700ms steps(4) infinite;
}
@keyframes grain{
  0%  { transform:translate3d(0,0,0); }
  25% { transform:translate3d(-40px,20px,0); }
  50% { transform:translate3d(30px,-30px,0); }
  75% { transform:translate3d(-20px,-20px,0); }
  100%{ transform:translate3d(0,0,0); }
}

/* ============================================================
   Chrome (marca, contador, progresso)
   ============================================================ */
.chrome{ z-index:6; transition:opacity 600ms var(--ease-soft); }
body.no-chrome .chrome{ opacity:0 !important; pointer-events:none; }

#brand{
  position:fixed; top:var(--pad); left:var(--pad);
  line-height:1;
  text-shadow:0 6px 26px rgba(0,0,0,.85);
}
.mark{
  font-family:var(--display);
  font-size:clamp(24px,2.5vw,48px);
  letter-spacing:.10em;
}
.mark-bat{ color:var(--ink); }
.mark-art{
  color:var(--gold);
  background:linear-gradient(100deg,var(--gold),var(--red));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.mark-sub{
  margin-top:.55em;
  font-size:clamp(9px,.78vw,15px);
  font-weight:300;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.mark-sub i{ color:var(--red); font-style:normal; }

#counter{
  position:fixed; top:var(--pad); right:var(--pad);
  font-family:var(--display);
  font-size:clamp(14px,1.3vw,26px);
  letter-spacing:.18em;
  color:var(--ink-dim);
  text-shadow:0 4px 20px rgba(0,0,0,.9);
}
#counter i{ color:var(--red); font-style:normal; margin:0 .35em; }
#counterNow{ color:var(--ink); }

#progress{
  position:fixed; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,.09);
}
#progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--red),var(--gold));
  box-shadow:0 0 18px rgba(245,179,37,.65);
}

#toast{
  position:fixed; z-index:9;
  left:50%; bottom:6vh; transform:translateX(-50%) translateY(14px);
  padding:.7em 1.5em;
  background:var(--painel);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  font-size:clamp(12px,1vw,18px);
  letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  opacity:0; pointer-events:none;
  transition:opacity 280ms, transform 280ms;
}
#toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------------- Ajuda ---------------- */
#help{
  position:fixed; inset:0; z-index:10;
  display:grid; place-items:center;
  background:rgba(3,8,18,.82);
  backdrop-filter:blur(10px);
  transition:opacity 320ms;
}
#help.hidden{ opacity:0; pointer-events:none; }
.help-card{
  padding:clamp(24px,3vw,54px) clamp(30px,4vw,72px);
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(150deg, var(--navy), #06101f);
  color:var(--sobre-escuro);
  box-shadow:0 60px 120px -50px #000;
}
.help-card h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(26px,2.6vw,52px);
  letter-spacing:.2em; color:var(--gold);
  margin-bottom:.7em;
}
.help-card ul{ list-style:none; display:grid; gap:.65em; }
.help-card li{
  display:flex; align-items:center; gap:1em;
  font-size:clamp(13px,1.1vw,21px); font-weight:300;
}
.help-card li span{ color:var(--sobre-escuro-dim); margin-left:auto; }
kbd{
  display:inline-block; min-width:2.6em; text-align:center;
  padding:.28em .6em;
  font-family:var(--body); font-size:.86em; font-weight:600;
  border:1px solid rgba(255,255,255,.24);
  border-bottom-width:2px; border-radius:5px;
  background:rgba(255,255,255,.07);
}

/* ---------------- Boot ---------------- */
#boot{
  position:fixed; inset:0; z-index:20;
  display:grid; place-items:center;
  background:
    radial-gradient(80% 90% at 20% 15%, rgba(230,51,41,.22), transparent 62%),
    radial-gradient(80% 90% at 85% 88%, rgba(20,48,107,.9), transparent 62%),
    linear-gradient(160deg,#08152c,#050b18);
  color:var(--sobre-escuro);
  transition:opacity 900ms var(--ease-soft);
}
#boot.gone{ opacity:0; pointer-events:none; }
.boot-inner{ text-align:center; padding:0 6vw; }
.boot-mark{
  font-family:var(--display);
  font-size:clamp(52px,10vw,190px);
  line-height:.9; letter-spacing:.06em;
}
.boot-sub{
  margin-top:1.1em;
  font-size:clamp(11px,1.05vw,20px);
  font-weight:300; letter-spacing:.42em; text-transform:uppercase;
  color:var(--sobre-escuro-dim);
}
.boot-sub i{ color:var(--red); font-style:normal; }
.boot-bar{
  width:min(46vw,620px); height:2px; margin:3.2em auto 0;
  background:rgba(255,255,255,.12);
}
.boot-bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--red),var(--gold));
  transition:width 220ms linear;
  box-shadow:0 0 16px rgba(245,179,37,.7);
}
.boot-status{
  margin-top:1.2em;
  font-size:clamp(11px,.95vw,17px);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--sobre-escuro-dim);
  font-weight:300;
}
#bootBtn{
  margin-top:2.6em;
  padding:1em 3.2em;
  font-family:var(--body); font-size:clamp(13px,1.1vw,20px);
  font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sobre-escuro);
  background:linear-gradient(100deg,var(--red-deep),var(--red));
  border:0; border-radius:999px;
  cursor:pointer;
  box-shadow:0 22px 50px -22px rgba(230,51,41,.95);
  transition:transform 220ms var(--ease), box-shadow 220ms, opacity 300ms;
}
#bootBtn:hover:not(:disabled){ transform:translateY(-3px) scale(1.03); box-shadow:0 30px 66px -22px rgba(230,51,41,1); }
#bootBtn:disabled{ opacity:.32; cursor:progress; }
.boot-hint{
  margin-top:1.8em;
  font-size:clamp(10px,.85vw,15px);
  font-weight:300; letter-spacing:.14em;
  color:rgba(251,249,246,.4);
}
.boot-hint i{ color:var(--red); font-style:normal; }
.boot-hint kbd{ min-width:auto; font-size:.9em; }

/* ---------------- Abertura cinematográfica ---------------- */
.intro-host{
  position:fixed; inset:0; z-index:30;
  background:#000;
  transition:opacity 600ms var(--ease-soft);
}
.intro-host.intro-saindo{ opacity:0; pointer-events:none; }
/* duas telas empilhadas: WebGL embaixo com os brinquedos, canvas 2D em
   cima com bloom, vinheta, tarjas e tipografia */
.intro-canvas{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.intro-fx{ pointer-events:none; }

.boot-painel{
  display:inline-block;
  margin-top:2.2em;
  font-size:clamp(10px,.85vw,15px);
  font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sobre-escuro-dim); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:.35em;
  transition:color 200ms, border-color 200ms;
}
.boot-painel:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------------- Pausa ---------------- */
/* congela tudo o que está em cena, inclusive Ken Burns e trilhos */
body.paused #stage *,
body.paused #stage{ animation-play-state:paused !important; }
body.paused #progress i{ background:linear-gradient(90deg,#7d8aa0,#c9d3e2); box-shadow:none; }

@media (prefers-reduced-motion:reduce){
  #grain, #ambient{ animation:none; }
}