/* ==========================================================
   Nazateen — hero: pôster de ingresso revelado em 3D.
   Estados iniciais (opacity 0) só valem com .js e sem
   prefers-reduced-motion; a animação fica em js/modules/hero.js.
   ========================================================== */

.hero{
  position:relative; display:flex; justify-content:center;
  padding:28px 40px; overflow:hidden;
  background:var(--bg-deep); perspective:1400px;
  border-bottom:1px solid var(--line);
}
.hero-frame{
  position:relative; width:100%; max-width:1400px;
  min-height:clamp(600px, calc(100svh - 120px), 880px);
  display:flex; flex-direction:column;
  border:1px solid rgba(238,242,230,.22); border-radius:4px; overflow:hidden;
  transform-style:preserve-3d; will-change:transform;
  background:
    radial-gradient(120% 90% at 22% 100%, rgba(212,255,61,.16) 0%, transparent 55%),
    linear-gradient(180deg, #17190f 0%, #0c0d08 65%, #080905 100%);
}
.hero-photo{
  position:absolute; inset:-40px 0; will-change:transform; opacity:.7;
  background:
    radial-gradient(circle at 30% 78%, rgba(212,255,61,.22) 0%, transparent 45%),
    radial-gradient(circle at 82% 18%, rgba(212,255,61,.08) 0%, transparent 35%),
    repeating-linear-gradient(100deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px);
}
.hero-grain{ z-index:1; opacity:.16; }
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 90% 75% at 50% 45%, transparent 45%, rgba(2,3,1,.82) 100%);
}

/* moldura de ingresso: 4 faixas com texto correndo */
.hero-ticker{
  position:absolute; z-index:4; overflow:hidden; display:flex; align-items:center;
  background:rgba(9,11,6,.9); will-change:transform, opacity;
}
.hero-ticker--top, .hero-ticker--bottom{ left:0; right:0; height:30px; }
.hero-ticker--top{ top:0; border-bottom:1px solid var(--line-paper); }
.hero-ticker--bottom{ bottom:0; border-top:1px solid var(--line-paper); }
.hero-ticker--left, .hero-ticker--right{ top:30px; bottom:30px; width:26px; justify-content:center; }
.hero-ticker--left{ left:0; border-right:1px solid var(--line-paper); }
.hero-ticker--right{ right:0; border-left:1px solid var(--line-paper); }
.ticker-track{
  display:flex; align-items:center; gap:22px; white-space:nowrap; width:max-content;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);
}
.hero-ticker--top .ticker-track{ animation:tickerX 40s linear infinite; }
.hero-ticker--bottom .ticker-track{ animation:tickerX 40s linear infinite reverse; }
.hero-ticker--left .ticker-track, .hero-ticker--right .ticker-track{ writing-mode:vertical-rl; height:max-content; }
.hero-ticker--left .ticker-track{ animation:tickerY 40s linear infinite; }
.hero-ticker--right .ticker-track{ animation:tickerY 40s linear infinite reverse; }
.ticker-track b{ color:var(--accent-soft); font-weight:600; }
.ticker-track svg{ width:9px; height:9px; flex:none; opacity:.6; }
@keyframes tickerX{ to{ transform:translateX(-50%); } }
@keyframes tickerY{ to{ transform:translateY(-50%); } }

.hero-inner{
  position:relative; z-index:2; flex:1;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:76px 56px 72px; transform-style:preserve-3d;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
}
.hero-tag svg{ width:22px; height:22px; stroke:var(--accent-soft); }
.hero-bolt{ position:absolute; top:48px; right:40px; z-index:3; width:34px; height:34px; stroke:var(--accent-soft); }

.hero-word{ position:relative; z-index:2; width:100%; perspective:900px; }
.hero-word h1{
  font-size:clamp(52px, 12vw, 168px); line-height:.86; letter-spacing:-.01em; color:var(--accent);
  /* extrusão: camadas de sombra empilham "espessura" atrás da letra, tipo letreiro 3D */
  text-shadow:
    .01em .01em 0 #a9cf2c, .02em .02em 0 #9dc228, .03em .03em 0 #8fae1f, .04em .04em 0 #7f9c1c,
    .05em .05em 0 #6f8a17, .06em .06em 0 #5f7813, .07em .07em 0 #4f660f, .08em .08em 0 #3f540b,
    .09em .09em 0 #2f4207, .1em .1em .22em rgba(0,0,0,.65);
}
.hero-letters{ display:flex; justify-content:center; transform-style:preserve-3d; transition:transform .25s ease-out; will-change:transform; }
.hero-letters .lt{ display:inline-block; transform-style:preserve-3d; will-change:transform, opacity; }

.hero-tag2{
  position:relative; z-index:3; display:inline-block; margin-top:6px;
  font-family:var(--font-marker); font-size:clamp(26px, 4.4vw, 52px); color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.5); transform:rotate(-6deg);
}
.hero-sub{ position:relative; z-index:2; max-width:44ch; margin:22px auto 0; font-size:15px; color:var(--text-dim); }
.hero-meta{ position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:6px 12px; margin-top:16px; }
.hero-meta span{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.hero-meta b{ color:var(--accent-soft); font-weight:600; }
.hero-meta .hero-meta-sep{ color:var(--accent-dim); }

.hero-actions{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:20px; margin-top:26px; }
.hero-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }

/* contagem regressiva em "casas" de ingresso */
.countdown{ display:inline-flex; align-items:stretch; gap:6px; }
.countdown-item{
  display:flex; flex-direction:column; align-items:center; min-width:58px; padding:9px 6px 7px;
  border:1px solid var(--line-paper); border-radius:6px; background:rgba(9,11,6,.72);
}
.countdown-num{ font-family:var(--font-display); font-size:30px; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.countdown-num.pop{ animation:numPop .35s ease; }
@keyframes numPop{ 40%{ transform:scale(1.2); color:var(--accent-soft); } }
.countdown-label{ margin-top:5px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.countdown-sep{ align-self:center; font-family:var(--font-display); font-size:20px; color:var(--text-faint); }

.hero-stamp{ position:absolute; z-index:3; left:40px; bottom:46px; display:flex; align-items:center; gap:10px; }
.hero-stamp svg{ width:30px; height:30px; stroke:var(--accent-soft); flex:none; }

/* ---------- computador: o hero inteiro cabe na tela ----------
   o tamanho acompanha também a ALTURA da tela (vh): em notebook/tela baixa o
   NAZATEEN, a frase e os espaços encolhem; a moldura ocupa exatamente a tela
   abaixo do menu (60px) */
@media (min-width:641px){
  .hero{ padding:16px 40px; }
  .hero-frame{ min-height:calc(100svh - 62px - 32px); } /* 62 = menu + as duas bordas de 1px */
  .hero-inner{ padding:clamp(40px, 7vh, 76px) 56px; }
  .hero-tag{ margin-bottom:clamp(8px, 1.8vh, 18px); }
  .hero-word h1{ font-size:clamp(52px, min(12vw, 16vh), 168px); }
  .hero-tag2{ font-size:clamp(24px, min(4.4vw, 6vh), 52px); }
  .hero-sub{ margin-top:clamp(10px, 2.2vh, 22px); }
  .hero-meta{ margin-top:clamp(8px, 1.6vh, 16px); }
  .hero-actions{ margin-top:clamp(14px, 2.6vh, 26px); gap:clamp(12px, 2vh, 20px); }
  .countdown-num{ font-size:clamp(22px, 3.6vh, 30px); }
  .countdown-item{ padding:clamp(5px, 1vh, 9px) 6px clamp(4px, .8vh, 7px); }
}

/* ---------- estados iniciais da animação de entrada ----------
   o NAZATEEN fica visível desde o começo (só "assenta"); o resto aparece em ~1s */
@media (prefers-reduced-motion:no-preference){
  .js .hero [data-hero], .js .hero [data-ticker]{ opacity:0; }
}

@media (max-width:760px){
  .hero-stamp{ display:none; }
}
@media (max-width:640px){
  .hero{ padding:12px; }
  .hero-frame{ min-height:calc(100svh - 130px); }
  .hero-ticker--left, .hero-ticker--right{ display:none; }
  .hero-inner{ padding:60px 18px 62px; }
  .hero-bolt{ top:42px; right:18px; width:26px; height:26px; }
  .countdown-item{ min-width:50px; padding:8px 4px 6px; }
  .countdown-num{ font-size:24px; }
  .countdown-sep{ font-size:16px; }
  .hero-buttons .btn{ flex:1 1 100%; }
  /* NAZATEEN ocupando a largura do celular */
  .hero-word h1{ font-size:clamp(52px, 19vw, 96px); }
  /* informações em duas linhas, sem o traço solto */
  .hero-meta{ flex-direction:column; align-items:center; }
  .hero-meta .hero-meta-sep{ display:none; }
}