/* motion.css — mouvements (DNA §8 + V2) : levée, course, assise, respiration du seuil, parallaxe, arrivée des masses.
   Le texte reste lisible sans mouvement et sans JS : seuls les motifs bougent, et seuls transform / opacity (translate, scale, rotate)
   sont animés dans le seuil. Tout est sous prefers-reduced-motion: no-preference. */

/* ── Images clés ─────────────────────────────────────────── */

/* levée : le soleil monte depuis l'horizon du svg (le svg coupe) */
@keyframes lever {
  from {
    translate: 0 48px;
  }

  to {
    translate: 0 0;
  }
}

/* le jour avance : en quittant le seuil, le soleil glisse sur son orbite (sens de lecture) */
@keyframes jour {
  from {
    rotate: 0deg;
  }

  to {
    rotate: calc(40deg * var(--sun-dir));
  }
}

/* assise : une course se déploie du bord extérieur vers la porte */
@keyframes assise {
  from {
    transform: scaleX(0);
  }

  to {
    transform: none;
  }
}

/* souffle : l'arche, le soleil, les assises et la porte respirent, lentement (7 à 9 s) */
@keyframes respire-arche {
  0%, 100% { scale: 1; }
  50% { scale: 1.012; }
}

@keyframes respire-soleil {
  0%, 100% { scale: 1; }
  50% { scale: 1.035; }
}

@keyframes derive-soleil {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(calc(0.7px * var(--sun-dir)), -0.9px); }
}

@keyframes eclat {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

/* lueur : le passage de la porte du nom respire comme une lanterne */
@keyframes lueur {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

/* dérive lente : au repos, le soleil du seuil glisse d'un rien le long de son orbite */
@keyframes derive-lente {
  0%, 100% { rotate: 0deg; }
  25% { rotate: calc(5deg * var(--sun-dir)); }
  75% { rotate: calc(-4deg * var(--sun-dir)); }
}

/* entrée du nom : les lettres montent sur la ligne de base */
@keyframes monte {
  from {
    opacity: 0;
    translate: 0 0.42em;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes entree {
  from {
    opacity: 0;
    translate: 0 1rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* arrivée d'une masse : le titre se découvre sous un masque, le reste se lève */
@keyframes titre {
  from {
    clip-path: inset(0 0 100% 0);
    translate: 0 0.5em;
  }

  to {
    clip-path: inset(0 0 -0.2em 0);
    translate: 0 0;
  }
}

@keyframes leve {
  from {
    opacity: 0;
    translate: 0 1.25rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* la masse suivante monte à travers un arc */
@keyframes masse {
  from {
    clip-path: inset(5rem 0 0 0 round 50vw 50vw 0 0 / 5rem 5rem 0 0);
  }

  to {
    clip-path: inset(0 0 0 0 round 0 0 0 0 / 0 0 0 0);
  }
}

/* ── Origine des courses (exception physique §7, échangée en RTL) ── */
.seuil__course--start,
.band__course--start,
.veillee__course--start {
  transform-origin: left center;
}

.seuil__course--end,
.band__course--end,
.veillee__course--end {
  transform-origin: right center;
}

:root[dir="rtl"] .seuil__course--start,
:root[dir="rtl"] .band__course--start,
:root[dir="rtl"] .veillee__course--start {
  transform-origin: right center;
}

:root[dir="rtl"] .seuil__course--end,
:root[dir="rtl"] .band__course--end,
:root[dir="rtl"] .veillee__course--end {
  transform-origin: left center;
}

/* ── Mouvement autorisé ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* l'introduction tient le seuil en attente : ses animations ne sont attachées qu'à la relève (elles partent alors de zéro).
     Pas de animation-play-state: paused ici : Chrome laisse « en attente » une animation née en pause et jamais peinte. */
  html.intro-on:not(.intro-open) .seuil,
  html.intro-on:not(.intro-open) .seuil * {
    animation-name: none;
  }

  /* ── Seuil · entrée ── */
  .seuil__sun {
    animation:
      lever var(--d-lever) var(--ease-lever) var(--d-lever-delay) backwards,
      respire-soleil 8s ease-in-out 2.4s infinite,
      derive-soleil 9s ease-in-out 2.4s infinite;
  }

  /* continuité : le soleil du seuil suit le défilement (navigateurs qui le savent) */
  @supports (animation-timeline: view()) {
    .seuil {
      view-timeline: --seuil block;
    }

    .seuil__sun {
      animation:
        lever var(--d-lever) var(--ease-lever) var(--d-lever-delay) backwards,
        respire-soleil 8s ease-in-out 2.4s infinite,
        derive-soleil 9s ease-in-out 2.4s infinite,
        jour linear both;
      animation-timeline: auto, auto, auto, --seuil;
      animation-range: normal, normal, normal, exit 0% exit 100%;
    }
  }

  .seuil__arch {
    transform-box: view-box;
    transform-origin: 50px 50px;
    animation: respire-arche 8s ease-in-out 2.2s infinite;
  }

  .seuil__course {
    animation:
      assise var(--d-assise) var(--ease-assise) 600ms both,
      eclat 7s ease-in-out 2s infinite;
  }

  .seuil__course--end {
    animation-delay: calc(600ms + var(--d-assise-stagger)), -3.5s;
  }

  /* après l'introduction, les assises sont déjà posées (elles arrivent de la scène) : seul l'éclat reste */
  .intro-ran .seuil__course {
    animation: eclat 7s ease-in-out 2s infinite;
  }

  .intro-ran .seuil__course--end {
    animation-delay: -3.5s;
  }

  /* le nom : lettres qui montent ; l'attente (--base) fait suivre la deuxième moitié */
  .seuil__title .ch {
    animation: monte 900ms var(--ease-lever) calc(520ms + (var(--base, 0) + var(--i, 0)) * 55ms) backwards;
  }

  .seuil__title .w:last-child {
    --base: 5;
  }

  .seuil__title .ch:nth-child(2) { --i: 1; }
  .seuil__title .ch:nth-child(3) { --i: 2; }
  .seuil__title .ch:nth-child(4) { --i: 3; }
  .seuil__title .ch:nth-child(5) { --i: 4; }
  .seuil__title .ch:nth-child(6) { --i: 5; }

  /* arabe : deux mots entiers */
  .seuil__title .w:not(:has(.ch)) {
    animation: monte 1000ms var(--ease-lever) 560ms backwards;
  }

  .seuil__title .w:not(:has(.ch)):last-child {
    animation-delay: 720ms;
  }

  /* la porte du nom : monte avec le nom (sauf si elle arrive de l'introduction) ; son passage luit comme une lanterne */
  .seuil__title .split__door {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: monte 900ms var(--ease-lever) 760ms backwards;
  }

  .intro-ran .seuil__title .split__door {
    animation: none;
  }

  .split__door .door__lit {
    animation: lueur 8s ease-in-out 2.6s infinite;
  }

  /* survol, appui, focus de la poignée : les battants s'écartent, le soleil monte et grandit */
  .door__leaf {
    transition: scale 420ms var(--ease-ouverture);
  }

  .door__sun {
    transition: translate 700ms var(--ease-lever), scale 700ms var(--ease-lever);
  }

  .seuil__echo,
  .seuil__words > * {
    animation: entree 900ms var(--ease-lever) 1100ms backwards;
  }

  .seuil__words > :nth-child(2) { animation-delay: 1200ms; }
  .seuil__words > :nth-child(3) { animation-delay: 1300ms; }

  /* ── Seuil · parallaxe : l'arche et le soleil suivent le pointeur (hero.js pose --px / --py, -1…1) ──
     Le ciel (svg, en px) bouge d'un cheveu, le soleil (unités du dessin) un peu plus ; ~120 ms d'amortissement. */
  .seuil__sky,
  .seuil__halo,
  .seuil__rail {
    translate: calc(var(--px, 0) * 5px) calc(var(--py, 0) * 3px);
    transition: translate 120ms ease-out;
  }

  .seuil__sun {
    translate: calc(var(--px, 0) * 1.4px) calc(var(--py, 0) * 1px);
    transition: translate 120ms ease-out;
  }

  /* le nom penche d'un souffle vers le pointeur, pivot sur sa ligne de base */
  .seuil__title .split {
    transform-origin: 50% 85%;
    rotate: calc(var(--px, 0) * 1.2deg);
    translate: calc(var(--px, 0) * -3px) calc(var(--py, 0) * -1.5px);
    transition: rotate 200ms ease-out, translate 200ms ease-out;
  }

  /* ── Seuil · le soleil qu'on fait tourner (hero-play.js) ── */
  .seuil__orbit,
  .seuil__halo::before,
  .seuil__knob {
    transition: rotate 720ms var(--ease-lever);
  }

  .seuil.is-turning .seuil__orbit,
  .seuil.is-turning .seuil__halo::before,
  .seuil.is-turning .seuil__knob {
    transition-duration: 90ms;
    transition-timing-function: linear;
  }

  .seuil__halo {
    transition: opacity 1200ms var(--ease-veille), translate 120ms ease-out;
  }

  .seuil__halo::before {
    transition: rotate 720ms var(--ease-lever), opacity 900ms var(--ease-veille);
  }

  .seuil__hint {
    transition: opacity 260ms ease-out;
  }

  /* au repos (6 s sans geste), le soleil dérive très lentement sur son orbite */
  .seuil__drift {
    animation: derive-lente 28s ease-in-out infinite;
    animation-play-state: paused;
  }

  .seuil.is-idle .seuil__drift {
    animation-play-state: running;
  }

  /* ── Bandes : la course se trace à l'arrivée ── */
  .band__course,
  .veillee__course {
    transition: transform var(--d-assise) var(--ease-assise);
  }

  .band__course--end,
  .veillee__course--end {
    transition-delay: var(--d-assise-stagger);
  }

  [data-pending] .band__course,
  [data-pending] .veillee__course {
    transform: scaleX(0);
  }

  /* repli sans animation-timeline : reveal.js pose .rv-wait puis .is-in */
  .rv-wait {
    opacity: 0;
    translate: 0 1.25rem;
  }

  .wall__title.rv-wait {
    opacity: 1;
    translate: 0 0.5em;
    clip-path: inset(0 0 100% 0);
  }

  .rv-wait.is-in {
    opacity: 1;
    translate: 0 0;
    transition: opacity 700ms var(--ease-assise), translate 700ms var(--ease-assise);
  }

  .wall__title.rv-wait.is-in {
    clip-path: inset(0 0 -0.2em 0);
    transition: clip-path 800ms var(--ease-assise), translate 800ms var(--ease-assise);
  }

  /* ── Arrivée des masses, liée au défilement (navigateurs qui le savent) ── */
  @supports (animation-timeline: view()) {
    .band__course {
      animation: assise linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 90%;
    }

    .veillee__course {
      animation: assise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    .band__door {
      animation: leve linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .wall__title {
      animation: titre linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 55%;
    }

    .wall__lede,
    .root,
    .etym__more,
    .reach__head,
    .plot,
    .oath {
      animation: leve linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 48%;
    }

    /* terre cuite du couchant, puis nuit de la veillée : chaque masse monte à travers un arc */
    .field,
    .veillee {
      animation: masse linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }

  /* ── Microinteractions : au survol et au focus ── */
  .oath__num,
  .root__latch,
  .band__door {
    transition: translate var(--d-hover) var(--ease-assise);
  }

  .oath:hover .oath__num,
  .oath:focus-within .oath__num {
    translate: 0 -0.12em;
  }

  .root:hover .root__latch {
    translate: 0 -0.2rem;
  }

  /* cadran : le soleil glisse vers l'heure et change de couleur */
  .dial__sun {
    transition:
      transform var(--d-course) var(--ease-course),
      color var(--d-course) var(--ease-course);
  }

  /* veille : pendant la bascule seulement (theme.js pose data-turning), tout fond ensemble */
  :root[data-turning],
  :root[data-turning] *,
  :root[data-turning] *::before,
  :root[data-turning] *::after {
    transition:
      background-color var(--d-veille) var(--ease-veille),
      color var(--d-veille) var(--ease-veille),
      border-color var(--d-veille) var(--ease-veille),
      box-shadow var(--d-veille) var(--ease-veille),
      fill var(--d-veille) var(--ease-veille) !important;
  }

  html {
    scroll-behavior: smooth;
  }
}