/*
 * Capa de movimiento de la landing: entrada al hacer scroll, secuencia de
 * héroes al cargar y micro-interacciones puntuales (escala sutil en botones
 * tipo CTA). Archivo aditivo y aislado: no cambia nada de landing.css ni de
 * landing-enhancements.css, solo agrega reglas nuevas basadas en atributos
 * data-*. Se carga únicamente desde templates/layout/public.php; el admin no
 * lo incluye ni lo necesita.
 *
 * Mecanismo (ver webroot/js/landing-motion.js):
 * - data-reveal: la sección entera aparece (fade + 16px) al entrar en el
 *   viewport, una sola vez.
 * - data-reveal-group + data-reveal-item (en sus hijos directos): igual que
 *   data-reveal, pero con stagger entre hijos.
 * - data-hero-in (con --hero-index inline): secuencia de entrada al cargar la
 *   página, sin scroll de por medio (para el héroe visible desde el inicio).
 * - data-hover-lift: escala sutil (máx. 1.02) en hover/focus, para botones
 *   tipo CTA. Solo transform, nunca width/height/top/left.
 *
 * Duraciones y easing centralizados aquí; --gs-ease ya existe en landing.css
 * (curva compartida por todo el sitio) y se reusa tal cual para no duplicar
 * el mismo valor bajo dos nombres distintos.
 */
:root {
  --dur-fast: 180ms;
  --dur-base: 250ms;
  --dur-reveal: 550ms;
  --ease-out: var(--gs-ease);
}

/* ---------- Entrada al hacer scroll ---------- */

[data-reveal],
[data-reveal-item] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

[data-reveal].is-visible,
[data-reveal-item].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger entre hijos de un data-reveal-group: hasta 6 pasos de 70ms: del
   7mo elemento en adelante entran junto con el 6to, para no alargar la
   espera en grillas largas (ej. catálogo). El índice lo asigna landing-motion.js. */
[data-reveal-item] {
  transition-delay: calc(min(var(--reveal-index, 0), 6) * 70ms);
}

/* ---------- Héroe: secuencia al cargar la página ---------- */

[data-hero-in] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--hero-index, 0) * 120ms);
}

[data-hero-in].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Micro-interacción: botones tipo CTA ---------- */

[data-hover-lift] {
  transition: transform var(--dur-fast) var(--ease-out);
}

[data-hover-lift]:hover,
[data-hover-lift]:focus-visible {
  transform: scale(1.02);
}

/*
 * Red de seguridad además de la regla global ya existente en
 * landing-enhancements.css (transition-duration: .01ms !important sobre *):
 * garantiza que nada quede visualmente "atascado" en su estado inicial
 * (opacity: 0) si, por lo que sea, el JS no llega a marcarlo como visible.
 */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-item],
  [data-hero-in] {
    opacity: 1;
    transform: none;
    animation: none;
  }
}