/* ============================================================
   04 · ANIMACIONES — keyframes y clases de aparición al scroll
   Uso:  <div class="reveal">, .reveal--left, .reveal--right,
         .reveal--zoom  +  data-delay="200" (ms)
   ============================================================ */

@keyframes kenburns   { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-2%, 1%); } }
@keyframes pulse      { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.96); opacity: .75; } }
@keyframes scrollLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes floaty     { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes marquee    { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ping       { 0% { box-shadow: 0 0 0 0 var(--rojo-glow); } 100% { box-shadow: 0 0 0 26px rgba(216,30,44,0); } }
@keyframes nudge      { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes lbIn       { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes shimmer    { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* Aparición al hacer scroll */
.reveal, .reveal--left, .reveal--right, .reveal--zoom {
  opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms); will-change: opacity, transform;
}
.reveal        { transform: translateY(40px); }
.reveal--left  { transform: translateX(-60px); }
.reveal--right { transform: translateX(60px); }
.reveal--zoom  { transform: scale(.88); }
.is-visible    { opacity: 1 !important; transform: none !important; }

/* Aparición escalonada de hijos */
.stagger > * { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.stagger.is-visible > * { opacity: 1; transform: none; }
.stagger.is-visible > *:nth-child(1)  { transition-delay: .05s; }
.stagger.is-visible > *:nth-child(2)  { transition-delay: .15s; }
.stagger.is-visible > *:nth-child(3)  { transition-delay: .25s; }
.stagger.is-visible > *:nth-child(4)  { transition-delay: .35s; }
.stagger.is-visible > *:nth-child(5)  { transition-delay: .45s; }
.stagger.is-visible > *:nth-child(6)  { transition-delay: .55s; }
.stagger.is-visible > *:nth-child(7)  { transition-delay: .65s; }
.stagger.is-visible > *:nth-child(8)  { transition-delay: .75s; }
.stagger.is-visible > *:nth-child(9)  { transition-delay: .85s; }
.stagger.is-visible > *:nth-child(10) { transition-delay: .95s; }
.stagger.is-visible > *:nth-child(n+11) { transition-delay: 1s; }

/* Texto con animación palabra por palabra (hero) */
.split-words .w { display: inline-block; opacity: 0; transform: translateY(60%) rotate(4deg); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.split-words.is-visible .w { opacity: 1; transform: none; }

/* Texto con brillo animado */
.shine { background: linear-gradient(90deg, #fff 0%, #fff 40%, var(--rojo) 50%, #fff 60%, #fff 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4s linear infinite; }

/* Giro suave para logos/discos */
.spin-slow { animation: spin 18s linear infinite; }

/* Respeto a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal--left, .reveal--right, .reveal--zoom, .stagger > *, .split-words .w { opacity: 1; transform: none; }
}