/* =======================================================================
   FABRA V2 — hero da cena + secao do manifesto em video
   Carrega DEPOIS de fabra.css e so acrescenta. Nada aqui redefine a V1:
   as secoes de manifesto, servicos, projetos, clientes e rodape sao as
   mesmas, e continuam vindo de fabra.css.
   ======================================================================= */

/* =======================================================================
   HERO — A CENA
   Video em loop cobrindo o fundo, marca (FABRA.CC) centrada por cima.
   ======================================================================= */
.cena{
  position:relative;
  height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#000;   /* aparece so na fracao de segundo antes do 1o quadro */
}

/* Veu no topo do hero: garante o CTA laranja legivel mesmo nos quadros mais
   claros do video, que muda de brilho o tempo todo (um degrade fixo nao
   daria conta sozinho). */
.cena::before{
  content:"";position:absolute;left:0;right:0;top:0;height:200px;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.72)  0%,
    rgba(0,0,0,.42) 42%,
    rgba(0,0,0,.14) 74%,
    transparent    100%);
}

.cena__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}

.cena__marca{
  position:relative;z-index:2;
  /* Largura fixa em 1150px. O `max-width` e so uma rede de seguranca: sem
     ele a marca ultrapassaria a tela e vazaria por baixo do gutter em
     viewports entre 810px e ~1290px de largura. */
  width:1150px;
  max-width:calc(100% - var(--gutter) * 2);
  height:auto;
  pointer-events:none;
  /* camada propria: o parallax move so esta camada, sem repintar o hero */
  will-change:transform;
}

/* ---------- parallax da marca ----------
   Onde houver scroll-timeline, a animacao roda no compositor e acompanha o
   dedo quadro a quadro. Isso importa no celular: o caminho em JS (fabra-v2.js)
   depende de evento de scroll, que no iOS chega em rajada durante a rolagem
   inercial e ainda leva um salto quando a barra de endereco recolhe -- era o
   tremido que aparecia ao sair do hero. O JS agora so assume quando esta regra
   nao existe, e mesmo assim so no ponteiro fino (mouse). Os 28svh no fim sao
   os mesmos 0.28 de fator do JS, com a rolagem do hero valendo 100svh. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cena__marca{
      animation:marcaParallax linear both;
      animation-timeline:scroll(root block);
      animation-range:0 100svh;
    }
    @keyframes marcaParallax{
      to{transform:translate3d(0,28svh,0)}
    }
  }
}

/* ---------- a seta ----------
   So o traco: e um convite a rolar, nao um botao. Nao e clicavel e nao
   entra na ordem de foco (aria-hidden no HTML). */
.cena__seta{
  position:absolute;left:50%;bottom:var(--sp-50);z-index:2;
  display:block;width:26px;
  color:#fff;
  /* o translateX mora no keyframe: transform e uma propriedade so, e a
     animacao sobrescreveria um translateX declarado aqui */
  animation:setaChama 2.4s var(--ease) infinite;
}
.cena__seta svg{width:100%;height:auto;display:block}
@keyframes setaChama{
  0%,100% {transform:translate(-50%,0)}
  50%     {transform:translate(-50%,10px)}
}
@media (prefers-reduced-motion:reduce){
  .cena__seta{animation:none;transform:translateX(-50%)}
}
@media (max-width:809.98px){
  .cena__seta{width:22px;bottom:var(--sp-30)}
  /* No retrato do celular vmin E a largura da tela, entao os 72vmin sao 72%
     dela -- com os 20px de gutter de cada lado sobrando de respiro. O piso de
     260px segura os telefones estreitos, onde 72% ainda deixaria a marca
     pequena demais pro peso que ela tem na cena. */
  .cena__marca{width:clamp(260px,72vmin,380px)}
}

/* =======================================================================
   MANIFESTO EM VIDEO — a janela abre conforme a pagina rola
   A secao e alta; dentro dela um bloco sticky recebe a animacao. O
   progresso vem do JS como --p (0 a 1) para o CSS nao precisar de
   scroll-timeline, que ainda nao e universal.
   ======================================================================= */
.filme{
  position:relative;
  /* a altura extra E a duracao da animacao */
  height:260svh;
}
.filme__cola{
  position:sticky;top:0;
  height:100svh;
  display:grid;place-items:center;
  overflow:hidden;
}
.filme__janela{
  --p:0;
  position:relative;
  width:calc(100vw - var(--gutter) * 2);
  max-width:var(--container);
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--bg-raised);
  /* fecha em janela pequena e arredondada, abre ate a tela inteira */
  transform:scale(calc(0.46 + 0.54 * var(--p)));
  border-radius:calc(28px * (1 - var(--p)));
  will-change:transform;
}
.filme__janela video,
.filme__janela img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* a marcacao enquanto o video do manifesto nao chega */
.filme__marca{
  position:absolute;inset:0;display:grid;place-items:center;
  background:var(--bg-raised);
  color:var(--text-dim);
}
.filme__play{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(calc(1 / (0.46 + 0.54 * var(--p))));
  display:inline-flex;align-items:center;justify-content:center;
  width:96px;height:96px;flex:none;
  border:0;border-radius:50%;
  background:var(--accent);color:var(--f-preto);
  cursor:pointer;
  /* o play some conforme a janela abre: quem abriu ja viu o convite */
  opacity:calc(1 - var(--p) * 1.6);
  transition:background-color var(--dur-fluid) var(--ease-fluid);
}
.filme__play:hover{background:var(--laranja-hi)}
.filme__play svg{width:30px;height:30px;margin-left:4px}
.filme__janela[data-tocando="1"] .filme__play{opacity:0;pointer-events:none}

@media (max-width:809.98px){
  .filme{height:200svh}
  /* .filme__cola fica em 100svh (herdado da regra base) de proposito: o
     `position:sticky;top:0` gruda o TOPO da caixa no topo da tela, entao
     encolher a altura da caixa so tira espaco de baixo -- o video (centralizado
     DENTRO da caixa) acaba subindo e ficando fora do centro real da tela.
     Ja tentamos 70svh e 46svh pra reduzir a faixa cinza ao redor do video, mas
     as duas vieram com esse mesmo efeito colateral (pedido do cliente pra
     desfazer). Com 100svh o centro da caixa = centro da tela sempre. */
  .filme__play{width:68px;height:68px}
  .filme__play svg{width:22px;height:22px}
}

/* Sem animacao por preferencia do sistema: a janela ja nasce aberta e a
   secao perde a altura extra, virando uma secao normal. */
@media (prefers-reduced-motion:reduce){
  .filme{height:auto}
  .filme__cola{position:static;height:auto;padding-block:var(--sp-80)}
  .filme__janela{transform:none;border-radius:0}
  .filme__play{transform:translate(-50%,-50%);opacity:1}
}