/* ============================================================
   ANIMATIONS.CSS — Scroll reveals, grain, card hover, stagger
   ============================================================ */

/* ── Scroll-in reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.65s var(--ease-spring),
    transform 0.65s var(--ease-spring);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity 0.65s var(--ease-spring),
    transform 0.65s var(--ease-spring);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity 0.65s var(--ease-spring),
    transform 0.65s var(--ease-spring);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Scale reveal — for cards */
.reveal-scale {
  opacity: 0;
  transform: scale(0.96) translateY(16px);
  transition:
    opacity 0.55s var(--ease-spring),
    transform 0.55s var(--ease-spring);
}
.reveal-scale.visible { opacity: 1; transform: scale(1) translateY(0); }

/* ── Stagger — nth-child delays for grid children ── */
.stagger > *:nth-child(1)  { transition-delay:   0ms; }
.stagger > *:nth-child(2)  { transition-delay:  70ms; }
.stagger > *:nth-child(3)  { transition-delay: 140ms; }
.stagger > *:nth-child(4)  { transition-delay: 210ms; }
.stagger > *:nth-child(5)  { transition-delay: 280ms; }
.stagger > *:nth-child(6)  { transition-delay: 350ms; }
.stagger > *:nth-child(7)  { transition-delay: 420ms; }
.stagger > *:nth-child(8)  { transition-delay: 490ms; }

/* ── Card hover lift ── */
.card-lift {
  transition:
    transform 280ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .card-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
  }
}

/* ── Film grain overlay ── */
/* Applied via ::before on .grain parent elements */
.grain {
  position: relative;
  isolation: isolate;
}

.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: grain-drift 0.4s steps(1) infinite;
  border-radius: inherit;
}

@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  14%  { transform: translate(-2%, -3%); }
  28%  { transform: translate(3%, 1%); }
  42%  { transform: translate(-1%, 4%); }
  57%  { transform: translate(2%, -2%); }
  71%  { transform: translate(-3%, 1%); }
  85%  { transform: translate(1%, -4%); }
  100% { transform: translate(0, 0); }
}

/* ── Pulse ring — for playing indicator ── */
@keyframes pulse-ring {
  0%   { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(76,201,240,0.5); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 8px rgba(76,201,240,0); }
  100% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(76,201,240,0); }
}

.pulse {
  animation: pulse-ring 1.8s ease-out infinite;
}

/* ── Spin ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin { animation: spin 0.8s linear infinite; }

/* ── Checkmark draw ── */
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

/* ── Fade in ── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in { animation: fade-in 0.4s var(--ease-out) both; }

/* ── Slide up ── */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-up { animation: slide-up 0.45s var(--ease-spring) both; }

/* ── Waveform bars (decorative player equalizer) ── */
.eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.eq-bar {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: bottom;
  animation: eq-dance 0.8s ease-in-out infinite alternate;
}

.eq-bar:nth-child(1) { animation-duration: 0.5s;  animation-delay: 0ms; }
.eq-bar:nth-child(2) { animation-duration: 0.65s; animation-delay: 80ms; }
.eq-bar:nth-child(3) { animation-duration: 0.45s; animation-delay: 150ms; }
.eq-bar:nth-child(4) { animation-duration: 0.7s;  animation-delay: 50ms; }

@keyframes eq-dance {
  from { height: 3px; }
  to   { height: 14px; }
}

.eq-bars.paused .eq-bar {
  animation-play-state: paused;
}