/* =========================================================================
   AKROS — A CORTINA: o hero recua e a seção 2 sobe por cima.   (v2, 01/10)

   Por que existe: a v1 amarrava a animação à rolagem com JavaScript, e cada
   quadro escrevia `--p` no <html>. Variável personalizada herda: o Chrome
   recalculava o estilo da PÁGINA INTEIRA a cada passo da roda — medido,
   ~47 ms por passo (o orçamento de um quadro é 16 ms) — e ainda desfocava o
   hero em tela cheia. Era o «trava».

   Agora a animação é CSS puro, ligada à rolagem (`animation-timeline`):
   só transform e opacity, que o navegador resolve na thread do compositor,
   sem passar pelo JavaScript e sem recalcular estilo. Onde o navegador não
   tem isso (Firefox, Safari antigo), `js/curtain.js` faz o mesmo por
   rAF, escrevendo só nos 4 elementos da cena, nunca no <html>.

   O desenho também mudou:
   · a pista caiu de 280svh para 200svh. Antes, os primeiros 80svh de
     rolagem não mostravam nada (hero parado, só borrando) — a sensação de
     «travado». Agora a seção começa a subir no primeiro pixel;
   · sem desfoque e sem encolher o hero (encolher abria uma faixa cinza nas
     bordas). Ele sobe devagar, cresce 4% e escurece sob um véu azul-noite:
     a seção branca ganha profundidade em vez de um fundo lavado;
   · a sombra de cima virou um elemento próprio, com opacidade animada (box-
     shadow animada repinta a seção inteira a cada quadro).
   07/10: quem sobe é a seção marcada `.cortina__sobe` — hoje as PERDAS (a dor
   logo depois da hero, pedido do dono). Até ali era o #pipeline, preso por
   id; a costura e a alça vieram de pipeline.css com nome próprio.
   ========================================================================= */

/* ---- parado: vale em qualquer navegador e em qualquer largura ---- */
.cortina__sombra{
  position:absolute;left:0;right:0;top:0;height:clamp(64px,11vh,120px);
  transform:translate3d(0,-100%,0);pointer-events:none;opacity:0;
  background:linear-gradient(0deg,rgba(12,34,58,.32) 0%,rgba(12,34,58,.12) 42%,rgba(12,34,58,0) 100%);
}
/* a seção que sobe: acima da hero, encolhida a partir da base */
.cortina__sobe{position:relative;z-index:5;transform-origin:50% 100%}
/* costura luminosa no topo da cortina (veio de pipeline.css) */
.cortina__seam{
  position:absolute;left:5%;right:5%;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 16%,rgba(10,128,226,.85) 50%,rgba(255,255,255,.95) 84%,transparent);
  opacity:calc(1 - var(--p,1));
}
.cortina__seam::after{
  content:"";position:absolute;left:12%;right:12%;top:-1px;height:60px;
  background:radial-gradient(60% 100% at 50% 0%, rgba(120,190,255,.55), rgba(120,190,255,0) 72%);
  filter:blur(10px);
}
.cortina__grip{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:54px;height:4px;border-radius:calc(4px * var(--r));background:rgba(10,31,69,.14);
  opacity:calc(1 - var(--p,1));pointer-events:none;
}

@media (max-width:1180px),(prefers-reduced-motion:reduce){
  .cortina__seam,.cortina__grip{display:none}
}
.cortina__veu{
  position:sticky;top:0;display:none;height:100svh;margin-top:-100svh;
  pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(130% 100% at 50% 0%,rgba(10,31,69,.50),rgba(7,20,46,.84));
}

/* o hero recuou: as animações de ambiente dele (rede, cartões) pausam.
   Só os DESCENDENTES — a própria cortina do #hero tem de continuar andando. */
#hero.is-recuado *,
#hero.is-recuado *::before,
#hero.is-recuado *::after{animation-play-state:paused!important}

/* ---- com cortina: tela larga e movimento permitido ---- */
@media (min-width:1181px) and (prefers-reduced-motion:no-preference){
  /* a seção 2 já entra por margin-top:-100svh: com a cena em 200svh o topo
     dela encosta na base da tela em scrollY=0 e sobe junto com a roda */
  #scene.scene--curtain{height:200svh}
  /* o hero cresce 4,5%: sem isto o excesso vira rolagem horizontal (1571 > 1536).
     `clip` não cria contêiner de rolagem, então o sticky do hero continua valendo */
  #scene{overflow-x:clip}
  /* a seção 2 entra por baixo da cena e sobe junto com a roda */
  .cortina__sobe{margin-top:-100svh;will-change:transform}
  .cortina__veu{display:block}

  @supports (animation-timeline:view()){
    :root{timeline-scope:--cortina}
    /* 0% = o topo da cena toca o topo da tela; 100% = a base da cena toca a
       base da tela (cena mais alta que a tela: é exatamente `contain`) */
    #scene{view-timeline:--cortina block}

    #hero{
      animation:cortina-hero cubic-bezier(.22,.61,.36,1) both;
      animation-timeline:--cortina;animation-range:contain 0% contain 100%;
    }
    .cortina__veu{
      animation:cortina-veu cubic-bezier(.3,.1,.55,1) both;
      animation-timeline:--cortina;animation-range:contain 0% contain 100%;
    }
    .cortina__sobe{
      animation:cortina-secao cubic-bezier(.45,.05,.35,1) both;
      animation-timeline:--cortina;animation-range:contain 0% contain 100%;
    }
    .cortina__sobe .cortina__sombra,
    .cortina__sobe .cortina__seam,
    .cortina__sobe .cortina__grip{
      animation:cortina-borda linear both;
      animation-timeline:--cortina;animation-range:contain 0% contain 100%;
    }
  }
}

@keyframes cortina-hero{
  from{transform:translate3d(0,0,0) scale(1);visibility:visible}
  to{transform:translate3d(0,-7vh,0) scale(1.045);visibility:hidden}
}
@keyframes cortina-veu{
  from{opacity:0}
  to{opacity:1}
}
@keyframes cortina-secao{
  from{transform:translate3d(0,4.5vh,0) scale(.976)}
  to{transform:translate3d(0,0,0) scale(1)}
}
@keyframes cortina-borda{
  from{opacity:1}
  to{opacity:0}
}