/* Exclusivo da home: herói com vídeo de fundo e seção de estreia. */

.hero{position:relative;padding:150px 0 90px;overflow:hidden;isolation:isolate}

/* --- camadas do vídeo de fundo --- */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;
  transform:translate(-50%,-50%);object-fit:cover;
  filter:saturate(.45) contrast(1.06) brightness(.62);
  opacity:0;transition:opacity 1.2s var(--ease)}
.hero-bg.ready video{opacity:var(--vop,.5)}
/* tinge o vídeo com a paleta do site */
.hero-tone{position:absolute;inset:0;mix-blend-mode:color;opacity:.72;
  background:linear-gradient(158deg,#2E2158 0%,#171123 52%,#3A2A10 100%)}
/* escurece o topo e funde o fim da seção com a página */
.hero-veil{position:absolute;inset:0;
  background:radial-gradient(1000px 600px at 50% 8%,rgba(212,166,60,.14),transparent 62%),
             linear-gradient(180deg,rgba(18,14,28,.86) 0%,rgba(18,14,28,.58) 34%,rgba(18,14,28,.90) 82%,var(--stone-900) 100%)}
#embers{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero .shell{z-index:3}

/* botão de pausa do vídeo */
.vtoggle{position:absolute;right:26px;bottom:24px;z-index:4;width:40px;height:40px;cursor:pointer;
  border:1px solid var(--edge);background:rgba(18,14,28,.6);backdrop-filter:blur(4px);color:var(--muted);
  display:none;place-items:center;transition:.25s var(--ease)}
.vtoggle.show{display:grid}
.vtoggle:hover{border-color:var(--gold);color:var(--gold)}
.vtoggle b{display:block;width:9px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.vtoggle.paused b{width:0;height:0;border:0;border-left:11px solid currentColor;border-block:7px solid transparent;margin-left:3px}

.hero-head{text-align:center;max-width:760px;margin:0 auto 58px}
.wordmark{font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,10.5vw,7.6rem);line-height:.9;letter-spacing:.06em;
  background:linear-gradient(178deg,#FBEEC0 6%,var(--gold) 42%,#7A5A18 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 26px rgba(212,166,60,.28))}
.kicker{font-size:.78rem;letter-spacing:.42em;color:var(--muted);margin-bottom:22px;font-weight:500}
.lede{color:var(--muted);font-size:1.05rem;max-width:54ch;margin:20px auto 0}
.lede b{color:var(--parchment);font-weight:500}

/* --- grande estreia --- */
.launch{position:relative;border:1px solid var(--edge);background:linear-gradient(160deg,var(--stone-800),var(--stone-900) 62%);
  padding:56px 44px;overflow:hidden;margin-bottom:26px}
.launch::before{content:'';position:absolute;inset:-40% -10% auto;height:70%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 26%,transparent),transparent);pointer-events:none}
.launch::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);animation:sweep 5.5s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.launch-top{position:relative;display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--c);color:var(--c);padding:7px 15px;
  font-size:.68rem;letter-spacing:.24em;font-weight:600}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);animation:beat 1.8s infinite}
.launch h2{position:relative;font-size:clamp(2.1rem,5.6vw,3.8rem);margin:16px 0 10px}
.launch p.sub{position:relative;color:var(--muted);max-width:58ch}
.dials{position:relative;display:flex;gap:14px;flex-wrap:wrap;margin:38px 0 34px}
.dial{flex:1;min-width:104px;border:1px solid var(--edge);background:rgba(10,7,18,.55);padding:20px 12px;text-align:center}
.dial b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,5.6vw,3.1rem);line-height:1;
  color:var(--parchment);font-variant-numeric:tabular-nums}
.dial span{display:block;font-size:.64rem;letter-spacing:.24em;color:var(--muted);margin-top:9px}
.dial.tickk b{animation:tickk .5s var(--ease)}
@keyframes tickk{0%{transform:scale(1.14);color:var(--c)}100%{transform:scale(1);color:var(--parchment)}}
.live{position:relative;font-family:var(--display);font-size:clamp(2rem,6vw,3.4rem);color:var(--life);letter-spacing:.08em;animation:beat 1.6s infinite}
.phases{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge-soft);
  border:1px solid var(--edge-soft);margin-top:34px}
.ph{background:rgba(13,9,22,.8);padding:20px 18px}
.ph b{display:block;font-family:var(--display);font-size:.95rem;color:var(--muted)}
.ph span{display:block;font-size:.72rem;letter-spacing:.12em;color:var(--muted);margin-top:6px}
.ph em{font-style:normal;display:block;font-size:.64rem;letter-spacing:.24em;color:var(--gold);margin-bottom:9px}
.ph.done b{color:var(--parchment)}
.ph.done span{color:var(--life)}
.ph.now b,.ph.now span{color:var(--c)}

.opens{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.open{border:1px solid var(--edge-soft);background:linear-gradient(180deg,var(--stone-850),var(--stone-900));
  padding:26px 24px;position:relative;overflow:hidden}
.open::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--oc)}
.open h3{font-size:1.28rem}
.open .when{font-family:var(--display);font-size:1.05rem;color:var(--oc);margin:8px 0 4px}
.open .note{font-size:.85rem;color:var(--muted);min-height:48px}
.open .mini{margin:18px 0 20px}
.open .bar i{background:linear-gradient(90deg,color-mix(in srgb,var(--oc) 45%,transparent),var(--oc))}
.open a{display:block;text-align:center;padding:12px;border:1px solid color-mix(in srgb,var(--oc) 45%,transparent);
  background:color-mix(in srgb,var(--oc) 12%,transparent);font-family:var(--display);font-size:.78rem;letter-spacing:.13em;transition:.25s}
.open a:hover{background:var(--oc);border-color:var(--oc);color:#fff}

@media (max-width:960px){
  .hero{padding:120px 0 66px}
  .launch{padding:36px 24px}
  .opens,.phases{grid-template-columns:1fr}
  .vtoggle{right:18px;bottom:16px}
}
/* em telas pequenas o vídeo custa banda e bateria: some e ficam os gradientes */
@media (max-width:640px){ .hero-bg video{display:none} }
@media (prefers-reduced-motion:reduce){ .hero-bg video{display:none} }