/* =========================================================
   SISTEMA DE ANIMAÇÕES (declarativo, via atributos no HTML)

   1) Revelar ao entrar na tela (IntersectionObserver em reveal.js)
        <h2 data-reveal>…</h2>                    sobe + aparece (padrão "up")
        <p  data-reveal="fade">…</p>              variantes: up · down · left · right
                                                   fade · scale · mask · blur
        <div data-reveal style="--reveal-delay: 200ms">
        <ul data-reveal-stagger> <li data-reveal>…  cascata automática (--i)
      Ajuste local do ritmo (sem mexer no site todo), no contêiner da seção:
        --dur-reveal · --reveal-distance · --stagger-step · --ease-reveal

   2) Parallax atrelado à rolagem (CSS puro, scroll-driven animations)
        <div data-parallax style="--parallax: 80px">   deslocamento vertical
      Navegadores sem suporte simplesmente não aplicam: nada quebra.

   Acessibilidade e robustez:
   - prefers-reduced-motion: nada é escondido, nada se move.
   - O estado inicial só é aplicado quando reveal.js marca html.reveal-ready;
     se o JS falhar, o conteúdo continua visível (bom para SEO e usuário).
   - Anime só transform/opacity/mask/filter: não disparam layout (INP/CLS).
   ========================================================= */
@layer utilities {
  @media (prefers-reduced-motion: no-preference) {

    /* ---------- 1. Reveal ---------- */
    html.reveal-ready [data-reveal] {
      --_x: 0px; --_y: var(--reveal-distance); --_s: 1;
      opacity: 0;
      translate: var(--_x) var(--_y);
      scale: var(--_s);
      transition:
        opacity   var(--dur-reveal) var(--ease-reveal),
        translate var(--dur-reveal) var(--ease-reveal),
        scale     var(--dur-reveal) var(--ease-reveal),
        mask-position var(--dur-reveal) var(--ease-in-out),
        filter    var(--dur-reveal) var(--ease-reveal);
      transition-delay: calc(var(--reveal-delay, 0ms) + var(--i, 0) * var(--stagger-step));
    }
    html.reveal-ready [data-reveal="down"]  { --_y: calc(var(--reveal-distance) * -1); }
    html.reveal-ready [data-reveal="left"]  { --_x: calc(var(--reveal-distance) * -1.5); --_y: 0px; }
    html.reveal-ready [data-reveal="right"] { --_x: calc(var(--reveal-distance) *  1.5); --_y: 0px; }
    html.reveal-ready [data-reveal="fade"]  { --_y: 0px; }
    html.reveal-ready [data-reveal="scale"] { --_y: 0px; --_s: .94; }
    /* cortina de cima para baixo. Usa mask (e não clip-path) porque clip-path
       no próprio elemento faz o IntersectionObserver achar que ele está invisível. */
    html.reveal-ready [data-reveal="mask"]  {
      --_y: 0px; opacity: 1;
      mask-image: linear-gradient(to bottom, #000 45%, transparent 55%);
      mask-size: 100% 220%; mask-repeat: no-repeat; mask-position: 0 100%;
    }
    html.reveal-ready [data-reveal="blur"]  { --_y: 0px; filter: blur(12px); }

    html.reveal-ready [data-reveal].is-inview {
      opacity: 1; translate: 0 0; scale: 1; mask-position: 0 0; filter: none;
    }

    /* ---------- 2. Parallax por rolagem ---------- */
    @supports (animation-timeline: view()) {
      [data-parallax] {
        animation: parallax-y linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
      @keyframes parallax-y {
        from { translate: 0 calc(var(--parallax, 60px) * -1); }
        to   { translate: 0 var(--parallax, 60px); }
      }
    }
  }
}