/* OUTRUN · abertura. Antes do toque: só o logo e o botão. Depois do toque:
   as letras se enchem com o pôr do sol, o logo voa até a tela e a gente atravessa as letras para dentro do site.
   Linha do tempo da saída (s): 0 seta dispara · .1 letras viram foto · .45 voo pelas letras · 1.3 a noite se abre · 2.1 site */

html.com-abertura body{overflow:hidden}
/* tela preta imediata, antes do JS montar (evita piscar o site) */
html.com-abertura body::before{content:"";position:fixed;inset:0;z-index:199;background:var(--preto)}

.ab{position:fixed;inset:0;z-index:200;--logo-w:min(74vw,560px);--logo-h:calc(var(--logo-w) * 635 / 1200)}
.ab-noite{position:absolute;inset:0;background:var(--preto)}

/* o logo, centralizado na tela */
.ab-logo{position:absolute;left:50%;top:50%;width:var(--logo-w);transform:translate(-50%,-50%);color:var(--off);
  opacity:0;filter:blur(14px);animation:abLogo 1.8s .25s cubic-bezier(.16,1,.3,1) forwards}

/* o portal: a foto do pôr do sol recortada no formato do logo, na mesma caixa dele */
.ab-portal{position:absolute;left:50%;top:50%;width:var(--logo-w);aspect-ratio:1200/635;transform:translate(-50%,-50%);opacity:0;
  background:url(../assets/img/heroi.jpg) 50% 45%/cover no-repeat,var(--laranja);
  -webkit-mask:url(../assets/logo/logo-outrun-preto.png) center/100% 100% no-repeat;
          mask:url(../assets/logo/logo-outrun-preto.png) center/100% 100% no-repeat;
  will-change:transform,opacity}

/* o botão: seta para cima num círculo, com um anel que respira */
.ab-abrir{position:absolute;left:50%;top:calc(50% + var(--logo-h) / 2 + clamp(2.2rem,7vh,4rem));transform:translateX(-50%);
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--off);
  border:1px solid rgba(244,241,236,.4);background:rgba(244,241,236,.04);
  opacity:0;animation:abBotao 1s 1.5s cubic-bezier(.16,1,.3,1) forwards;
  transition:background .4s,border-color .4s,color .4s}
.ab-abrir::before{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(244,241,236,.5);opacity:0;animation:abAnel 2.8s 2.6s cubic-bezier(.2,.6,.3,1) infinite}
.ab-abrir svg{width:24px;height:24px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ab-abrir:hover{background:var(--off);color:var(--preto);border-color:var(--off)}
.ab-abrir:hover svg{transform:translateY(-3px)}
.ab-abrir:focus-visible{outline:2px solid var(--laranja);outline-offset:6px}

/* ---------- depois do toque ---------- */
.ab.saindo .ab-abrir{animation:abBotaoSai .5s cubic-bezier(.5,0,.75,0) forwards}
.ab.saindo .ab-abrir::before{animation:abOnda .9s cubic-bezier(.16,1,.3,1) forwards}
.ab.saindo .ab-abrir svg{animation:abSeta .45s cubic-bezier(.5,0,.75,0) forwards}
/* as letras brancas dão lugar à foto dentro delas */
.ab.saindo .ab-logo{animation:abLogoSai .5s .1s ease forwards}
.ab.saindo .ab-portal{animation:abPortal 2s .1s forwards}
/* a noite em volta das letras se abre e mostra o site por trás */
.ab.saindo .ab-noite{animation:abNoite .8s 1.25s cubic-bezier(.4,0,.2,1) forwards}

@keyframes abLogo{to{opacity:1;filter:none}}
@keyframes abBotao{to{opacity:1}}
@keyframes abAnel{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes abBotaoSai{to{opacity:0;transform:translateX(-50%) scale(.6)}}
@keyframes abOnda{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(4)}}
@keyframes abSeta{to{transform:translateY(-70px);opacity:0}}
@keyframes abLogoSai{to{opacity:0}}
/* o voo: o recorte do logo cresce acelerando até as letras passarem da tela */
@keyframes abPortal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(1)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.02);animation-timing-function:cubic-bezier(.7,0,.84,0)}
  80%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(38)}
}
@keyframes abNoite{to{opacity:0}}

/* o herói entra assim que a cortina some */
body.revelando .heroi-conteudo>*{animation:heroiEntra 1.1s cubic-bezier(.16,1,.3,1) both}
body.revelando .heroi-conteudo>*:nth-child(2){animation-delay:.08s}
body.revelando .heroi-conteudo>*:nth-child(3){animation-delay:.16s}
body.revelando .heroi-conteudo>*:nth-child(4){animation-delay:.24s}
body.revelando .heroi-relogio{animation:heroiEntra 1.1s .3s cubic-bezier(.16,1,.3,1) both}
body.revelando #inicio{animation:heroiZoom 2.4s cubic-bezier(.16,1,.3,1) both}
@keyframes heroiEntra{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroiZoom{from{background-size:auto,118%,auto,auto}to{background-size:auto,cover,auto,auto}}

@media (max-width:600px){.ab{--logo-w:84vw}}

/* ---- botão de som que fica no topo depois da abertura ---- */
.som{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--off);
  border:1px solid rgba(244,241,236,.3);background:rgba(11,11,13,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s cubic-bezier(.16,1,.3,1),background .3s}
.som.visivel{opacity:1;transform:none}
.som:hover{background:rgba(11,11,13,.85)}
.som-ondas{display:flex;align-items:center;gap:3px;height:16px}
.som-ondas i{display:block;width:2px;height:100%;background:currentColor;border-radius:2px;animation:somOnda 1.1s ease-in-out infinite}
.som-ondas i:nth-child(2){animation-delay:-.35s}.som-ondas i:nth-child(3){animation-delay:-.7s}.som-ondas i:nth-child(4){animation-delay:-.2s}
.som.mudo .som-ondas i{animation:none;transform:scaleY(.25)}
@keyframes somOnda{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
/* no celular o botão de pré-inscrição do topo some; o de som fica antes do menu */
@media (max-width:900px){.topo .som{margin-left:auto}.topo .som+.btn-topo+.menu-btn{margin-left:.4rem}}