/* ============================================================
   DJ PITY ROMERO — animations.css
   ============================================================ */

/* ---- SCROLL REVEAL ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s ease, transform 0.75s ease;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-42px);
  transition: opacity 0.85s ease, transform 0.85s ease;
  will-change: opacity, transform;
}
.reveal-right {
  opacity: 0;
  transform: translateX(42px);
  transition: opacity 0.85s ease, transform 0.85s ease;
  will-change: opacity, transform;
}
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0);
}

/* ---- GOLD SHIMMER — texto "Pity" en hero ---- */
@keyframes goldShimmer {
  0%   { background-position: 280% center; }
  100% { background-position: -280% center; }
}

/* ---- MARQUEE ---- */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- SCROLL HINT LINE ---- */
@keyframes scrollPulse {
  0%, 100% { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%       { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ---- EQUALIZER BARS ---- */
@keyframes eqBounce {
  from { height: 4px; }
  to   { height: var(--eq-h, 40px); }
}

.eq-bar {
  animation: eqBounce var(--eq-d, 0.8s) ease-in-out infinite alternate;
}

/* Hero — 20 barras con variación deliberada */
.hero-eq .eq-bar:nth-child(1)  { --eq-h: 20px; --eq-d: 0.65s; animation-delay: 0.00s; }
.hero-eq .eq-bar:nth-child(2)  { --eq-h: 50px; --eq-d: 0.82s; animation-delay: 0.08s; }
.hero-eq .eq-bar:nth-child(3)  { --eq-h: 32px; --eq-d: 0.70s; animation-delay: 0.20s; }
.hero-eq .eq-bar:nth-child(4)  { --eq-h: 65px; --eq-d: 0.95s; animation-delay: 0.04s; }
.hero-eq .eq-bar:nth-child(5)  { --eq-h: 28px; --eq-d: 0.75s; animation-delay: 0.30s; }
.hero-eq .eq-bar:nth-child(6)  { --eq-h: 58px; --eq-d: 0.60s; animation-delay: 0.14s; }
.hero-eq .eq-bar:nth-child(7)  { --eq-h: 22px; --eq-d: 0.88s; animation-delay: 0.42s; }
.hero-eq .eq-bar:nth-child(8)  { --eq-h: 75px; --eq-d: 0.72s; animation-delay: 0.06s; }
.hero-eq .eq-bar:nth-child(9)  { --eq-h: 45px; --eq-d: 0.90s; animation-delay: 0.24s; }
.hero-eq .eq-bar:nth-child(10) { --eq-h: 38px; --eq-d: 0.68s; animation-delay: 0.36s; }
.hero-eq .eq-bar:nth-child(11) { --eq-h: 68px; --eq-d: 0.78s; animation-delay: 0.12s; }
.hero-eq .eq-bar:nth-child(12) { --eq-h: 25px; --eq-d: 0.85s; animation-delay: 0.48s; }
.hero-eq .eq-bar:nth-child(13) { --eq-h: 52px; --eq-d: 0.63s; animation-delay: 0.16s; }
.hero-eq .eq-bar:nth-child(14) { --eq-h: 35px; --eq-d: 0.80s; animation-delay: 0.38s; }
.hero-eq .eq-bar:nth-child(15) { --eq-h: 60px; --eq-d: 0.73s; animation-delay: 0.22s; }
.hero-eq .eq-bar:nth-child(16) { --eq-h: 18px; --eq-d: 0.92s; animation-delay: 0.50s; }
.hero-eq .eq-bar:nth-child(17) { --eq-h: 42px; --eq-d: 0.67s; animation-delay: 0.10s; }
.hero-eq .eq-bar:nth-child(18) { --eq-h: 70px; --eq-d: 0.84s; animation-delay: 0.28s; }
.hero-eq .eq-bar:nth-child(19) { --eq-h: 30px; --eq-d: 0.77s; animation-delay: 0.44s; }
.hero-eq .eq-bar:nth-child(20) { --eq-h: 55px; --eq-d: 0.93s; animation-delay: 0.18s; }

/* Video — 10 barras */
.video-eq .eq-bar:nth-child(1)  { --eq-h: 28px; --eq-d: 0.70s; animation-delay: 0.00s; }
.video-eq .eq-bar:nth-child(2)  { --eq-h: 55px; --eq-d: 0.85s; animation-delay: 0.14s; }
.video-eq .eq-bar:nth-child(3)  { --eq-h: 38px; --eq-d: 0.75s; animation-delay: 0.30s; }
.video-eq .eq-bar:nth-child(4)  { --eq-h: 70px; --eq-d: 0.60s; animation-delay: 0.08s; }
.video-eq .eq-bar:nth-child(5)  { --eq-h: 42px; --eq-d: 0.90s; animation-delay: 0.22s; }
.video-eq .eq-bar:nth-child(6)  { --eq-h: 32px; --eq-d: 0.80s; animation-delay: 0.40s; }
.video-eq .eq-bar:nth-child(7)  { --eq-h: 60px; --eq-d: 0.68s; animation-delay: 0.05s; }
.video-eq .eq-bar:nth-child(8)  { --eq-h: 22px; --eq-d: 0.95s; animation-delay: 0.34s; }
.video-eq .eq-bar:nth-child(9)  { --eq-h: 50px; --eq-d: 0.76s; animation-delay: 0.18s; }
.video-eq .eq-bar:nth-child(10) { --eq-h: 35px; --eq-d: 0.88s; animation-delay: 0.46s; }