/* Animação ligada à rolagem

   Feita com scroll-driven animations do CSS. Onde não houver suporte, o
   bloco @supports inteiro é ignorado e o conteúdo aparece normalmente —
   nunca há risco de a página ficar em branco. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .auvp-sobe {
      animation: auvp-sobe linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 32%;
    }
    .auvp-abre {
      animation: auvp-abre linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 38%;
    }
    /* O texto do hero não depende mais da rolagem: ele já chega escrito
       sobre a foto. Só a foto continua ligada ao scroll, com um deslize
       de parallax enquanto a dobra sai da tela. */
    .auvp-hero__media {
      animation: auvp-parallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100svh;
    }
    .auvp-progress i {
      animation: auvp-progresso linear both;
      animation-timeline: scroll(root block);
    }
    /* Cada linha do Diferencial entra por conta própria: como o timeline
       é o da própria linha, o escalonamento vem da rolagem, não de
       animation-delay.

       A faixa termina em `entry 100%`, ou seja, no instante em que a
       linha acabou de entrar inteira na tela. Antes ela ia até
       `cover 30%` e a última linha ficava parada no meio da animação,
       mais clara que as outras — parecia cor diferente, e era só a
       revelação sem terminar. */
    .auvp-edge__linha {
      animation: auvp-edge-linha linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 100%;
    }
  }
}

@keyframes auvp-sobe {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}
@keyframes auvp-abre {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.08); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
/* A dobra de networking tinha três animações de rolagem aqui — o item
   pulsando, o numeral preenchendo, o título engrossando. Saíram com o
   caça-níquel: agora quem diz qual perfil está em destaque é a classe
   `esta-ativo`, e duas coisas mandando na mesma opacidade e na mesma
   escala é uma briga que ninguém ganha. */
@keyframes auvp-edge-linha {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: none; }
}
@keyframes auvp-parallax { to { transform: translateY(12%); } }
@keyframes auvp-progresso { to { transform: scaleX(1); } }

/* Preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .auvp-marquee__track { animation: none; }
  /* Os dois passeios automáticos são do assets/js/auvp.js, e ele próprio
     não liga o relógio quando esta preferência está ativa. Aqui fica só
     o trilho parado onde estiver. */
  .auvp-roleta__trilho { transition: none; }
}