/* ============================================================================
 * motion.css — Sistema de movimiento "Premium / Cinematic" (Ruta Empresarial)
 * ----------------------------------------------------------------------------
 * Reglas de oro:
 *   1) Ninguna transición global/de página dura menos de 300 ms.
 *   2) Solo se animan propiedades aceleradas por GPU: transform y opacity.
 *   3) Curvas de easing personalizadas (nunca linear ni ease-in-out estándar).
 *   4) Respeta prefers-reduced-motion (WCAG SC 2.3.3).
 *
 * Es ADITIVO: define variables y clases utilitarias. No altera estilos previos.
 * Inclúyelo después de css/style.css.
 * ========================================================================== */

:root {
  /* ---- Curvas de easing "Premium" ---- */
  --ease-dramatic:  cubic-bezier(0.22, 1, 0.36, 1);    /* desaceleración dramática (entradas) */
  --ease-soft-in:   cubic-bezier(0.7, 0, 0.84, 0);     /* aceleración suave (salidas) */
  --ease-inout:     cubic-bezier(0.65, 0, 0.35, 1);    /* simétrica suave (no la estándar) */
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote sutil (énfasis) */

  /* ---- Duraciones — REGLA DE ORO: global ≥ 300 ms ---- */
  --dur-micro: 200ms;  /* SOLO micro-interacciones locales (hover de un botón) */
  --dur-base:  320ms;  /* transición base de UI */
  --dur-page:  480ms;  /* transiciones de página / overlays globales */
  --dur-hero:  720ms;  /* entradas cinemáticas (héroe, primer pintado) */

  /* Desplazamiento por defecto de las entradas */
  --motion-rise: 24px;
}

/* ============================================================================
 * Utilidades de transición (componibles)
 * ========================================================================== */
.mo-trans      { transition: transform var(--dur-base) var(--ease-dramatic),
                             opacity   var(--dur-base) var(--ease-dramatic); }
.mo-trans-page { transition: transform var(--dur-page) var(--ease-dramatic),
                             opacity   var(--dur-page) var(--ease-dramatic); }

/* will-change solo mientras el elemento está "armado" para animar */
.mo-anim { will-change: transform, opacity; }

/* ============================================================================
 * Entradas cinemáticas — estado inicial + estado visible
 *   Uso: <div class="mo-reveal"> … </div>  y añadir .is-in cuando entre al viewport.
 *   (IntersectionObserver lo activa; ver js/ambient.js no — usa tu propio observer
 *    o añade .is-in tras el load.)
 * ========================================================================== */
.mo-reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-rise), 0);
  transition: transform var(--dur-page) var(--ease-dramatic),
              opacity   var(--dur-page) var(--ease-dramatic);
  will-change: transform, opacity;
}
.mo-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Escalonado opcional para listas (data-stagger en el contenedor) */
.mo-reveal.is-in.mo-d1 { transition-delay: 60ms; }
.mo-reveal.is-in.mo-d2 { transition-delay: 120ms; }
.mo-reveal.is-in.mo-d3 { transition-delay: 180ms; }
.mo-reveal.is-in.mo-d4 { transition-delay: 240ms; }
.mo-reveal.is-in.mo-d5 { transition-delay: 300ms; }

/* ============================================================================
 * Keyframes (GPU-only)
 * ========================================================================== */
@keyframes mo-fade-rise {
  from { opacity: 0; transform: translate3d(0, var(--motion-rise), 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes mo-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes mo-pulse-soft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.mo-fade-rise { animation: mo-fade-rise var(--dur-page)  var(--ease-dramatic) both; }
.mo-scale-in  { animation: mo-scale-in  var(--dur-base)  var(--ease-overshoot) both; }
.mo-pulse     { animation: mo-pulse-soft 2.4s var(--ease-inout) infinite; }

/* ============================================================================
 * Indicador "Toca para activar la experiencia" (gate de audio)
 *   Lo usa js/ambient.js. Halo respira suavemente (transform only).
 * ========================================================================== */
.mo-audio-hint {
  display: inline-flex; align-items: center; gap: 0.5rem;
  animation: mo-pulse-soft 2.4s var(--ease-inout) infinite;
  will-change: transform;
}

/* ============================================================================
 * Accesibilidad — prefers-reduced-motion (WCAG 2.3.3)
 *   Desactiva el MOVIMIENTO no esencial; conserva cambios de opacidad sutiles.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mo-trans, .mo-trans-page, .mo-reveal {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .mo-reveal { transform: none !important; }
  .mo-fade-rise, .mo-scale-in, .mo-pulse, .mo-audio-hint {
    animation: none !important;
  }
  .mo-reveal { opacity: 1 !important; }
}