/* ============================================================
   SCHOLA CANTORUM — animations.css
   Scroll-driven reveals + entrance effects
   ============================================================ */

/* ── Reveal on scroll ─────────────────────────────────────── */

/* Initial hidden state for elements with .reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

/* Delay variants */
.reveal--delay-1 { transition-delay: 0.15s; }
.reveal--delay-2 { transition-delay: 0.30s; }
.reveal--delay-3 { transition-delay: 0.45s; }

/* Visible state (added by IntersectionObserver in main.js) */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scroll-driven animations (native CSS, Baseline 2025) ─── */

/* Supported only in modern Chrome/Edge/Safari 26+.
   Firefox uses the IntersectionObserver fallback defined in main.js */

@supports ((animation-timeline: view()) and (animation-range: entry)) {
  /* Override JS-driven reveal with native scroll animation */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }

  /* Cancel the transition so CSS animation takes over */
  .reveal {
    transition: none;
  }

  /* Delays via animation-delay */
  .reveal--delay-1 { animation-delay: calc(-1 * 0.05s); }
  .reveal--delay-2 { animation-delay: calc(-1 * 0.10s); }
  .reveal--delay-3 { animation-delay: calc(-1 * 0.15s); }
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Section separator line ───────────────────────────────── */
.section::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(201, 168, 76, 0.15) 30%,
    rgba(201, 168, 76, 0.15) 70%,
    transparent 100%
  );
}

/* ── Hero entrance animations ─────────────────────────────── */

/* Overline fades in slightly after title */
.hero__overline {
  opacity: 0;
  transition:
    opacity 0.8s var(--ease-out) 0.8s;
}
body.loaded .hero__overline {
  opacity: 1;
}

/* Verse fades in last */
.hero__verse,
.hero__verse-ref {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out) 1.1s;
}
body.loaded .hero__verse,
body.loaded .hero__verse-ref {
  opacity: 1;
}

.hero__btn {
  opacity: 0;
  transition:
    opacity 0.8s var(--ease-out) 1.4s,
    color var(--dur-med) ease 0s,
    border-color var(--dur-med) ease 0s,
    background var(--dur-med) ease 0s,
    box-shadow var(--dur-med) ease 0s;
}
body.loaded .hero__btn {
  opacity: 1;
}

/* ── Lyrics fade in ───────────────────────────────────────── */
.lyrics-panel {
  animation: fade-up 0.5s var(--ease-out) both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Track list item entrance ─────────────────────────────── */
.track-list__item {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

.track-list__item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger via nth-child */
.track-list__item:nth-child(1) { transition-delay: 0.05s; }
.track-list__item:nth-child(2) { transition-delay: 0.10s; }
.track-list__item:nth-child(3) { transition-delay: 0.15s; }
.track-list__item:nth-child(4) { transition-delay: 0.20s; }
.track-list__item:nth-child(5) { transition-delay: 0.25s; }
.track-list__item:nth-child(6) { transition-delay: 0.30s; }
.track-list__item:nth-child(7) { transition-delay: 0.35s; }
.track-list__item:nth-child(8) { transition-delay: 0.40s; }

/* ── Prefers reduced motion ───────────────────────────────── */
@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;
  }

  .reveal,
  .reveal.visible {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .hero__content,
  .hero__overline,
  .hero__verse,
  .hero__verse-ref,
  .hero__btn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}