/* Jai Five — movimiento: keyframes, estados [data-reveal] (fallback sin GSAP) y reduced motion global.
   Ver ../ARQUITECTURA.md §7. Reposo siempre visible: nunca opacity 0 esperando un observer. */

/* ============================================================
   Keyframes
   ============================================================ */
/* Llama que titila (se aplica al grupo .fuego de cada vela) */
@keyframes titilar {
  0%, 100% { transform: scale(1, 1); opacity: 1; }
  23%      { transform: scale(1.05, .95) translateX(.35px); opacity: .9; }
  47%      { transform: scale(.96, 1.06) translateX(-.4px); opacity: 1; }
  71%      { transform: scale(1.03, .97) translateX(.2px); opacity: .88; }
}
/* Flotar suave (chips de la portada en el fallback, sevivón en reposo) */
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
/* Marquesina: una fila hacia la izquierda, otra hacia la derecha (contenido duplicado: -50 % = un juego) */
@keyframes marq-izq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marq-der { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* Brillo holográfico que recorre un degradado (usar con background-size: 300%) */
@keyframes brillo-holo {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

/* ============================================================
   Portada: titular partido por palabras (lo hace motion.js)
   ============================================================ */
#hero-title .w { display: inline-block; clip-path: inset(-.15em 0 -.25em 0); }
#hero-title .wi { display: inline-block; will-change: transform; }

/* Chips flotantes: sin GSAP flotan con keyframes; con GSAP lo hace motion.js */
html[data-motion="css"] .chip-flotante { animation: flotar 4.2s var(--ease-in-out) infinite; }
html[data-motion="css"] .chip-2 { animation-delay: -1.4s; }
html[data-motion="css"] .chip-3 { animation-delay: -2.8s; }

/* ============================================================
   Reveals (fallback sin GSAP): reposo .85 → 1, sube 24 px
   ============================================================ */
html[data-motion="css"] [data-reveal] {
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
html[data-motion="css"] [data-reveal]:not(.in):not([data-reveal-stagger]) {
  opacity: .85;
  transform: translateY(24px);
}
html[data-motion="css"] [data-reveal-stagger] > * {
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html[data-motion="css"] [data-reveal-stagger]:not(.in) > * {
  opacity: .85;
  transform: translateY(20px);
}

/* ============================================================
   Marquesina
   ============================================================ */
[data-marquee] { overflow: clip; }
[data-marquee] .marq-fila { width: max-content; will-change: transform; }
html[data-motion="css"] .marq-1 { animation: marq-izq 42s linear infinite; }
html[data-motion="css"] .marq-2 { animation: marq-der 48s linear infinite; }

/* ============================================================
   Tilt 3D y brillo (motion.js agrega data-tilt y el span .brillo)
   ============================================================ */
[data-tilt] { position: relative; transform-style: preserve-3d; }
[data-tilt].activo { will-change: transform; }
[data-tilt] .brillo {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgb(var(--rgb-blanco) / .34) 0%, rgb(var(--rgb-blanco) / .08) 26%, transparent 58%);
  transition: opacity var(--d-base) var(--ease-out);
}
[data-tilt] .brillo::after {
  content: ""; position: absolute; inset: 0;
  background: var(--g-holo);
  background-size: 300% 300%;
  background-position: var(--mx, 50%) var(--my, 50%);
  opacity: .2;
  mix-blend-mode: color-dodge;
}
[data-tilt].activo .brillo { opacity: 1; }

/* ============================================================
   Sevivón: resultado difuminado mientras gira
   ============================================================ */
.sevivon-resultado { transition: opacity var(--d-fast) var(--ease-out), filter var(--d-fast) var(--ease-out); }
.sevivon-resultado.pensando { opacity: .45; filter: blur(3px); }

/* ============================================================
   Reduced motion: nada se mueve; solo fundidos de 200 ms
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 200ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html[data-motion] [data-reveal],
  html[data-motion] [data-reveal-stagger] > * { transform: none !important; opacity: 1; }
  [data-marquee] .marq-fila { animation: none !important; transform: none !important; }
  .chip-flotante { animation: none !important; }
  [data-tilt] .brillo { display: none; }
  #hero-title .wi { will-change: auto; }
}