/* ============================================================
   MÍDIAS RR — Avenida 3D
   O scroll é o volante. A comunicação mora dentro dos outdoors.
   Luz de sódio (laranja) contra vapor de mercúrio (azul frio).
   ============================================================ */
:root{
  --ink:#0D0D0D; --ink-2:#17181B; --ink-3:#212328;
  --signal:#F0A31E; --mercury:#F7F4ED; --paper:#F7F4ED; --mute:#B8B0A2;
  --line:rgba(247,244,237,.18);
  --font-d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-b:"Barlow","Helvetica Neue",Arial,sans-serif;
  --font-c:"Barlow Condensed","Barlow",Arial,sans-serif;
  color-scheme:dark;
  /* faixas que o menu (topo) e o HUD (base) ocupam sobre a cena */
  --livre-topo:88px; --livre-base:76px;
}

/* ---------- palco ---------- */
#track{position:relative;height:220vh}
@media (max-width:820px){#track{height:200vh}}
#stage{position:sticky;top:0;height:100svh;width:100%;overflow:hidden;background:var(--ink)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-video[hidden]{display:none}

.grade{position:absolute;inset:0;pointer-events:none}
.vignette{background:radial-gradient(126% 84% at 50% 48%,transparent 40%,rgba(2,3,6,.5) 80%,rgba(2,3,6,.92) 100%);
  mix-blend-mode:multiply}
.grain{opacity:.055;mix-blend-mode:overlay;background-image:var(--grain);background-size:180px 180px}
/* pulso de passagem: o clarão curto quando um painel passa raspando */
#pulse{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 90% at var(--px,50%) 52%,rgba(255,196,77,.52) 0%,rgba(240,163,30,.20) 42%,transparent 72%)}

/* ---------- HUD mínimo ---------- */
.hud{position:absolute;z-index:5;pointer-events:none}
/* Centraliza dentro da FAIXA LIVRE, não da tela inteira: o menu ocupa o topo
   e o HUD (medidor + "scroll") ocupa a base. Com top:50%+translateY(-50%) o
   bloco vazava por baixo dos dois em telas baixas (notebook 1280x620). */
.hero-intro{
  left:clamp(20px,6vw,86px);right:clamp(20px,6vw,86px);
  top:var(--livre-topo);bottom:var(--livre-base);
  width:auto;max-width:min(680px,calc(100vw - 40px));
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  color:var(--paper);pointer-events:auto;transition:opacity .3s ease,transform .3s ease}
.hero-intro__tag{display:inline-block;margin-bottom:14px;color:var(--signal);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.hero-intro h1{max-width:12ch;font-family:var(--font-d);font-size:clamp(2.35rem,6.4vw,5.7rem);line-height:.92;text-transform:uppercase;text-wrap:balance}
.hero-intro h1 em{display:block;color:var(--signal);font-style:normal}
.hero-intro p{margin-top:20px;max-width:52ch;color:#D0CBC2;font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.55}
.hero-intro small{display:block;margin-top:12px;color:#AAA398;font-size:.78rem}
.hero-intro__acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}
.hero-intro[data-align="centro"]{margin-inline:auto;align-items:center;text-align:center}
.hero-intro[data-align="centro"] h1,.hero-intro[data-align="centro"] p{margin-inline:auto}
.hero-intro[data-align="centro"] .hero-intro__acoes{justify-content:center}
.hero-intro .btn{border:0;padding:14px 22px;background:var(--signal);color:#0D0D0D;text-decoration:none;font-weight:700}
.hero-intro .btn.ghost{background:rgba(13,13,13,.55);color:var(--paper);box-shadow:inset 0 0 0 1px rgba(247,244,237,.4);backdrop-filter:blur(8px)}
@media(max-width:520px){.hero-intro small{max-width:34ch}.hero-intro__acoes .btn{font-size:.78rem;padding:12px 15px}}
/* pouca altura: encolhe na ordem do que é menos essencial, para nada ser cortado */
@media(max-height:700px){
  .hero-intro h1{font-size:clamp(1.9rem,4.4vw,3.4rem)}
  .hero-intro p{margin-top:14px;font-size:.95rem}
  .hero-intro__acoes{margin-top:18px}
  .hero-intro__tag{margin-bottom:9px}
}
@media(max-height:600px){
  .hero-intro h1{font-size:clamp(1.7rem,3.8vw,2.6rem)}
  .hero-intro p{display:none}
  .hero-intro small{margin-top:8px}
  :root{--livre-topo:78px;--livre-base:66px}
}
#brand{top:clamp(18px,3.4vw,34px);left:clamp(20px,5vw,60px);display:flex;align-items:center;gap:12px}
#brand .mark{font-family:var(--font-d);font-weight:900;font-stretch:125%;font-size:1.05rem;letter-spacing:-.02em}
#brand .mark em{font-style:normal;color:var(--signal)}
#brand .tag{font-family:var(--font-c);text-transform:uppercase;letter-spacing:.2em;font-size:.62rem;
  color:var(--mute);padding-left:12px;border-left:1px solid var(--line)}

#meter{
  bottom:clamp(18px,3.2vw,34px);left:clamp(20px,5vw,60px);
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-c);text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;color:var(--mute);
}
#meter .n{color:var(--paper);font-variant-numeric:tabular-nums}
#meter .ticks{display:flex;align-items:center;gap:5px}
#meter .ticks i{display:block;width:16px;height:2px;background:rgba(159,182,217,.22);transition:background .5s,width .5s}
#meter .ticks i.on{background:var(--signal)}
#meter .ticks i.cur{width:26px;background:var(--paper)}
@media (max-width:520px){#meter .ticks i{width:10px}}

#scrollHint{
  bottom:clamp(18px,3.2vw,34px);left:50%;transform:translateX(-50%);
  font-family:var(--font-c);text-transform:uppercase;letter-spacing:.28em;font-size:.62rem;color:var(--mute);
  transition:opacity .6s;
}
#scrollHint b{display:block;text-align:center;font-weight:500;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}

#sound{
  bottom:clamp(18px,3vw,30px);right:clamp(18px,3vw,34px);pointer-events:auto;
  width:44px;height:44px;border-radius:50%;background:rgba(10,14,21,.6);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--mercury);cursor:pointer;font-size:15px;
  display:grid;place-items:center;transition:color .3s,box-shadow .3s;border:0}
#sound[aria-pressed="true"]{color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}

/* CTA só no fim, e nunca por cima do painel */
#endCta{
  left:clamp(20px,5vw,60px);bottom:clamp(74px,11vh,120px);
  display:flex;flex-wrap:wrap;gap:12px;opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.25,1);
}
#endCta.on{opacity:1;pointer-events:auto;transform:none}
#endCta .btn{appearance:none;border:0;cursor:pointer;font-family:var(--font-c);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.82rem;padding:15px 26px;background:var(--signal);color:#0D0D0D;
  text-decoration:none;position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.9,.25,1),box-shadow .35s}
#endCta .btn::after{content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:opacity .2s}
#endCta .btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px -14px rgba(240,163,30,.9)}
#endCta .btn:hover::after{opacity:1;animation:sweep .75s ease}
@keyframes sweep{to{transform:translateX(120%)}}
#endCta .btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(247,244,237,.4)}
#endCta .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--signal),0 12px 30px -18px rgba(240,163,30,.55)}

/* ---------- preloader ---------- */
#loader{position:fixed;inset:0;z-index:40;background:var(--ink);display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(22px,5vw,64px);transition:opacity .35s ease,visibility .35s}
#loader.gone{opacity:0;visibility:hidden}
#loader .top{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
#loader .mid{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;text-align:center}
#loader .pct{font-family:var(--font-d);font-weight:900;font-stretch:125%;
  font-size:clamp(5rem,18vw,14rem);line-height:.8;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  color:var(--paper);text-shadow:0 0 60px rgba(240,163,30,.18)}
#loader .bar{height:2px;background:rgba(159,182,217,.16)}
#loader .bar i{display:block;height:100%;width:0%;background:var(--signal)}
#loader .bot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
#enter{display:none}

/* ---------- fallback sem WebGL ---------- */
#fallback{display:none;position:absolute;inset:0;overflow:hidden}
#fallback.on{display:block}
#fallback .sky{position:absolute;inset:0;background:linear-gradient(#070A11 0%,#101720 52%,#22160B 100%)}
#fallback .glow{position:absolute;left:50%;bottom:16%;width:130vw;height:60vh;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(240,163,30,.3),transparent 70%)}
#fallback .sil{position:absolute;left:0;right:0;bottom:0;height:60vh;opacity:.95}
#fallback .road{position:absolute;left:50%;bottom:0;width:150vw;height:36vh;transform:translateX(-50%);
  background:linear-gradient(to top,#0A0D13,#05070C);clip-path:polygon(38% 0,62% 0,54% 100%,46% 100%)}
#fallback .board{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);
  width:min(60vw,700px);aspect-ratio:3/1;background:#0C1119;
  box-shadow:inset 0 0 0 3px rgba(240,163,30,.75),0 0 90px -20px rgba(240,163,30,.6);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 clamp(18px,3vw,40px)}
#fallback .board b{font-family:var(--font-d);font-weight:900;font-stretch:118%;
  font-size:clamp(1.2rem,3.4vw,2.4rem);text-transform:uppercase;line-height:.92}
#fallback .board i{font-style:normal;font-family:var(--font-c);text-transform:uppercase;
  letter-spacing:.2em;font-size:.62rem;color:var(--signal)}

@media (prefers-reduced-motion:reduce){
  #endCta .btn:hover{transform:none}#endCta .btn:hover::after{animation:none;opacity:0}
  #scrollHint b{animation:none}
}