/* ==========================================================================
   Animations — Keyframes & Entrance Sequences
   ========================================================================== */

/* Hero entrance stagger (only when JS-driven reveals are active) */
.js .hero .reveal:nth-child(1) { transition-delay: 200ms; }
.js .hero .reveal:nth-child(2) { transition-delay: 350ms; }
.js .hero .reveal:nth-child(3) { transition-delay: 500ms; }
.js .hero .reveal:nth-child(4) { transition-delay: 580ms; }
.js .hero .reveal:nth-child(5) { transition-delay: 660ms; }
.js .hero .reveal:nth-child(6) { transition-delay: 740ms; }
.js .hero .reveal:nth-child(7) { transition-delay: 820ms; }

/* Album card stagger within grid */
.js .album-card.reveal:nth-child(1) { transition-delay: 0ms; }
.js .album-card.reveal:nth-child(2) { transition-delay: 80ms; }
.js .album-card.reveal:nth-child(3) { transition-delay: 160ms; }
.js .album-card.reveal:nth-child(4) { transition-delay: 240ms; }
.js .album-card.reveal:nth-child(5) { transition-delay: 320ms; }
.js .album-card.reveal:nth-child(6) { transition-delay: 400ms; }
.js .album-card.reveal:nth-child(7) { transition-delay: 480ms; }

/* ================================================================
   Modal entrance — staggered reveal
   ================================================================ */

/* Container scales in */
.album-modal__container {
  transform: scale(0.96) translateY(12px);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out-expo),
              opacity var(--duration-slow) var(--ease-out-expo);
}

.album-modal--open .album-modal__container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Artwork scales in (stagger: +80ms) */
.album-modal__artwork {
  transform: scale(0.92);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out-expo),
              opacity var(--duration-slow) var(--ease-out-expo);
}

.album-modal--open .album-modal__artwork {
  transform: scale(1);
  opacity: 1;
  transition-delay: 80ms;
}

/* Info slides up (stagger: +160ms) */
.album-modal__info {
  transform: translateY(10px);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out-expo),
              opacity var(--duration-slow) var(--ease-out-expo);
}

.album-modal--open .album-modal__info {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 160ms;
}

/* Player bar fades up (stagger: +220ms) */
.album-modal__player {
  transform: translateY(8px);
  opacity: 0;
  transition: transform var(--duration-slow) var(--ease-out-expo),
              opacity var(--duration-slow) var(--ease-out-expo);
}

.album-modal--open .album-modal__player {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 220ms;
}

/* ---- Exit stagger (reverse order) ---- */
.album-modal--closing .album-modal__player   { transition-delay: 0ms; opacity: 0; transform: translateY(8px); }
.album-modal--closing .album-modal__info     { transition-delay: 60ms; opacity: 0; transform: translateY(10px); }
.album-modal--closing .album-modal__artwork  { transition-delay: 120ms; opacity: 0; transform: scale(0.95); }
.album-modal--closing .album-modal__container { transition-delay: 150ms; opacity: 0; transform: scale(0.97) translateY(8px); }

/* Track items — quick stagger, then done */
.track-item {
  opacity: 0;
  transform: translateX(-6px);
  animation: track-enter var(--duration-normal) var(--ease-out-expo) forwards;
}

.album-modal--open .track-item:nth-child(1) { animation-delay: 250ms; }
.album-modal--open .track-item:nth-child(2) { animation-delay: 280ms; }
.album-modal--open .track-item:nth-child(3) { animation-delay: 310ms; }
.album-modal--open .track-item:nth-child(4) { animation-delay: 340ms; }
.album-modal--open .track-item:nth-child(5) { animation-delay: 370ms; }
.album-modal--open .track-item:nth-child(6) { animation-delay: 400ms; }
.album-modal--open .track-item:nth-child(7) { animation-delay: 430ms; }
.album-modal--open .track-item:nth-child(n+8) { animation-delay: 450ms; }

@keyframes track-enter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile bottom-sheet slide-up (overrides container animation) */
@media (max-width: 768px) {
  .album-modal__container {
    transform: translateY(100%);
    opacity: 1;
    transition: transform var(--duration-slow) var(--ease-out-expo);
  }
  .album-modal--open .album-modal__container {
    transform: translateY(0);
  }
  .album-modal--closing .album-modal__container {
    transform: translateY(100%);
    opacity: 1;
    transition-delay: 0ms;
  }
}

/* Mini player slide up */
@keyframes mini-player-enter {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ================================================================
   Blanket reduced-motion — disable all non-essential animations
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}