/* Mouvement progressif : le HTML reste lisible sans JavaScript. */
:root {
  --motion-ease: cubic-bezier(.2, .7, .25, 1);
}

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
}

.enhanced .reading-progress { opacity: 1; }

.reading-progress > span {
  display: block;
  height: 100%;
  background: var(--orange);
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
}

/* L’en-tête se fait plus compact lorsque l’on quitte l’accueil. */
.enhanced .site-header {
  position: fixed;
  transition: background-color .3s ease, border-color .3s ease;
}

.enhanced .header-inner { transition: height .35s var(--motion-ease); }

.enhanced .site-header.is-scrolled {
  background: #1c1c1cf5;
  border-color: #495b6780;
  box-shadow: 0 4px 25px #00000018;
}

.enhanced .site-header.is-scrolled .header-inner { height: 74px; }

.main-nav a { position: relative; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--motion-ease);
}

.main-nav a:hover::after,
.main-nav a.is-active::after,
.main-nav a:focus-visible::after { transform: scaleX(1); }
.main-nav a.is-active { color: var(--text); }
.header-cta.is-active { border-color: var(--orange); }

/* Une entrée cinématographique courte, puis une image au repos. */
.motion-ready .hero-art {
  inset: -36px;
  transform: translate3d(0, var(--hero-y, 0px), 0);
}

.motion-ready .hero-art img {
  animation: hero-arrive 4.2s var(--motion-ease) both;
}

.motion-ready .hero-copy > * {
  animation: hero-copy-arrive .95s var(--motion-ease) both;
}

.motion-ready .hero-copy > .eyebrow { animation-delay: .05s; }
.motion-ready .hero-copy > h1 { animation-delay: .17s; }
.motion-ready .hero-copy > .hero-description { animation-delay: .32s; }
.motion-ready .hero-copy > .hero-actions { animation-delay: .46s; }
.motion-ready .hero-bottom { animation: hero-copy-arrive 1s .65s var(--motion-ease) both; }

@keyframes hero-arrive {
  from { transform: scale(1.065); }
  to { transform: scale(1); }
}

@keyframes hero-copy-arrive {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Apparitions uniques : seules les parties qui ne sont pas encore lues bougent. */
.motion-ready .reveal-item {
  transition: opacity .75s var(--motion-ease),
              translate .75s var(--motion-ease);
  translate: 0 0;
}

.motion-ready .reveal-item:not(.is-revealed) {
  opacity: 0;
  translate: 0 28px;
}

.motion-ready .reveal-item.is-revealed { opacity: 1; }
.motion-ready .project-copy,
.motion-ready .status-panel,
.motion-ready .community-links { transition-delay: .1s; }
.motion-ready .universe-note:nth-child(2) { transition-delay: .08s; }
.motion-ready .universe-note:nth-child(3) { transition-delay: .16s; }

/* Petits gestes inspirés d’une pochette de jazz. Aucune piste audio. */
.section-label .rhythm-mark {
  display: inline-flex;
  height: 14px;
  align-items: center;
  gap: 3px;
  margin: 0 0 0 14px;
  vertical-align: middle;
}

.rhythm-mark > i { width: 2px; height: 5px; background: var(--orange); }
.rhythm-mark > i:nth-child(2),
.rhythm-mark > i:nth-child(4) { height: 10px; }
.rhythm-mark > i:nth-child(3) { height: 14px; }

.motion-ready .is-revealed .rhythm-mark > i {
  animation: rhythm .65s ease-in-out 4 alternate;
}

.motion-ready .is-revealed .rhythm-mark > i:nth-child(2) { animation-delay: .12s; }
.motion-ready .is-revealed .rhythm-mark > i:nth-child(3) { animation-delay: .24s; }
.motion-ready .is-revealed .rhythm-mark > i:nth-child(4) { animation-delay: .08s; }
.motion-ready .is-revealed .rhythm-mark > i:nth-child(5) { animation-delay: .18s; }

@keyframes rhythm {
  from { transform: scaleY(.45); }
  to { transform: scaleY(1); }
}

.record-sleeve { transition: transform .8s var(--motion-ease); }
.vinyl { transition: rotate 1.4s var(--motion-ease); }

/* La translation de révélation conserve l’échelle responsive du disque. */
.motion-ready .record-scene.is-revealed .vinyl {
  animation: record-cue 1.8s .15s var(--motion-ease) both;
}

@keyframes record-cue {
  from { transform: translateX(-25px) rotate(-40deg); }
  to { transform: translateX(0) rotate(0); }
}

/* Les interactions restent brèves et n’exigent aucun mouvement perpétuel. */
.text-link > span,
.header-cta > span,
.channel-link > span { transition: transform .25s var(--motion-ease); }
.text-link:hover > span,
.text-link:focus-visible > span { transform: translateX(4px); }
.header-cta:hover > span,
.channel-link:hover > span { transform: translate(2px, -2px); }

.button-primary { position: relative; overflow: hidden; isolation: isolate; }
.button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff26;
  transform: translateX(-105%) skewX(-15deg);
  transition: transform .55s var(--motion-ease);
  z-index: -1;
}
.button-primary:hover::before,
.button-primary:focus-visible::before { transform: translateX(105%) skewX(-15deg); }
.button-primary > span { transition: transform .25s var(--motion-ease); }
.button-primary:hover > span { transform: translate(2px, -2px); }

.universe-note h3 { transition: color .25s ease; }
.community-row { transition: background-color .3s ease; }

.footer-tools { display: flex; align-items: center; gap: 28px; }
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: var(--text); }
.motion-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
.motion-toggle:disabled { cursor: default; }
.motion-toggle-icon { width: 8px; height: 10px; border-inline: 2px solid var(--orange); }
.motion-toggle[aria-pressed="true"] .motion-toggle-icon {
  height: 0;
  border: 5px solid transparent;
  border-left: 7px solid var(--orange);
  border-right: 0;
}

/* La préférence manuelle est temporaire et n’écrit rien sur l’appareil. */
.motion-paused, .motion-paused *,
.motion-paused *::before, .motion-paused *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.motion-paused .hero-art { transform: none !important; }
.motion-paused .record-scene:hover .record-sleeve { transform: rotate(-9deg) !important; }
.motion-paused .record-scene:hover .vinyl { rotate: 0deg !important; }

@media (hover: hover) and (pointer: fine) {
  .motion-ready .record-scene:hover .record-sleeve { transform: rotate(-13deg) translateX(-5px); }
  .motion-ready .record-scene:hover .vinyl { rotate: 55deg; }
  .universe-note:hover h3 { color: var(--orange); }
  .community-row:hover { background-color: #1c1c1c07; }
  .strip-star { transition: transform .55s var(--motion-ease); }
  .identity-strip:hover .strip-star { transform: rotate(90deg); }
}

@media (max-width: 700px) {
  .enhanced .site-header.is-scrolled .header-inner { height: 68px; }
  .enhanced { scroll-padding-top: 86px; }
  .motion-ready .reveal-item:not(.is-revealed) { translate: 0 18px; }
  .footer-tools { flex-wrap: wrap; gap: 8px 23px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-art { transform: none !important; }
  .hero-copy > *, .hero-bottom, .reveal-item {
    opacity: 1 !important;
    translate: none !important;
  }
  .reveal-item:not(.is-revealed) { transform: none !important; }
  .record-scene:hover .record-sleeve { transform: rotate(-9deg) !important; }
  .record-scene:hover .vinyl { rotate: 0deg !important; }
}