/* ============================================================
   Camada "Evoluído" — opt-in via body.evolved (comparação A/B do index).
   Tudo atrás de prefers-reduced-motion: no-preference para não quebrar
   a versão de movimento reduzido (que mostra tudo estático).
   Reaproveita os hooks existentes (.reveal/.reveal.in do app.js).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 1) Reveals de rolagem mais ricos: além de fade+translate, ganha
        escala sutil + blur-in (desfoque → nítido) ao entrar na tela. */
  .evolved .reveal {
    transform: translateY(30px) scale(.972);
    filter: blur(7px);
    transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
  }
  .evolved .reveal.in { transform: none; filter: blur(0); }

  /* 2) Entrada cinematográfica do hero: cascata mais longa, blur mais
        forte, “assenta” com calma. Os delays inline do HTML ficam. */
  .evolved .hero-inner .reveal {
    transform: translateY(30px) scale(.984);
    filter: blur(13px);
    transition: opacity .65s var(--ease), transform .65s var(--ease), filter .65s var(--ease);
  }
  .evolved .hero-inner .reveal.in { transform: none; filter: blur(0); }

  /* wordmark do hero: leve fade+rise de abertura (entra antes da headline) */
  .evolved .hero-wordmark {
    animation: ev-hero-mark .7s var(--ease) both;
  }
  @keyframes ev-hero-mark {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  /* 3) Microinteração-assinatura: CTAs magnéticos (o transform é setado
        pelo evolved.js; aqui só o amortecimento do retorno). */
  .evolved [data-magnetic] { transition: transform .35s var(--ease); will-change: transform; }
}