/* ============================================================
   DRAKOWEBS — animations.css
   Toda animación no esencial vive detrás de prefers-reduced-motion.
   Si el usuario prefiere menos movimiento, los elementos son
   simplemente visibles desde el principio: cero JS necesario
   para ese fallback, se resuelve solo con la cascada CSS.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Reveal on-scroll (fade + slide + blur) ----------
     Solo se oculta el contenido si html.js está presente, es decir,
     si se ha confirmado que JavaScript se está ejecutando de verdad
     (ver el script guardián y el onerror en index.html). Sin esa
     confirmación, .reveal nunca gana un estado oculto: por defecto
     el contenido es visible, JS-roto o no.

     El ritmo (cuánto tarda cada elemento en aparecer tras el anterior)
     se define aquí, por sección, vía --reveal-stagger-unit — así la
     misma lógica de JS sirve para un recorrido con variación real:
     el Hero se toma su tiempo, Servicios es preciso y rápido,
     Filosofía se detiene. */
  html.js .reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
      opacity var(--duration-slower) var(--ease-reveal),
      transform var(--duration-slower) var(--ease-reveal);
    transition-delay: calc(var(--reveal-index, 0) * var(--reveal-stagger-unit, 70ms));
  }
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* ---------- Ritmo por sección ---------- */
  .hero { --reveal-stagger-unit: 180ms; }
  .client-grid { --reveal-stagger-unit: 55ms; }
  .service-list { --reveal-stagger-unit: 45ms; }
  .process-list { --reveal-stagger-unit: 90ms; }
  .accordion { --reveal-stagger-unit: 60ms; }

  /* Filosofía: una única pausa deliberada, no una sucesión de elementos.
     Duración más larga y ocultamiento más profundo que el resto de la
     web — es el momento "en silencio" del recorrido. */
  .philosophy { --reveal-stagger-unit: 220ms; }
  html.js .philosophy .reveal {
    transition-duration: 1000ms;
    transform: translate3d(0, 40px, 0);
  }

  /* ---------- Secuencia de entrada del Hero ---------- */
  html.js .hero .reveal {
    transform: translate3d(0, 22px, 0);
    transition-duration: 840ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.js .hero__grid {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(1.01);
    transition: opacity 980ms cubic-bezier(0.16, 1, 0.3, 1), transform 980ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  html.js .hero.is-revealing .hero__grid {
    opacity: 0.6;
    transform: none;
  }

  html.js .hero.is-revealing .scroll-indicator {
    opacity: 1;
    transform: none;
  }

  body.hero-entrance-active .site-header .logo {
    opacity: 1;
    transform: none;
  }

  .site-header .logo {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition: opacity 500ms var(--ease-reveal), transform 500ms var(--ease-reveal);
    transition-delay: 120ms;
  }

  .scroll-indicator {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity 680ms cubic-bezier(0.22, 1, 0.36, 1), transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 1020ms;
  }

  /* ---------- Titular del Hero: palabra a palabra ----------
     Cada .hero__word hereda su propio retraso a partir de --word-index,
     independiente del sistema de --reveal-index (la línea completa ya
     es un .reveal; dentro de ella, las palabras tienen su propio ritmo,
     más rápido y preciso, como una máquina de escribir muy cuidada). */
  .hero__word {
    display: inline-block;
  }
  html.js .hero__word {
    opacity: 0;
    transform: translate3d(0, 0.42em, 0);
    transition:
      opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--word-index, 0) * 58ms);
  }
  html.js .hero.is-revealing .reveal.is-visible .hero__word {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  /* ---------- Parallax sutil del grid del hero ---------- */
  .hero__grid {
    transition: transform 600ms var(--ease-out);
  }

  /* ---------- Indicador de scroll ---------- */
  @keyframes scroll-trace {
    0%   { top: -100%; }
    50%  { top: 0%; }
    100% { top: 100%; }
  }

  /* ---------- Brillo diagonal muy sutil sobre los placeholders del
     portfolio: una capa independiente que se desliza muy despacio,
     sin tocar el patrón de rayas ya existente (evita distorsionarlo). ---------- */
  @keyframes frame-sheen {
    0%, 100% { transform: translate(-20%, -20%); }
    50%      { transform: translate(20%, 20%); }
  }
  .media-frame::after {
    content: "";
    position: absolute;
    inset: -50%;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.035) 50%, transparent 58%);
    animation: none;
    transform-origin: center;
  }

  .media-frame:hover::after {
    animation: frame-sheen 900ms ease-in-out 1;
  }

  /* ---------- Fade negro inicial de carga ---------- */
  .page-loader {
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    z-index: 999;
    transition: opacity 700ms var(--ease-reveal);
  }
  .page-loader.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
}

/* Sin preferencia de reducir movimiento: el loader se retira igualmente rápido,
   sin animación de opacidad, para no bloquear el contenido. */
@media (prefers-reduced-motion: reduce) {
  .page-loader { display: none; }
  html.has-custom-cursor .cursor { display: none; }
  .hero__grid { transform: none !important; }
  .media-frame::after { animation: none; }
  .hero__word { opacity: 1; filter: none; transform: none; }
}

/* ---------- Estados hover/focus/active ya definidos junto a cada
   componente en style.css; aquí solo keyframes y utilidades globales. ---------- */