/* Graphic entrances use the existing Animate UI reveal timing. */
@media (prefers-reduced-motion: no-preference) {
  /* The hero's stacked-to-spread pose is controlled by scroll-motion.js. */

  /* Only the illustrations move; descriptions and prices stay still. */
  .course { --cover-angle: -4deg; }
  .course:nth-child(2) { --cover-angle: 0deg; }
  .course:nth-child(3) { --cover-angle: 4deg; }
  .js .course.visible .cover { animation: cover-arrive var(--motion-reveal) both; }
  .js .course.visible:nth-child(2) .cover { animation-delay: 80ms; }
  .js .course.visible:nth-child(3) .cover { animation-delay: 100ms; }
  @keyframes cover-arrive {
    from { transform: translateY(12px) rotate(var(--cover-angle)); }
    to { transform: translateY(0) rotate(var(--cover-angle)); }
  }

  .js .player.visible { animation: visual-arrive var(--motion-reveal) both; }
  .js .notes.visible .notes-rail li { animation: visual-arrive var(--motion-reveal) both; }
  .js .notes.visible .notes-rail li:nth-child(2) { animation-delay: 80ms; }
  .js .notes.visible .notes-rail li:nth-child(3),
  .js .notes.visible .notes-rail li:nth-child(4) { animation-delay: 100ms; }
  @keyframes visual-arrive {
    from { transform: translateY(10px); }
    to { transform: translateY(0); }
  }

  .player-btn img { transition: transform var(--motion-selection); }
  .player-btn:focus-visible img { transform: scale(1.025); }
  .cover { transition: rotate var(--motion-selection); }
  .course:focus-within .cover { rotate: y -7deg; }
  @media (hover: hover) and (pointer: fine) {
    .player-btn:hover img { transform: scale(1.025); }
    .course:hover .cover { rotate: y -7deg; }
  }
}

/* Keyboard focus stays visible within the clipped player. */
.player-btn:focus-visible { outline: 3px solid var(--mint-300); outline-offset: -5px; }

@media (prefers-reduced-motion: reduce) {
  [data-scroll-graphic], .hero-sheet { opacity: 1 !important; translate: none !important; rotate: none !important; }
}