/**
 * Motion System — Urdaibai Txakolina
 * Solo activo cuando existe Motion Intent aprobado en la dirección de arte.
 * No modificar sin actualizar motion-system.md.
 *
 * Los efectos que requieren JS (reveal/stagger/parallax) usan .motion-ready
 * añadido al body desde motion.js. Sin .motion-ready el contenido es visible.
 */

/* ============================================
   VARIABLES DE MOTION
   ============================================ */
:root {
  --motion-reveal-duration: 640ms;
  --motion-reveal-ease: var(--ease-out);
  --motion-stagger-delay: 120ms;
  --motion-scroll-ease: var(--ease-in-out);
  --motion-parallax-strength: 8;
}

/* ============================================
   REVEAL ON SCROLL (requiere .motion-ready en body)
   ============================================ */
.motion-ready .motion-reveal {
  opacity: 0;
  transform: translateY(var(--space-md));
  transition:
    opacity var(--motion-reveal-duration) var(--motion-reveal-ease),
    transform var(--motion-reveal-duration) var(--motion-reveal-ease);
  will-change: opacity, transform;
}
.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================
   STAGGER REVEAL (contenedor -> ítems)
   ============================================ */
.motion-ready .motion-stagger .motion-item {
  opacity: 0;
  transform: translateY(var(--space-md));
  transition:
    opacity var(--motion-reveal-duration) var(--motion-reveal-ease),
    transform var(--motion-reveal-duration) var(--motion-reveal-ease);
  will-change: opacity, transform;
}
.motion-ready .motion-stagger.is-visible .motion-item {
  opacity: 1;
  transform: none;
}
/* Retraso incremental sin JS: cada ítem espera su turno */
.motion-stagger.is-visible .motion-item:nth-child(1) { transition-delay: 0ms; }
.motion-stagger.is-visible .motion-item:nth-child(2) { transition-delay: var(--motion-stagger-delay); }
.motion-stagger.is-visible .motion-item:nth-child(3) { transition-delay: calc(var(--motion-stagger-delay) * 2); }
.motion-stagger.is-visible .motion-item:nth-child(4) { transition-delay: calc(var(--motion-stagger-delay) * 3); }
.motion-stagger.is-visible .motion-item:nth-child(n+5) { transition-delay: calc(var(--motion-stagger-delay) * 3); }

/* ============================================
   HOVER LIFT (CSS puro — sin JS)
   ============================================ */
.motion-hover {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.motion-hover:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-md);
}

/* ============================================
   LOAD FADE (entrada por carga, CSS puro con delay)
   Requiere .motion-ready; si no, los elementos son visibles.
   ============================================ */
.motion-ready .motion-load {
  opacity: 0;
  animation: motion-fade-in var(--motion-reveal-duration) var(--motion-reveal-ease) forwards;
}
.motion-ready .motion-load:nth-child(1) { animation-delay: 0ms; }
.motion-ready .motion-load:nth-child(2) { animation-delay: 150ms; }
.motion-ready .motion-load:nth-child(3) { animation-delay: 300ms; }
.motion-ready .motion-load:nth-child(4) { animation-delay: 450ms; }

@keyframes motion-fade-in {
  from { opacity: 0; transform: translateY(var(--space-sm)) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* ============================================
   PARALLAX HERO (GSAP) — estado inicial sin JS
   La imagen queda estática; GSAP la anima vía yPercent.
   ============================================ */
.motion-parallax-bg { will-change: transform; }

/* ============================================
   PREFERS-REDUCED-MOTION — OBLIGATORIO
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .motion-reveal.is-visible,
  .motion-stagger,
  .motion-stagger .motion-item,
  .motion-hover,
  .motion-load,
  .motion-parallax-bg {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition-delay: 0ms !important;
  }
}