/* Accueil : le cavalier sort de la toile (avec cavalier.js)
   Sans JS ou en mouvement réduit : la toile est simplement accrochée, à plat, sans ombre. */
.cavalier { position: relative; padding: clamp(56px, 8vw, 110px) 0; }
.cav-head { position: relative; z-index: 1; }
.cav-head h2 { margin: 0 0 .4em; }
.cav-art { display: block; width: min(88%, 620px); margin: 2.4rem auto 0; }
.cav-art img { display: block; width: 100%; height: auto; transition: opacity .4s; }
.cavalier canvas, .cav-cue { display: none; }

/* Séquence épinglée : 240vh, dont ≈ 1,4 écran de défilement pendant lequel la scène reste en place */
.cavalier.anim { height: 240vh; padding: 0; }
.cavalier.anim .cav-stage { position: sticky; top: var(--header); height: calc(100svh - var(--header)); overflow: hidden; container-type: size;
  /* La salle s'éteint : --nuit (0 → 1) est posé par cavalier.js */
  background: color-mix(in oklab, var(--night) calc(var(--nuit, 0) * 100%), var(--paper)); }
.cavalier.anim canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.cavalier.anim .cav-head { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.cavalier.anim .cav-head h2 { width: min-content; }
.cavalier.anim .cav-head h2 em { white-space: nowrap; }
/* Le titre bascule d'un coup à mi-chemin (jamais de gris sur gris pendant la transition) */
.cavalier.anim .cav-head h2 { transition: color var(--d-court) linear; }
.cavalier.anim .eteinte .cav-head h2 { color: var(--on-night); }
.cavalier.anim .cav-art { position: absolute; margin: 0; --pw: var(--cav-pw, min(44cqw, 72cqh)); width: var(--pw); left: calc(50% - var(--pw) / 2); top: calc(48cqh - var(--pw) / 2); }
.cavalier.ready .cav-art img { opacity: 0; }

/* Indicateur « ↓ » : s'efface dès qu'on défile dans la séquence */
.cavalier.anim .cav-cue { display: block; position: absolute; left: 50%; bottom: 14px; z-index: 3; translate: -50% 0; pointer-events: none;
  font: 400 var(--t-chapo)/1 var(--serif); color: var(--ink-soft); transition: opacity var(--d-moyen) var(--courbe-sortie); }
.cavalier.anim .cav-cue.off { opacity: 0; }

@media (max-width: 699px), (max-aspect-ratio: 4/5) {
  .cavalier.anim .cav-head { top: 0; transform: none; padding-top: 22px; }
  .cavalier.anim .cav-head h2 { width: auto; }
  .cavalier.anim .cav-art { --pw: var(--cav-pw, min(76cqw, 50cqh)); top: var(--cav-top, calc(50cqh - var(--pw) / 2)); }
}

/* Storyboard de l'accueil, P2 : pendant que la sélection recule, la scène du cavalier arrive de la profondeur
   (liée au défilement, de l'entrée de la section à son épinglage). Propriétés individuelles (scale, translate) :
   elles se composent avec les transformations de mise en page du titre. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cavalier.anim { view-timeline: --cavalier block; }
    .cavalier.anim .cav-stage > canvas, .cavalier.anim .cav-head, .cavalier.anim .cav-art { animation: cav-arrivee linear both; animation-timeline: --cavalier; animation-range: entry 0% entry 92%; }
    .cavalier.anim .cav-head { animation-range: entry 20% entry 100%; }
  }
}
@keyframes cav-arrivee { from { opacity: .15; scale: .8; filter: blur(8px); } }
@media (max-width: 699px) { @keyframes cav-arrivee { from { opacity: .15; scale: .84; } } }