/* ==========================================================
   PORTÃO DO DRAGÃO — Hero oriental
   ABC.DESIGN_ · abertura: olhos no escuro → piscada → dragão + cenário → samurai
   ========================================================== */

:root {
  /* linha do tempo da abertura (s, a partir do fim do selo). v4.0.2: ~23% mais curta (navbar em 5,6 → 4,3s) */
  --t-eyes: .3s;     /* olhos abrem no escuro */
  --eyes-dur: 2s;    /* abrir + piscar */
  --t-reveal: 2.3s;  /* câmera abre, dragão e cenário surgem */
  --t-rise: 2.7s;    /* samurai sobe */
  --t-nav: 4.3s;     /* navbar */
}

/* ==========================================================
   HERO / STAGE
   O stage tem a proporção do cenário (3:2) e faz "cover" no
   viewport. Todas as camadas usam % do stage, então nada
   desalinha em nenhuma tela.
   ========================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  background: var(--ink);
  container-type: size;
}

.stage {
  position: absolute;
  left: 50%; top: 50%;
  width: min(max(100cqw, 150cqh), 190cqh);
  aspect-ratio: 3 / 2;
  transform: translate(-50%, calc(-50% - var(--lift, 0px)));
  container-type: inline-size;

  /* posicionamento do dragão / samurai (em % do stage) */
  --dw: 60;   /* largura do dragão */
  --dt: 7;    /* topo do dragão */
  --zoom: 2.3; /* zoom da câmera nos olhos durante a intro */
  --sh: 28;   /* altura do samurai */
  --sb: 88.5; /* linha dos pés do samurai */
}
.camera, .shake, .layer { position: absolute; inset: 0; }

/* câmera: na intro, fica com zoom nos olhos do dragão e centralizada neles */
.camera {
  --eye-y: calc(var(--dt) + var(--dw) * .41);
  transform-origin: calc(50% + var(--dw) * .0027%) calc(var(--eye-y) * 1%);
}

/* parallax: o js/hero.js escreve o transform direto em cada camada (--d = profundidade).
   Antes eram variáveis no .hero, que recalculavam o estilo do hero inteiro a cada quadro. */
.layer {
  --d: 1;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.plate { position: absolute; inset: 0; transform: scale(1.045); }
.plate > picture { display: contents; }
.plate > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* v4.0.1: em pé até 3:5 o <picture> entrega só a metade central do cenário (cenario-centro.webp);
   ela ocupa a metade central do stage. Aparecem no máximo 40% da largura (o parallax mexe ~0,35%). */
@media (max-aspect-ratio: 3/5) { .plate > picture > img { left: 25%; width: 50%; } }

/* ---------- escrita nos estandartes ----------
   Os estandartes foram gerados em branco para isto: o texto vive
   dentro do cenário, em tinta sumi sobre o tecido vermelho. */
.banner {
  position: absolute; margin: 0;
  top: 18.5%; height: 32%; width: 3.7%;
  writing-mode: vertical-rl;
  display: flex; align-items: center; justify-content: flex-start; gap: .8em;
  font: 800 max(9px, .66cqw) / 1 var(--f-display);
  letter-spacing: .26em; text-transform: uppercase;
  color: #120203;
  text-shadow: 0 0 1px rgba(18, 2, 3, .6);
  white-space: nowrap;
}
.banner--l { left: 5.9%; }
.banner--r { left: 90.45%; }
.banner__k { writing-mode: horizontal-tb; display: block; flex: none; width: 1.2em; height: 1.2em; text-align: center; font: 400 1.6em / 1.2 var(--f-brush); letter-spacing: 0; }
.banner__t + .banner__k { margin-top: 1em; }
.banner__dot { width: .5em; height: .5em; background: currentColor; rotate: 45deg; flex: none; }
.banner__seal { width: 58%; height: auto; margin-top: 1.4em; filter: brightness(0); opacity: .85; }

/* ---------- flash de relâmpago no céu ---------- */
.sky-flash {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 38% 30% at var(--fx, 50%) var(--fy, 30%), rgba(255, 90, 80, .55), transparent 70%),
    radial-gradient(ellipse 70% 45% at 50% 35%, rgba(224, 38, 43, .18), transparent 75%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.sky-flash.is-on { animation: flash 1.1s ease-out; }
@keyframes flash {
  0% { opacity: 0 } 6% { opacity: 1 } 14% { opacity: .15 } 22% { opacity: .85 } 100% { opacity: 0 }
}

/* ==========================================================
   DRAGÃO
   ========================================================== */
.dragon {
  position: absolute;
  width: calc(var(--dw) * 1%);
  aspect-ratio: 3 / 2;
  left: calc(50% - var(--dw) * .5%);
  top: calc(var(--dt) * 1%);
}
.dragon__float, .dragon__breath, .dragon__fade, .dragon__reveal { position: absolute; inset: 0; }
.dragon__float { animation: dragon-float 9s ease-in-out infinite; }
.dragon__breath { transform-origin: 50.3% 41%; animation: dragon-breath 5.5s ease-in-out infinite; }
/* bordas suaves: topo, laterais e a base se dissolvendo antes do portão */
.dragon__fade {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 58%, transparent 82%),
                      linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 58%, transparent 82%),
                      linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent);
          mask-composite: intersect;
}
.dragon__reveal img {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 18px rgba(224, 38, 43, .22));
}
/* escurece a fumaça da periferia para o foco ficar na cabeça */
.dragon__shade {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 26% 34% at 50.3% 38%, transparent 35%, rgba(6, 1, 2, .6) 100%);
  pointer-events: none;
  visibility: hidden;
}
/* v4.0.1: a máscara (o próprio dragao.webp) e as névoas só entram com .hero-ok, que o hero.js liga
   quando o cenário (o LCP) está pronto. Antes, tudo isso baixava junto com ele. */
.hero-ok .dragon__shade {
  visibility: visible;
  -webkit-mask: url("../assets/hero/dragao.webp") center / 100% 100% no-repeat;
          mask: url("../assets/hero/dragao.webp") center / 100% 100% no-repeat;
}
@keyframes dragon-float {
  0%,100% { transform: translate3d(0, 0, 0) rotate(0deg) }
  50% { transform: translate3d(0, -1.8%, 0) rotate(-.25deg) }
}
@keyframes dragon-breath { 0%,100% { transform: scale(1) } 50% { transform: scale(1.014) } }

@property --rv { syntax: "<percentage>"; inherits: false; initial-value: 160%; }

/* ---------- olhos (íris em fenda + pálpebra) ---------- */
.eye {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 3.3%; aspect-ratio: 2.3 / 1;
  translate: -50% -50%;
  rotate: var(--tilt);
  pointer-events: none;
}
.eye__glow {
  position: absolute; inset: -260% -110%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 70, 50, .55), rgba(224, 38, 43, .22) 32%, transparent 68%);
  mix-blend-mode: screen;
  animation: glow-pulse 2.8s ease-in-out infinite;
}
.eye__blink, .eye__lid { position: absolute; inset: 0; }
.eye__lid { border-radius: 50%; overflow: hidden; box-shadow: 0 0 10px 2px rgba(255, 60, 40, .7); }
.eye__iris {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, #fff3e2 0, #ffc766 14%, #ff4a24 36%, #c3121a 64%, #4a0508 100%);
}
.eye__iris::after { /* pupila em fenda */
  content: ""; position: absolute; left: 50%; top: 6%; bottom: 6%;
  width: 13%; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, #050102 55%, rgba(80, 4, 6, .6) 80%, transparent);
}
@keyframes glow-pulse { 0%,100% { opacity: .75; transform: scale(.94) } 50% { opacity: 1; transform: scale(1.08) } }
.eye__blink.is-on { animation: blink .38s ease-in-out; }
@keyframes blink { 0%,100% { transform: scaleY(1) } 45%,55% { transform: scaleY(.06) } }

.gem {
  position: absolute; left: var(--x); top: var(--y);
  width: 4%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 190, .9), rgba(255, 50, 40, .6) 25%, transparent 70%);
  mix-blend-mode: screen;
  animation: glow-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
}

.dragon__flare {
  position: absolute; left: 50.3%; top: 40.5%;
  width: 26%; aspect-ratio: 2 / 1;
  translate: -50% -50%;
  background: radial-gradient(ellipse, rgba(255, 90, 70, .75), rgba(224, 38, 43, .25) 40%, transparent 70%);
  mix-blend-mode: screen; opacity: 0; pointer-events: none;
}
.dragon__flare.is-on { animation: eye-flare 1.1s ease-out; }
@keyframes eye-flare { 0% { opacity: 0; transform: scale(.4) } 20% { opacity: 1; transform: scale(1.1) } 100% { opacity: 0; transform: scale(1) } }

/* ==========================================================
   NÉVOA
   ========================================================== */
.fog {
  position: absolute; left: -10%; right: -10%;
  background-repeat: repeat-x;
  background-size: auto 100%;
  pointer-events: none;
}
.fog--mid {
  top: 34%; height: 28%;
  opacity: .42;
  animation: fog-drift 70s linear infinite;
}
.fog--crimson {
  top: 42%; height: 22%;
  mix-blend-mode: screen;
  opacity: .5;
  animation: fog-drift 48s linear infinite reverse;
}
.fog--low {
  top: 70%; height: 34%;
  opacity: .5;
  animation: fog-drift 55s linear infinite;
}
@keyframes fog-drift { from { background-position: 0 0 } to { background-position: -2048px 0 } }
.hero-ok .fog--mid, .hero-ok .fog--low { background-image: url("../assets/hero/nevoa.webp"); }   /* v4.0.1: ver .hero-ok acima */
.hero-ok .fog--crimson { background-image: url("../assets/hero/nevoa-carmesim.webp"); }

/* ==========================================================
   LANTERNAS
   ========================================================== */
.lantern {
  position: absolute;
  left: var(--x); top: var(--y);
  width: calc(var(--s) * 4.2%); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 110, .75), rgba(224, 38, 43, .35) 35%, transparent 70%);
  mix-blend-mode: screen;
  animation: flicker var(--f) steps(12, end) infinite;
}
@keyframes flicker {
  0%,100% { opacity: .85 } 12% { opacity: .6 } 25% { opacity: .95 } 38% { opacity: .7 }
  52% { opacity: 1 } 64% { opacity: .65 } 78% { opacity: .9 } 90% { opacity: .75 }
}

/* ==========================================================
   SAMURAI — imóvel, sem tratamento extra: ele pertence ao cenário.
   Está na mesma camada de parallax do chão (--d:.35), então
   nunca desliza sobre o piso.
   ========================================================== */
.samurai {
  position: absolute;
  height: calc(var(--sh) * 1%);
  aspect-ratio: 996 / 1535;
  left: 50%;
  top: calc((var(--sb) - var(--sh)) * 1%);
  translate: -50% 0;
}
.samurai__body { position: absolute; inset: 0; width: 100%; height: 100%; }
/* reflexo no piso molhado: estático, como os reflexos pintados do cenário */
.samurai__reflex {
  position: absolute; left: 0; top: 99.5%;
  width: 100%; height: 100%;
  transform: scaleY(-1);
  opacity: .22;
  filter: blur(1.6px) brightness(.75);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 42%);
          mask-image: linear-gradient(to top, #000, transparent 42%);
  pointer-events: none;
}
.samurai__shadow {
  position: absolute;
  left: 12%; right: 12%; bottom: -2%; height: 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .8), transparent 70%);
}

/* ==========================================================
   OVERLAYS
   ========================================================== */
.particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(3, 2, 2, .7)),
    linear-gradient(to bottom, rgba(5, 4, 4, .55), transparent 18%, transparent 80%, var(--ink));
}
.scroll-cue {
  position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 1px; height: 46px; translate: -50% 0;
  background: rgba(239, 228, 214, .15); overflow: hidden;
}
/* o traço desce por transform (composto na GPU). Animar `top` forçava layout da página
   inteira a cada quadro, para sempre (~52 layouts/s em qualquer seção no desktop).
   -100% → 250% da própria altura = top -40% → 100% do trilho, o mesmo movimento. */
.scroll-cue span {
  position: absolute; left: 0; top: 0; width: 100%; height: 40%;
  background: linear-gradient(to bottom, transparent, var(--crimson));
  transform: translateY(-100%);
  animation: cue 2.4s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes cue { to { transform: translateY(250%) } }

/* ---------- loader (selo) ---------- */
.loader {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--ink);
}
/* v4.0.1: o loader vem visível no HTML (sem hidden) e aparece desde a primeira pintura com a classe
   .js-loader, ligada no <head> (não liga com movimento reduzido nem sem JS). O hero.js o esconde no fim. */
html:not(.js-loader) .loader { display: none; }
.loader img { width: 64px; height: auto; animation: seal-in 1s ease-out both; filter: drop-shadow(0 0 16px rgba(224, 38, 43, .5)); }
.loader.is-done { animation: loader-out .8s ease .15s forwards; }
.loader.is-done img { animation: seal-stamp .5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes seal-in { from { opacity: 0; transform: scale(1.4); filter: blur(6px) } to { opacity: 1 } }
@keyframes seal-stamp { 0% { transform: scale(1.25) } 60% { transform: scale(.94) } 100% { transform: scale(1); opacity: 0 } }
@keyframes loader-out { to { opacity: 0; visibility: hidden } }

/* ==========================================================
   ABERTURA — só roda com .is-playing (adicionada pelo JS)
   1. olhos abrem no preto  2. piscam  3. câmera abre:
   dragão emerge da tinta + cenário surge  4. samurai  5. navbar
   ========================================================== */

/* 1–2. olhos: abrem devagar, piscam e voltam mais intensos */
.is-playing .eye__lid { animation: eye-open var(--eyes-dur) cubic-bezier(.4, 0, .2, 1) var(--t-eyes) both; }
@keyframes eye-open {
  0%   { transform: scaleY(0); opacity: 0 }
  8%   { transform: scaleY(.08); opacity: 1 }
  34%  { transform: scaleY(.55) }
  52%  { transform: scaleY(1) }
  66%  { transform: scaleY(1) }
  72%  { transform: scaleY(.05) }
  80%  { transform: scaleY(1) }
  100% { transform: scaleY(1); opacity: 1 }
}
.is-playing .eye__glow {
  animation: eye-glow-in var(--eyes-dur) ease-out var(--t-eyes) both,
             glow-pulse 2.8s ease-in-out calc(var(--t-eyes) + var(--eyes-dur)) infinite;
}
@keyframes eye-glow-in {
  0%   { opacity: 0; transform: scale(.4) }
  52%  { opacity: .7; transform: scale(.9) }
  70%  { opacity: .2; transform: scale(.7) }
  84%  { opacity: 1; transform: scale(1.7) }
  100% { opacity: .85; transform: scale(1) }
}
/* depois que o dragão aparece, a íris cede para a pintura */
.is-playing .eye__iris { animation: iris-settle 1.6s ease calc(var(--t-reveal) + 1.4s) both; }
@keyframes iris-settle { from { opacity: 1 } to { opacity: .5 } }

/* 3. câmera sai do close nos olhos */
.is-playing .camera { animation: camera-out 2.8s cubic-bezier(.65, 0, .15, 1) var(--t-reveal) both; }
@keyframes camera-out {
  from { transform: translateY(calc((50 - var(--eye-y)) * 1%)) scale(var(--zoom)) }
  to   { transform: none }
}
.is-playing .plate { animation: plate-in 2.6s cubic-bezier(.3, .6, .2, 1) calc(var(--t-reveal) + .2s) both; }
@keyframes plate-in {
  from { opacity: 0; transform: scale(1.1); filter: brightness(.2) blur(8px) }
  to   { opacity: 1; transform: scale(1.045); filter: none }
}
.is-playing .dragon__reveal {
  -webkit-mask-image: radial-gradient(ellipse 100% 150% at 50.3% 41%, #000 calc(var(--rv) - 30%), transparent var(--rv));
          mask-image: radial-gradient(ellipse 100% 150% at 50.3% 41%, #000 calc(var(--rv) - 30%), transparent var(--rv));
  animation: dragon-reveal 2.4s cubic-bezier(.3, .6, .2, 1) var(--t-reveal) both;
}
@keyframes dragon-reveal {
  0%   { --rv: 0%; opacity: 0; filter: blur(12px) brightness(2.2) saturate(1.3) }
  25%  { opacity: 1 }
  100% { --rv: 160%; opacity: 1; filter: none }
}
.is-playing .gem { animation: fade-in 1s ease calc(var(--t-reveal) + .6s) both, glow-pulse 3.6s ease-in-out calc(var(--t-reveal) + 1.6s) infinite; }
.is-playing .shake { animation: shake .9s linear calc(var(--t-reveal) + .35s) both; }
@keyframes shake {
  0%,100% { transform: none } 10% { transform: translate(.18%, -.25%) } 22% { transform: translate(-.22%, .18%) }
  36% { transform: translate(.15%, .15%) } 52% { transform: translate(-.12%, -.1%) } 70% { transform: translate(.06%, .04%) }
}

.is-playing .fog { animation-name: fog-drift, fade-in; animation-duration: var(--fog-d, 70s), 3s; animation-timing-function: linear, ease; animation-delay: 0s, calc(var(--t-reveal) + .6s); animation-iteration-count: infinite, 1; animation-fill-mode: none, both; }
.is-playing .fog--crimson { --fog-d: 48s; animation-direction: reverse, normal; }
.is-playing .fog--low { --fog-d: 55s; }
@keyframes fade-in { from { opacity: 0 } }

.is-playing .lantern { animation: flicker var(--f) steps(12, end) infinite, ignite 1.4s ease-out calc(var(--t-reveal) + 1.3s) both; }
@keyframes ignite { from { opacity: 0; transform: scale(.3) } }

/* 4. samurai surge da escuridão, sem se mover */
.is-playing .samurai__body { animation: sam-in 1.9s ease var(--t-rise) both; }
@keyframes sam-in { from { opacity: 0; filter: brightness(0) } to { opacity: 1; filter: none } }
.is-playing .samurai__shadow,
.is-playing .samurai__reflex { animation: fade-in 2s ease calc(var(--t-rise) + .6s) both; }

/* hero fora da tela (js/hero.js marca .is-fora): as animações contínuas pausam.
   Só depois da abertura (.nav-in), para ela nunca congelar no meio; o loader fica de fora. */
.nav-in .hero.is-fora .stage *,
.nav-in .hero.is-fora .stage *::before,
.nav-in .hero.is-fora .stage *::after,
.nav-in .hero.is-fora .scroll-cue span { animation-play-state: paused !important; }

.is-playing .particles { animation: fade-in 2s ease var(--t-reveal) both; }
.is-playing .vignette { animation: fade-in 2s ease var(--t-reveal) both; }
.is-playing .scroll-cue { animation: fade-in 1.2s ease calc(var(--t-nav) + .8s) both; }

/* ==========================================================
   INFORMAÇÕES
   desktop: escrita nos estandartes + selos nos cantos
   telas estreitas: trilhos verticais nas bordas
   ========================================================== */
.tags { list-style: none; margin: 0; padding: 0; }
.tag {
  position: absolute; bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px;
  font: 600 11.5px / 1 var(--f-display);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 1px 10px #000, 0 0 2px #000;
}
.tag--l { left: clamp(16px, 4vw, 56px); }
.tag--r { right: clamp(16px, 4vw, 56px); flex-direction: row-reverse; }

.rails { display: none; }
.rail {
  position: absolute; margin: 0;
  top: calc(86px + env(safe-area-inset-top, 0px));
  bottom: var(--rail-bottom, 40px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.rail--l { left: 13px; }
.rail--r { right: 13px; }
.rail__line { flex: 1; min-height: 16px; width: 1px; background: linear-gradient(to bottom, transparent, rgba(224, 38, 43, .75)); }
.rail__t {
  writing-mode: vertical-rl;
  font: 600 9.5px / 1 var(--f-display);
  /* telas baixas: encolhe só o necessário para o trilho caber entre a navbar e o botão.
     cqh = altura do .hero · 146px = topo do trilho (86) + linha, losango e espaços (~60)
     · 37 ≈ altura do texto do trilho mais longo (o esquerdo) em px por px de fonte, medida
     na Gang of Three com folga. Mudou o texto ou a fonte? Remeça e reveja o 37. */
  font-size: clamp(7.5px, (100cqh - 146px - env(safe-area-inset-top, 0px) - var(--rail-bottom, 40px)) / 37, 9.5px);
  letter-spacing: .32em; text-transform: uppercase; white-space: nowrap;
  color: var(--bone-dim);
  text-shadow: 0 0 8px #000, 0 0 2px #000;
}
.rail__sep { width: 5px; height: 5px; flex: none; background: var(--crimson); rotate: 45deg; }
.rail__logo { width: 20px; height: auto; flex: none; }

/* entrada: a tinta "escreve" de cima para baixo */
.js-intro .banner, .js-intro .rail, .js-intro .tag { opacity: 0; }
.nav-in .banner { animation: ink-write 1.8s cubic-bezier(.5, 0, .2, 1) .5s both; }
.nav-in .banner--r { animation-delay: .75s; }
.nav-in .rail { animation: ink-write 1.6s cubic-bezier(.5, 0, .2, 1) .5s both; }
.nav-in .rail--r { animation-delay: .7s; }
.nav-in .tag { animation: nav-item 1s cubic-bezier(.2, .7, .2, 1) 1.1s both; }
.nav-in .tag--r { animation-delay: 1.25s; }
@keyframes ink-write { from { opacity: 1; clip-path: inset(0 0 100% 0) } to { opacity: 1; clip-path: inset(0 0 0 0) } }

/* estandartes fora do quadro: troca para os trilhos */
@media (max-aspect-ratio: 4/3) {
  .banner, .tags .tag { display: none; }
  .rails { display: block; }
}

/* ==========================================================
   BOTÃO "AGENDAR SESSÃO" — só no hero (decisão do Victor, 2026-10-13)
   Posição absoluta na página: rola junto com o hero e não acompanha o visitante.
   No HTML ele fica no topo do <main>, fora do .hero, só por empilhamento: o .hero tem
   container-type (vira contexto de empilhamento) e o botão precisa ficar ACIMA da navbar
   fixa (z 20), senão o degradê escuro dela o escurece.
   Desktop: canto superior direito, sobre a vaga que a navbar reserva (.nav__vaga).
   ========================================================== */
.cta {
  position: absolute; z-index: 30; display: block;
  right: clamp(16px, 4vw, 56px);           /* = padding lateral da navbar */
  /* mesma altura em que ele ficava centralizado na navbar (conta da vaga: max(62, alt − 36)) */
  top: calc(env(safe-area-inset-top, 0px) + max(-4px, 45px - var(--cta-alt) / 2));
  height: var(--cta-alt);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}
.cta img { height: 100%; width: auto; }
.cta::before { /* brasa respirando atrás da placa */
  content: ""; position: absolute; left: 12%; right: 16%; top: 30%; bottom: 26%; z-index: -1;
  background: radial-gradient(ellipse, rgba(224, 38, 43, .55), transparent 70%);
  filter: blur(10px);
  animation: cta-breath 3.6s ease-in-out infinite;
}
@keyframes cta-breath { 0%,100% { opacity: .35 } 50% { opacity: .9 } }
.cta:hover, .cta:focus-visible {
  transform: translateY(-2px) scale(1.035);
  filter: drop-shadow(0 0 16px rgba(224, 38, 43, .6)) brightness(1.12);
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { outline-offset: 0; }
/* entra junto com a navbar (keyframes nav-item no nav.css) */
.js-intro .cta { opacity: 0; }
.nav-in .cta { animation: nav-item .8s cubic-bezier(.2, .7, .2, 1) calc(.25s + var(--i, 0) * .08s) both; }

@media (max-width: 960px) {
  /* celular: centralizado na base da PRIMEIRA tela (100svh), como antes, mas não fica
     preso à tela ao rolar. A cena sobe (--lift) para ele assentar. */
  .cta {
    left: 50%; right: auto; translate: -50% 0;
    /* altura real da arte (1100×395); o --cta-h arredonda para 2.79 */
    top: calc(100vh - var(--cta-w) * 395 / 1100 - 4px - env(safe-area-inset-bottom, 0px));
    top: calc(100svh - var(--cta-w) * 395 / 1100 - 4px - env(safe-area-inset-bottom, 0px));
    width: var(--cta-w); height: auto;
  }
  .cta img { width: 100%; height: auto; }
  .nav-in .cta { animation: cta-rise 1s cubic-bezier(.2, .8, .2, 1) .9s both; }
  @keyframes cta-rise { from { opacity: 0; transform: translateY(70%) } to { opacity: 1; transform: none } }
  .cta:hover, .cta:focus-visible { transform: scale(1.02); }
}

/* ==========================================================
   MOBILE — a cena sobe para o botão assentar na base da primeira tela
   ========================================================== */
@media (max-width: 960px) {
  .hero { --lift: min(calc(var(--cta-h) * .5), 72px); --rail-bottom: calc(var(--cta-h) + 16px + env(safe-area-inset-bottom, 0px)); }
  .stage {
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 97%);
            mask-image: linear-gradient(to bottom, #000 80%, transparent 97%);
  }
  .scroll-cue { display: none; }
  .tag { bottom: calc(var(--cta-h) * .42 + env(safe-area-inset-bottom, 0px)); font-size: 10px; letter-spacing: .2em; gap: 8px; }
  .tag .seal { width: 24px; height: 24px; font-size: 14px; }
}

/* ==========================================================
   TELAS VERTICAIS / MOBILE
   (stage faz cover pela altura; dragão e samurai reescalam)
   ========================================================== */
@media (max-aspect-ratio: 5/4) { .stage { --dw: 50; --dt: 9; --sh: 27; } }
@media (max-aspect-ratio: 3/4) { .stage { --dw: 44; --dt: 10; --sh: 25; --sb: 87; --zoom: 2.6; } }

/* ==========================================================
   MOVIMENTO REDUZIDO — mostra a cena final, sem animação
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .dragon__reveal { -webkit-mask-image: none !important; mask-image: none !important; }
  .eye__iris { opacity: .5; }
  .js-intro .banner, .js-intro .rail, .js-intro .tag, .js-intro .cta { opacity: 1; }
  .particles { display: none; }
}