/* ============================================================
   MOTION — couche d'effets premium (curseur, transitions, reveals)
   Tout est coupé sous prefers-reduced-motion.
   ============================================================ */

/* ---------- Curseur custom (dot + ring + label) ---------- */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 1200; pointer-events: none;
  border-radius: 50%; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--white);
  mix-blend-mode: difference; transition: opacity .3s var(--ease); }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid var(--white-60);
  mix-blend-mode: difference; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.cursor-ring.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--white); border-color: transparent; }
.cursor-ring.is-down { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.cursor-label { position: fixed; top: 0; left: 0; z-index: 1201; pointer-events: none;
  transform: translate(-50%, -50%); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--white); mix-blend-mode: difference; opacity: 0; transition: opacity .25s var(--ease); white-space: nowrap; font-weight: 600; }
.cursor-label.is-show { opacity: 1; }
/* masqués par défaut : n'apparaissent QUE si le JS s'exécute (ajoute body.has-cursor) */
.cursor-dot, .cursor-ring, .cursor-label { display: none; }
body.has-cursor .cursor-dot, body.has-cursor .cursor-ring, body.has-cursor .cursor-label { display: block; }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring, .cursor-label { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cursor-dot, .cursor-ring, .cursor-label { display: none !important; } }
body.has-cursor { cursor: none; }
body.has-cursor a, body.has-cursor button { cursor: none; }

/* ---------- Transition de page (rideau « face de vinyle ») ---------- */
.page-transition { position: fixed; inset: 0; z-index: 1300; background: var(--night);
  transform: scaleY(0); transform-origin: bottom; pointer-events: none; }
.page-transition__seal { position: absolute; inset: 0; margin: auto; width: 80px; height: 80px; opacity: 0; }
.page-transition__seal svg { width: 100%; } .page-transition__seal svg path { fill: var(--white); }
.page-transition.is-leaving { animation: ptLeave .55s var(--ease) forwards; }
.page-transition.is-entering { transform: scaleY(1); transform-origin: top; animation: ptEnter .6s var(--ease) forwards; }
@keyframes ptLeave { 0% { transform: scaleY(0); transform-origin: bottom; } 100% { transform: scaleY(1); transform-origin: bottom; } }
@keyframes ptEnter { 0% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: top; } }
@media (prefers-reduced-motion: reduce) { .page-transition { display: none; } }

/* ---------- Reveals enrichis (cascade) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--rd, 0) * 90ms);
  /* Filet de sécurité : si le JS ne s'exécute pas, le contenu s'affiche seul après 3,5s. */
  animation: ka-reveal-safety 0s linear 3.5s forwards; }
.reveal.is-in { opacity: 1; transform: none; }
@keyframes ka-reveal-safety { to { opacity: 1; transform: none; } }
/* Reveal par lignes (titres) */
.reveal-lines { display: block; }
.reveal-lines .line { display: block; overflow: hidden; }
.reveal-lines .line > span { display: block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--li, 0) * 90ms); }
.reveal-lines.is-in .line > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-lines .line > span { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Hero : parallax + zoom doux ---------- */
.hero__media { will-change: transform; }
.hero__media img, .hero__placeholder { transform: scale(1.08); transition: transform 1.4s var(--ease); }
.ka-ready .hero__media img, .ka-ready .hero__placeholder { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .hero__media img, .hero__placeholder { transform: none !important; } }

/* ---------- Menu AA : cascade des rubriques ---------- */
.nav-overlay__list li { overflow: hidden; }
.nav-overlay__list a { transform: translateY(110%); transition: transform .7s var(--ease), color .4s var(--ease); }
.nav-overlay.is-open .nav-overlay__list a { transform: none; }
.nav-overlay.is-open .nav-overlay__list li:nth-child(1) a { transition-delay: .12s; }
.nav-overlay.is-open .nav-overlay__list li:nth-child(2) a { transition-delay: .18s; }
.nav-overlay.is-open .nav-overlay__list li:nth-child(3) a { transition-delay: .24s; }
.nav-overlay.is-open .nav-overlay__list li:nth-child(4) a { transition-delay: .30s; }
.nav-overlay.is-open .nav-overlay__list li:nth-child(5) a { transition-delay: .36s; }
.nav-overlay .nav-meta { opacity: 0; transition: opacity .5s var(--ease) .45s; }
.nav-overlay.is-open .nav-meta { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-overlay__list a { transform: none !important; }
  .nav-overlay .nav-meta { opacity: 1 !important; }
}

/* ---------- Hover « éditorial » sur la tracklist & liens ---------- */
.tracklist__row { transition: padding-left .5s var(--ease), color .4s var(--ease); }
.tracklist__row:hover .tracklist__num { color: var(--sky); }

/* ---------- Lien magnétique (le span suit) ---------- */
.magnetic { display: inline-block; will-change: transform; }