/* ==========================================================================
   Sistema de aparición (equivalente a los "appearEffect" de Framer)
   - [data-reveal]            → sube 30px y aparece (por defecto)
   - [data-reveal="zoom"]     → escala 0.9 → 1
   - [data-reveal="fade"]     → solo opacidad
   - [data-reveal-load]       → se activa al cargar (trigger "onMount")
   - style="--reveal-delay"   → retardo
   Solo se ocultan si hay JS (html.js); sin JS o con movimiento reducido
   el contenido se ve siempre.
   ========================================================================== */

@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
      opacity: 0;
      transform: translateY(var(--reveal-y, 30px));
      transition:
        opacity var(--reveal-duration, 1.2s) var(--ease-out) var(--reveal-delay, 0s),
        transform var(--reveal-duration, 1.2s) var(--ease-out) var(--reveal-delay, 0s);
    }

    .js [data-reveal="zoom"] {
      transform: scale(0.9);
    }

    .js [data-reveal="fade"] {
      transform: none;
    }

    .js [data-reveal].is-revealed {
      opacity: 1;
      transform: none;
    }
  }
}