/* ============================================================
   Convite de 5 anos do Benjamim — saga do Freeza
   Palco fixo em camadas + conteúdo rolando por cima.
   ============================================================ */

:root{
  /* Namek em paz */
  --namek:        #C8D94A;
  --namek-fundo:  #9FB233;
  /* a tempestade */
  --tempestade:   #2A1B4A;
  --noite:        #0B0714;
  /* o Super Saiyajin */
  --ouro:         #FFD24A;
  --ouro-quente:  #FFF3C4;
  --laranja:      #FF8A1F;
  /* leitura de scouter */
  --turquesa:     #3FE0C8;
  /* o inimigo */
  --freeza:       #B478FF;
  /* texto */
  --papel:        #F4F1E4;
  --papel-fraco:  rgba(244,241,228,.62);
  --tinta:        #0B0714;

  --borda:        rgba(244,241,228,.16);
  --toque:        44px;      /* alvo mínimo de toque */
  --largura:      min(92vw, 34rem);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

/* Um display explícito no CSS vence o atributo hidden do navegador. Sem isto,
   quem já confirmou via o painel de confirmação E o formulário ao mesmo tempo. */
[hidden]{ display:none !important; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--noite);
  color:var(--papel);
  font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.6;
  text-wrap:pretty;
}

img{ max-width:100%; display:block; }

:focus-visible{
  outline:3px solid var(--turquesa);
  outline-offset:3px;
  border-radius:2px;
}

/* ============================================================
   PALCO — cenário fixo em camadas
   ============================================================ */

#palco{
  position:fixed; inset:0;
  z-index:0;
  overflow:hidden;
  background:var(--noite);
  pointer-events:none;
}

.camada{
  position:absolute;
  left:-6%; right:-6%;              /* folga lateral pro parallax não vazar */
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
}

/* O céu é a imagem no alto mais um degradê que continua a cor da última linha
   dela até o horizonte. Sem isso sobra faixa vazia onde as camadas não cobrem. */
#ceu-namek,#ceu-tempestade{
  top:-8%; height:96%;
  background-repeat:no-repeat,no-repeat;
  background-position:center top,center top;
  background-size:100% auto,100% 100%;
}
#ceu-namek{
  background-image:url("assets/cenarios/ceu_namek_p.webp"),
                   linear-gradient(180deg,#CDD161 0%,#C9CF5F 62%,#B4C158 100%);
}
#ceu-tempestade{
  opacity:0;
  background-image:url("assets/cenarios/ceu_tempestade_p.webp"),
                   linear-gradient(180deg,#2B2644 0%,#332A52 60%,#42306B 100%);
}

#montanhas{
  bottom:26%; height:26%;
  will-change:transform;
  opacity:.85;
  background-image:url("assets/cenarios/montanhas_p.webp");
  background-size:contain; background-position:center bottom;
}
#rochas{
  bottom:19%; height:26%;
  will-change:transform;
  background-image:url("assets/cenarios/rochas_p.webp");
  background-size:contain; background-position:center bottom;
}
#pedras{
  inset:0; height:100%;
  opacity:0;
  background-image:url("assets/cenarios/pedras_p.webp");
  background-size:cover; background-position:center;
  z-index:3;
}
#chao-namek,#chao-rachado{
  will-change:transform;
  left:-30%; right:-30%;            /* mais largo: o "cover" corta na horizontal, não amplia */
  bottom:-6%; height:30%;
  z-index:4;
  background-position:center bottom;
  /* sem isto o chão encosta no céu numa linha reta atravessando a tela */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%);
          mask-image:linear-gradient(180deg,transparent 0,#000 20%);
}
#chao-namek  { background-image:url("assets/cenarios/chao_namek_p.webp"); }
#chao-rachado{ background-image:url("assets/cenarios/chao_rachado_p.webp"); opacity:0; }

/* O ator: as versões do Benjamim vivem na mesma tela de 1200x2000 com o
   alinhamento já assado nos arquivos, então a troca é um corte, não um pulo. */
#ator{
  position:absolute;
  left:50%; bottom:3%;
  height:min(52vh,28rem);
  aspect-ratio:1200/2000;
  transform:translateX(-50%);
  z-index:3;
}
#ator > div{
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:contain;
  will-change:opacity;
}
#ator-normal  { background-image:url("assets/benjamim/foto_normal_p.webp"); }
#ator-gritando{ background-image:url("assets/benjamim/foto_gritando_p.webp"); }
#ator-ssj     { background-image:url("assets/benjamim/anime_ssj_p.webp"); }
#ator-gritando,#ator-ssj{ opacity:0; }

#fx{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:2;
}

#flash{
  position:absolute; inset:0;
  z-index:5;
  background:#fff;
  opacity:0;
}

/* ============================================================
   BOTÃO DE SOM
   ============================================================ */

#btn-som{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + .75rem);
  right:.75rem;
  z-index:50;
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:var(--toque); padding:.5rem .9rem;
  border:1px solid var(--borda); border-radius:999px;
  background:rgba(11,7,20,.72);
  backdrop-filter:blur(8px);
  color:var(--papel);
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:.8125rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer;
}
#btn-som svg{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
#btn-som .alto-falante{ fill:currentColor; stroke:none; }
#btn-som .ondas{ display:none; }
#btn-som[aria-pressed="true"]{ color:var(--ouro); border-color:rgba(255,210,74,.5); }
#btn-som[aria-pressed="true"] .ondas{ display:block; }
#btn-som[aria-pressed="true"] .mudo{ display:none; }

/* No celular o rótulo do botão cobria o sobretítulo. Vira só ícone; o nome
   acessível continua no aria-label. */
@media (max-width:37.5rem){
  #btn-som{ padding:.5rem; width:var(--toque); justify-content:center; }
  #btn-som-texto{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
}

/* ============================================================
   CAP. 0 — ABERTURA
   ============================================================ */

/* A abertura sai sozinha por animação de CSS. Se o app.js não carregar, não
   rodar ou quebrar, ela some assim mesmo — ninguém fica preso numa tela preta
   sem chegar no endereço da festa. Com JS, a classe .js desliga a animação e
   o script assume, aí o botão de pular funciona. */
#abertura{
  position:fixed; inset:0; z-index:40;
  display:grid; place-content:center; justify-items:center;
  gap:2rem; padding:2rem;
  background:var(--noite);
  text-align:center;
  opacity:1;
  animation:sai-abertura .8s ease 4.2s forwards;
}
@keyframes sai-abertura{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
#abertura.js{ animation:none; transition:opacity .8s ease; }
#abertura.js.saiu{ opacity:0; pointer-events:none; }
#abertura.fora{ display:none; }

.eyecatch-local{
  margin:0 0 1.25rem;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:clamp(.75rem,3vw,1rem);
  font-weight:700; letter-spacing:.5em; text-transform:uppercase;
  color:var(--turquesa);
  text-indent:.5em;                 /* compensa o letter-spacing final */
}
.eyecatch-titulo{
  margin:0;
  display:grid; gap:.15em;
  font-family:Anton,Impact,system-ui,sans-serif;
  font-weight:400; font-size:clamp(1.75rem,7.5vw,3.5rem);
  line-height:1.16; text-transform:uppercase; letter-spacing:.01em;
  color:var(--papel);
}
.eyecatch-titulo span:last-child{ color:var(--ouro); }

#btn-pular{
  min-height:var(--toque); padding:.6rem 1.4rem;
  border:1px solid var(--borda); border-radius:999px;
  background:transparent; color:var(--papel-fraco);
  font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; font-size:1rem;
  cursor:pointer;
}
#btn-pular:hover{ color:var(--papel); border-color:var(--papel-fraco); }

/* ============================================================
   CONTEÚDO
   ============================================================ */

#conteudo{ position:relative; z-index:10; }

section{
  position:relative;
  padding:clamp(3rem,10vh,6rem) 1.25rem;
}

/* ---- CAP. 1 — o chamado ---- */

/* Capítulo 1 acontece sobre o céu CLARO de Namek: aqui o texto é escuro,
   e fica no alto para não disputar espaço com o personagem lá embaixo. */
#chamado{
  position:relative;
  min-height:100svh;
  display:grid; align-content:start; justify-items:center;
  gap:.15rem; text-align:center;
  padding-top:calc(env(safe-area-inset-top,0px) + clamp(4.5rem,12vh,7rem));
}
#chamado .dica-rolagem{
  position:absolute;
  left:50%; bottom:1.5rem;
  transform:translateX(-50%);
  margin:0;
  width:max-content;
  padding:.5rem 1rem .25rem;
  border-radius:999px;
  background:rgba(11,7,20,.78);
  backdrop-filter:blur(4px);
}
/* Véu claro atrás do bloco de texto: sem ele a copy escura cai sobre a
   camiseta azul do Benjamim no celular e some. */
@media (max-width:51.99rem){
  #chamado::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:62%;
  background:linear-gradient(180deg,rgba(226,233,164,.92),rgba(226,233,164,.66) 58%,transparent);
  z-index:-1;
  pointer-events:none;
  }
}
#chamado > *{ position:relative; }
#chamado .sobretitulo{ color:#1B4A42; }
#chamado .data-heroi .destaque,
#chamado .idade{ color:var(--tinta); }
/* Dourado puro sobre o céu de Namek dá 1,15:1, e nesse corpo o contorno é
   fino demais para salvar. O destaque passa a vir do tamanho. */
#chamado .idade span{
  color:var(--tinta);
  font-size:1.75em;
  line-height:.8;
}
#chamado .data-heroi{ color:rgba(11,7,20,.72); }
#chamado .dica-rolagem{ color:var(--papel); }
#chamado .dica-rolagem::after{
  height:1.5rem; margin-top:.4rem;
  background:linear-gradient(180deg,var(--papel),transparent);
}

.sobretitulo{
  margin:0 0 .5rem;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:clamp(.7rem,2.8vw,.9rem);
  font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  text-indent:.34em;
  color:var(--turquesa);
}

/* O título gritado: contorno preto pintado ATRÁS do preenchimento
   (paint-order) para o gradiente não ser comido pelo traço. */
.titulo-heroi{
  margin:0;
  font-family:Anton,Impact,system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(3.5rem,19vw,9rem);
  line-height:1.0; text-transform:uppercase; letter-spacing:-.01em;
  transform:skewX(-5deg);
  background-image:linear-gradient(180deg,var(--ouro-quente) 4%,var(--ouro) 48%,var(--laranja) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-stroke:.09em var(--tinta);
  paint-order:stroke fill;
  filter:drop-shadow(0 .06em 0 rgba(0,0,0,.55));
}

.idade{
  margin:.25rem 0 1.1rem;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:clamp(1rem,4vw,1.4rem);
  font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  text-indent:.28em;
  color:var(--papel);
}
.idade span{ color:var(--ouro); font-size:1.35em; }

.data-heroi{
  margin:0; display:grid; gap:.3rem;
  font-family:"Chakra Petch",system-ui,sans-serif;
  text-transform:uppercase; letter-spacing:.2em; text-indent:.2em;
  font-size:clamp(.8rem,3vw,1rem); font-weight:500;
  color:var(--papel-fraco);
}
.data-heroi .destaque{
  font-size:clamp(1.5rem,6.5vw,2.5rem);
  font-weight:700; letter-spacing:.06em; text-indent:.06em;
  color:var(--papel);
}

.dica-rolagem{
  margin:3rem 0 0;
  font-size:.8125rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--papel-fraco);
}
.dica-rolagem::after{
  content:""; display:block;
  width:1px; height:2.5rem; margin:.75rem auto 0;
  background:linear-gradient(180deg,var(--papel-fraco),transparent);
}

/* ---- CAP. 2 e 3 — o ki e a transformação ---- */

/* Estado base: blocos estáticos e legíveis. Se a biblioteca de rolagem não
   carregar do CDN, a pessoa lê os textos normalmente em vez de rolar quatro
   telas em branco. A classe .com-rolagem, que o JS só põe quando tudo está
   disponível, é que liga a sequência animada. */
#transformacao{ padding:0; height:auto; }
.passo{
  display:grid; place-content:center;
  padding:clamp(3rem,9vh,5rem) 1.25rem;
  text-align:center;
}
.passo .texto-acende{ --acende:100%; }

html.com-rolagem #transformacao{ height:420svh; }
html.com-rolagem .passo{
  position:sticky; top:0;
  height:100svh;
  padding:1.25rem;
  opacity:0;
}
html.com-rolagem .passo .texto-acende{ --acende:0%; }

/* O texto acende da esquerda pra direita conforme a rolagem
   avança a variável --acende. Um elemento, nenhum span. */
.texto-acende{
  margin:0;
  max-width:14ch;
  font-family:Anton,Impact,system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(2rem,9vw,4.5rem);
  line-height:1.2; text-transform:uppercase;
  background-image:linear-gradient(90deg,
      var(--ouro) 0%,
      var(--ouro) var(--acende,0%),
      rgba(244,241,228,.45) var(--acende,0%));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-stroke:.055em var(--tinta);
  paint-order:stroke fill;
}

/* Véu radial atrás de cada frase: garante leitura tanto sobre o céu claro
   quanto sobre a tempestade, sem depender do que a arte estiver mostrando. */
html.com-rolagem .passo{ isolation:isolate; }
html.com-rolagem .passo::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(58% 42% at 50% 50%,rgba(11,7,20,.78),rgba(11,7,20,0) 78%);
  z-index:-1;
  pointer-events:none;
}

.ssj-parado{ display:none; }

/* Só aparece quando o aparelho pede menos movimento (ver o bloco no fim). */
.oferta-animacao{ display:none; margin-top:2rem; max-width:30ch; }
.oferta-animacao p{
  margin:0 0 .9rem;
  font-size:.9375rem; line-height:1.45;
  color:rgba(11,7,20,.74);
}
#btn-animar{
  min-height:var(--toque); padding:.7rem 1.4rem;
  border:2px solid var(--tinta); border-radius:999px;
  background:transparent; color:var(--tinta);
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:.9375rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; text-indent:.08em;
  cursor:pointer;
}
#btn-animar:hover{ background:rgba(11,7,20,.1); }

.golpe{
  margin:0;
  font-family:Anton,Impact,system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(2.75rem,15vw,8rem);
  line-height:1.06; text-transform:uppercase; letter-spacing:-.015em;
  transform:skewX(-5deg);
  background-image:linear-gradient(180deg,#fff 2%,var(--ouro-quente) 26%,var(--ouro) 60%,var(--laranja) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-stroke:.075em var(--tinta);
  paint-order:stroke fill;
  filter:drop-shadow(0 0 .5em rgba(255,210,74,.45));
}
.golpe-nota{
  margin:1.75rem auto 0;
  max-width:22ch;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:clamp(1.0625rem,4.4vw,1.5rem);
  line-height:1.45;
  color:var(--papel);
  text-wrap:balance;
}
.golpe-nota strong{ color:var(--ouro); font-weight:700; }

/* ---- CAP. 4 — informações ---- */

#info{
  background:linear-gradient(180deg,transparent,rgba(11,7,20,.93) 12%,var(--noite) 40%);
}
#info > *{ width:var(--largura); margin-inline:auto; }
#info > .botao-secundario{ width:max-content; max-width:100%; }

.rotulo-secao{
  margin:0 0 1.5rem;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:clamp(.75rem,3vw,.9375rem);
  font-weight:700; letter-spacing:.4em; text-transform:uppercase;
  text-indent:.4em;
  color:var(--turquesa);
}
.rotulo-secao::after{
  content:""; display:block;
  height:1px; margin-top:1rem;
  background:linear-gradient(90deg,var(--turquesa),transparent);
}

.scouter{
  margin:0 0 1.5rem;
  border:1px solid rgba(63,224,200,.28);
  border-radius:4px;
  background:rgba(63,224,200,.045);
  position:relative;
}
/* cantos de visor */
.scouter::before,.scouter::after{
  content:""; position:absolute; width:14px; height:14px;
  border:2px solid var(--turquesa);
}
.scouter::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.scouter::after { bottom:-1px; right:-1px; border-left:0; border-top:0; }

.scouter .linha{
  display:grid;
  grid-template-columns:7.5rem 1fr;
  gap:.75rem;
  padding:.9rem 1rem;
  border-bottom:1px solid rgba(63,224,200,.14);
}
.scouter .linha:last-child{ border-bottom:0; }
.scouter dt{
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--turquesa);
  padding-top:.15em;
}
.scouter dd{ margin:0; }
.scouter dd span{
  display:block;
  color:var(--papel-fraco);
  font-size:1rem;
}

.botao-secundario{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--toque); padding:.7rem 1.5rem;
  width:max-content; max-width:100%;
  margin-inline:auto;
  border:1px solid var(--turquesa); border-radius:999px;
  background:transparent; color:var(--turquesa);
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:1rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; text-indent:.12em;
  text-decoration:none; cursor:pointer;
}
.botao-secundario:hover{ background:rgba(63,224,200,.12); }

.aviso{
  position:relative;
  margin-top:2.5rem;
  padding:1.25rem;
  border:1px solid rgba(180,120,255,.34);
  border-radius:4px;
  background:rgba(180,120,255,.1);
}
/* Mesmos cantos de visor do scouter: o aviso pertence à mesma leitura. */
.aviso::before,.aviso::after{
  content:""; position:absolute; width:14px; height:14px;
  border:2px solid var(--freeza);
}
.aviso::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.aviso::after { bottom:-1px; right:-1px; border-left:0; border-top:0; }
.aviso h3{
  margin:0 0 .6rem;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:.8125rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; text-indent:.24em;
  color:var(--freeza);
}
.aviso p{ margin:0 0 .6rem; }
.aviso p:last-child{ margin-bottom:0; }
.aviso strong{ color:var(--papel); }

/* ---- CAP. 5 — confirmar presença ---- */

#rsvp{
  background:var(--noite);
  text-align:center;
}
#rsvp > *{ width:var(--largura); margin-inline:auto; }
#rsvp > .botao-secundario,
#rsvp .botao-secundario{ width:max-content; max-width:100%; }

.botao-golpe{
  display:grid; gap:.25rem;
  width:100%; min-height:calc(var(--toque) + 1.5rem);
  padding:1.1rem 1.5rem;
  border:0; border-radius:999px;
  background:linear-gradient(180deg,var(--ouro-quente),var(--ouro) 45%,var(--laranja));
  color:var(--tinta);
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,210,74,.5), 0 .4rem 2rem rgba(255,138,31,.3);
  transition:transform .12s ease, box-shadow .2s ease;
}
.botao-golpe:hover{ box-shadow:0 0 0 1px rgba(255,210,74,.8), 0 .5rem 2.6rem rgba(255,138,31,.45); }
.botao-golpe:active{ transform:scale(.98); }
.botao-golpe-texto{
  font-family:Anton,Impact,system-ui,sans-serif;
  font-size:clamp(1.5rem,6vw,2.25rem);
  line-height:1; text-transform:uppercase; letter-spacing:.01em;
}
.botao-golpe-sub{
  font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:.8125rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  opacity:.72;
}

.prazo{
  margin:0 0 2rem;
  font-size:1.0625rem;
  color:var(--papel-fraco);
}
.prazo strong{ color:var(--papel); font-weight:600; }

#rsvp-form{ text-align:left; display:grid; gap:1.75rem; }

.campo label,
.contadores legend{
  display:block;
  margin-bottom:.5rem;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:.8125rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--turquesa);
}
.campo input[type=text]{
  width:100%; min-height:var(--toque);
  padding:.75rem 1rem;
  border:1px solid var(--borda); border-radius:4px;
  background:rgba(244,241,228,.05);
  color:var(--papel);
  font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; font-size:1rem;
}
.campo input::placeholder{ color:rgba(244,241,228,.58); }
.campo input:focus{ border-color:var(--turquesa); }

.contadores{ margin:0; padding:0; border:0; }
.contadores .ajuda{
  margin:-.25rem 0 1rem;
  font-size:1rem; color:var(--papel-fraco);
}

.contador{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.65rem 0;
  border-bottom:1px solid var(--borda);
}
.contador-rotulo{ font-size:1rem; line-height:1.35; }
.contador-rotulo em{
  display:block;
  font-size:.8125rem; font-style:italic;
  color:var(--papel-fraco);
}
.contador-controle{
  display:flex; align-items:center; gap:.25rem; flex:none;
}
.contador-controle button{
  width:var(--toque); height:var(--toque); flex:none;
  border:1px solid var(--borda); border-radius:50%;
  background:transparent; color:var(--papel);
  font-size:1.35rem; line-height:1; cursor:pointer;
}
.contador-controle button:hover:not(:disabled){ border-color:var(--ouro); color:var(--ouro); }
.contador-controle button:disabled{ opacity:.3; cursor:not-allowed; }
.contador-controle output{
  min-width:2.25rem; text-align:center;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:1.25rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}

.armadilha{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%);
  white-space:nowrap;
}

.botao-recusa{
  justify-self:center;
  min-height:var(--toque); padding:.6rem 1.25rem;
  border:0; background:transparent;
  color:var(--papel-fraco);
  font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; font-size:1rem;
  text-decoration:underline; text-underline-offset:4px;
  cursor:pointer;
}
.botao-recusa:hover{ color:var(--papel); }

.erro{
  margin:.5rem 0 0;
  font-size:1rem;
  color:#FF9E9E;
}
.erro-geral{ text-align:center; }

.rotulo-poder{
  margin:0 0 .5rem;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:.8125rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; text-indent:.34em;
  color:var(--turquesa);
}
.poder{
  margin:0;
  font-family:Anton,Impact,system-ui,sans-serif;
  font-size:clamp(3rem,16vw,7rem); line-height:1;
  font-variant-numeric:tabular-nums;
  background-image:linear-gradient(180deg,var(--ouro-quente),var(--ouro) 55%,var(--laranja));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-stroke:.05em var(--tinta);
  paint-order:stroke fill;
}
.poder-nome,.recusa-texto{
  margin:1rem 0 0;
  color:var(--papel-fraco);
}
.poder-nome span{ color:var(--papel); font-weight:600; }
#rsvp-recusado .botao-secundario,
#rsvp-fechado .botao-secundario{ margin-top:1.5rem; }

/* ---- CAP. 6 — rodapé ---- */

footer{
  position:relative; z-index:10;
  padding:4rem 1.25rem max(4rem,env(safe-area-inset-bottom));
  background:var(--noite);
  border-top:1px solid var(--borda);
  text-align:center;
}
footer > *{ margin-inline:auto; }
.assinatura{
  margin:0 0 1.5rem;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:1.35rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; text-indent:.2em;
}
.telefone{
  margin:.9rem 0 0;
  font-family:"Chakra Petch",system-ui,sans-serif;
  font-size:1rem; letter-spacing:.08em;
  color:var(--papel-fraco);
}
.despedida{
  margin:2.5rem 0 0;
  font-size:1rem; font-style:italic;
  color:var(--papel-fraco);
}

/* ============================================================
   TELAS LARGAS
   ============================================================ */

/* Em tela larga o texto e o personagem deixam de disputar o centro: ele vai
   para a direita, a copy ocupa a coluna da esquerda. Sem isso, numa janela
   baixa e larga o título cai em cima do rosto dele. */
@media (min-width:52rem){
  #ator{ left:73%; height:min(78vh,42rem); bottom:3%; }
  #chamado{
    align-content:center;
    justify-items:start;
    text-align:left;
    padding-left:clamp(2rem,7vw,6rem);
    padding-right:44vw;
    padding-top:0;
    padding-bottom:8vh;
  }
  #chamado .sobretitulo,
  #chamado .idade,
  #chamado .data-heroi{ text-align:left; }
  #chamado .dica-rolagem{ left:clamp(2rem,7vw,6rem); transform:none; }
  .scouter .linha{ grid-template-columns:9rem 1fr; padding:1.1rem 1.5rem; }
}

/* Janela baixa: encolhe o ator para o bloco de texto sempre ter o topo livre. */
@media (max-height:44rem){
  #ator{ height:min(52vh,26rem); bottom:2%; }
  #chamado{ padding-top:2.5rem; }
}

/* ============================================================
   RESOLUÇÃO CHEIA EM TELA LARGA
   Por padrão a página serve imagens menores: num celular no 4G ela pesa
   444 KB em vez de 990 KB, e o corte é invisível no tamanho em que essas
   camadas de fato aparecem. Telas grandes recebem a versão cheia.
   ============================================================ */

@media (min-width:52rem){
  #ceu-namek{
    background-image:url("assets/cenarios/ceu_namek.webp"),
                     linear-gradient(180deg,#CDD161 0%,#C9CF5F 62%,#B4C158 100%);
  }
  #ceu-tempestade{
    background-image:url("assets/cenarios/ceu_tempestade.webp"),
                     linear-gradient(180deg,#2B2644 0%,#332A52 60%,#42306B 100%);
  }
  #chao-namek{ background-image:url("assets/cenarios/chao_namek.webp"); }
  #chao-rachado{ background-image:url("assets/cenarios/chao_rachado.webp"); }
  #montanhas{ background-image:url("assets/cenarios/montanhas.webp"); }
  #rochas{ background-image:url("assets/cenarios/rochas.webp"); }
  #pedras{ background-image:url("assets/cenarios/pedras.webp"); }
  #ator-normal{ background-image:url("assets/benjamim/foto_normal.webp"); }
  #ator-gritando{ background-image:url("assets/benjamim/foto_gritando.webp"); }
  #ator-ssj{ background-image:url("assets/benjamim/anime_ssj.webp"); }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   Entrega o estado final: transformação já concluída, tudo legível.
   ============================================================ */

/* ============================================================
   MOVIMENTO REDUZIDO
   Conta a mesma história em quadros parados, em vez de pular para o
   desfecho. Todo seletor é travado atrás de html:not(.animar): o iOS
   liga esta preferência sozinho no modo de economia de bateria, então
   quem quiser a animação pode pedir e o botão desarma este bloco.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html:not(.animar){ scroll-behavior:auto; }

  html:not(.animar) #abertura{ display:none; }

  html:not(.animar) #ceu-namek,
  html:not(.animar) #chao-namek{ opacity:1; }
  html:not(.animar) #ceu-tempestade,
  html:not(.animar) #chao-rachado,
  html:not(.animar) #pedras{ opacity:0; }
  html:not(.animar) #ator-normal{ opacity:1; }
  html:not(.animar) #ator-gritando,
  html:not(.animar) #ator-ssj{ opacity:0; }
  html:not(.animar) #fx,
  html:not(.animar) #flash{ display:none; }

  html:not(.animar) #transformacao{ height:auto; }
  /* Fundo próprio nos blocos: cobre o palco fixo — senão a foto real dele
     aparece ao lado do desenho, dois Benjamins na mesma tela — e dá contraste
     ao texto, que sobre o céu claro de Namek sumia. */
  html:not(.animar) .passo{
    position:static;
    height:auto;
    min-height:0;
    opacity:1;
    padding:clamp(3rem,8vh,5rem) 1.25rem;
    background:var(--noite);
  }
  html:not(.animar) .passo:first-child{
    background:linear-gradient(180deg,rgba(11,7,20,0),var(--noite) 26%);
    padding-top:clamp(6rem,18vh,10rem);
  }
  html:not(.animar) .texto-acende{ --acende:100%; }
  /* o topo transparente do #info existe para a transição da cena animada;
     parado, só deixava passar uma faixa clara entre dois blocos escuros */
  html:not(.animar) #info{ background:var(--noite); }

  html:not(.animar) .ssj-parado{
    display:block;
    justify-self:center;
    width:min(62vw,16rem);
    height:auto;
    margin:0 0 1.5rem;
  }

  html:not(.animar) .oferta-animacao{ display:block; }

  html:not(.animar) .dica-rolagem{ display:none; }
  html:not(.animar) .botao-golpe{ transition:none; }
  html:not(.animar) .botao-golpe:active{ transform:none; }
}