/* ============================================================
   animations.css — Sellaora · todo el motion declarativo vive aquí
   (el stagger del rotador es WAAPI en main.js; sus tiempos,
   en tokens.css → --rot-*)
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes chain-draw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
/* Chispa de la hairline: aparece y luego respira */
@keyframes tip-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tip-pulse {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 6px 1px rgba(var(--color-accent-rgb), 0.45), 0 0 16px 4px rgba(200, 169, 106, 0.22); }
  50%      { opacity: 1;    box-shadow: 0 0 10px 3px rgba(var(--color-accent-rgb), 0.70), 0 0 30px 8px rgba(200, 169, 106, 0.38); }
}
/* Halo que respira alrededor de las letras (drop-shadow sobre el contenedor: no toca la nitidez del glifo).
   Montserrat Light tiene trazos finos → halo más contenido que con una serif. */
@keyframes title-glow {
  from { filter: drop-shadow(0 0 12px rgba(var(--color-accent-rgb), 0.12)); }
  to   { filter: drop-shadow(0 0 26px rgba(var(--color-accent-rgb), 0.30)); }
}
/* Barrido de luz: la franja clara cruza cada palabra en ~1.1 s y luego descansa */
@keyframes text-shine {
  0%   { background-position: 100% 0; }
  17%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

/* ---------- Estado inicial (solo con JS → sin JS todo es visible) ---------- */
.js .hero__brand        { opacity: 0; }
.js .hero__chain        { transform: scaleY(0); }
.js .hero__chain::after { opacity: 0; }

/* ---------- Secuencia de carga — la dispara main.js con .is-loaded tras cargar fuentes ----------
   wordmark 100ms → cadena 400ms → headline ~1100ms (JS, --rot-first-delay) → chispa 1300ms */
.js .is-loaded .hero__brand { animation: reveal-fade 1100ms var(--ease-out-expo) 100ms both; }
.js .is-loaded .hero__chain { animation: chain-draw 1000ms var(--ease-in-out-luxe) 400ms both; }
.js .is-loaded .hero__chain::after {
  animation:
    tip-in 500ms var(--ease-out-expo) 1300ms both,
    tip-pulse 3.2s ease-in-out 1800ms infinite;
}

/* ---------- Brillo continuo ---------- */
.hero__rotator { animation: title-glow 4.5s ease-in-out infinite alternate; }

/* Cada frase nueva arranca su propio barrido ~1.4 s después de entrar (ya nítida, dentro del hold);
   el stagger por palabra hace que la luz viaje a lo largo de la frase (en árabe, de derecha a izquierda). */
.rotator__word { animation: text-shine 6.5s ease-in-out 1.4s infinite; }
.rotator__word:nth-child(2) { animation-delay: 1.5s; }
.rotator__word:nth-child(3) { animation-delay: 1.6s; }
.rotator__word:nth-child(4) { animation-delay: 1.7s; }
.rotator__word:nth-child(5) { animation-delay: 1.8s; }

/* ---------- Reduced motion: sin secuencia ni brillos animados (el rotador hace crossfade simple) ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__brand,
  .js .is-loaded .hero__brand,
  .js .hero__chain,
  .js .is-loaded .hero__chain,
  .js .hero__chain::after,
  .js .is-loaded .hero__chain::after { animation: none; opacity: 1; transform: none; }
  .hero__rotator,
  .rotator__word { animation: none; }
}