/* AudioCap — motion
   Light, magazine-page-turn entrances. Kept progressive-enhancement:
   default state is VISIBLE (opacity 1). When JS adds `html.js`, the
   fade-in class arms itself; the IntersectionObserver then releases
   the animation by adding `.in`. If JS never runs, content is still
   readable — better than blank. */

.fade-in { opacity: 1; }

html.js .fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 600ms var(--ease),
    transform 700ms var(--ease);
  will-change: transform, opacity;
}
html.js .fade-in.in {
  opacity: 1;
  transform: none;
}

/* Stagger groups: any container with .stagger > * gets sequential delays */
.stagger > .fade-in:nth-child(1) { transition-delay: 0ms; }
.stagger > .fade-in:nth-child(2) { transition-delay: 80ms; }
.stagger > .fade-in:nth-child(3) { transition-delay: 160ms; }
.stagger > .fade-in:nth-child(4) { transition-delay: 240ms; }
.stagger > .fade-in:nth-child(5) { transition-delay: 320ms; }
.stagger > .fade-in:nth-child(6) { transition-delay: 400ms; }
.stagger > .fade-in:nth-child(7) { transition-delay: 480ms; }
.stagger > .fade-in:nth-child(8) { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  html.js .fade-in { transition: none; opacity: 1; transform: none; }
  .disc-rotate, .render-art .spin, .player .art.spinning .ring,
  .scan-stage .scan-status .live::before, .eq i, .eyebrow .dot {
    animation: none !important;
  }
}