/* scenes.css — scènes de la page (tour 3) : la méthode se bâtit, la rue des ouvrages s'ouvre, les masses arrivent, les liens se tracent.
   Principe : le contenu est TOUJOURS visible. Sans JS, ou mouvement réduit, aucune règle de ce fichier ne cache quoi que ce soit.
   scenes.js pose .sc-wait (en attente, animations en pause à leur image de départ) puis .is-in (elles jouent) sur chaque .plot ;
   les arrivées liées au défilement (serments, cadrans) passent par animation-timeline sous @supports.
   Seuls transform / opacity / translate / scale servent dans les boucles ; clip-path ne sert qu'aux poses uniques (briques). */

:root {
  --dir: 1;
  --sc-start: 0%;
  --sc-start-x: left;
  --sc-clip-from: inset(0 100% 0 0);
  --sc-ease: cubic-bezier(0.22, 0.8, 0.25, 1);
  --sc-settle: cubic-bezier(0.3, 1.5, 0.5, 1);
}

:root[dir="rtl"] {
  --dir: -1;
  --sc-start: 100%;
  --sc-start-x: right;
  --sc-clip-from: inset(0 0 0 100%);
}

/* ── Rail : flèches (clavier compris) et glisser à la souris ── */
.street__bar {
  display: contents;
}

.street__nav {
  display: none;
}

.el__key {
  fill: var(--c-sun);
}

.street__btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--hit, 2.75rem);
  block-size: var(--hit, 2.75rem);
  padding: 0;
  border: var(--stroke-hair, 1px) solid var(--c-ink-3);
  border-start-start-radius: 1.4rem;
  border-start-end-radius: 1.4rem;
  border-end-start-radius: 0.2rem;
  border-end-end-radius: 0.2rem;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
}

.street__btn svg {
  inline-size: 0.8rem;
  block-size: 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linecap: square;
  scale: var(--dir) 1;
}

.street__btn--prev svg {
  scale: calc(var(--dir) * -1) 1;
}

.street__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.street__btn:not(:disabled):hover {
  background-color: var(--c-ink);
  color: var(--c-paper);
}

.street.is-drag {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.street.is-drag a {
  pointer-events: none;
}

/* course de liaison entre étapes (4 px de terre cuite, fond CSS d'une boîte vide) : verticale entre les étapes empilées,
   posée sur la ligne de sol d'un mur au suivant dans le rail */
.plot__art {
  position: relative;
}

.plot__conn {
  position: absolute;
  z-index: 1;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  margin-inline-start: -2px;
  inline-size: 4px;
  block-size: var(--s-6);
  background-color: var(--c-terra);
  pointer-events: none;
}

@container wall (min-width: 40rem) {
  .street__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--s-4);
    margin-block-start: var(--s-6);
  }

  .street__bar .street__hint {
    margin-block-start: 0;
  }

  .street__nav:not([hidden]) {
    display: flex;
    gap: var(--s-2);
  }

  .street {
    cursor: grab;
  }

  /* d'un mur au suivant : le dessin (120 × 150, mur de 24,5 à 95,9) est centré et large de min(100 %, 13rem × 0,8) ;
     la course part du pied de ce mur et finit au pied du suivant, posée sur la ligne de sol */
  .plot__conn {
    --wall-half: calc(min(100%, 10.4rem) * 0.2975);
    inset-block-start: auto;
    inset-block-end: 0;
    inset-inline-start: calc(50% + var(--wall-half));
    margin-inline-start: 0;
    inline-size: calc(100% - 2 * var(--wall-half));
    block-size: 4px;
  }
}

/* ── Liens : une course se pose sous le lien ; boutons-portes : le soleil monte dans la porte ── */
.plot__link a,
.works__next a,
.veillee__mail a {
  background-image: linear-gradient(var(--c-terra), var(--c-terra));
  background-repeat: no-repeat;
  background-size: 0% 0.12em;
  background-position: 0% 100%;
}

:root[dir="rtl"] :is(.plot__link a, .works__next a, .veillee__mail a) {
  background-position: 100% 100%;
}

.btn__door {
  position: relative;
  overflow: hidden;
}

.btn__door::before {
  content: "";
  position: absolute;
  inset-inline: 0.12rem;
  inset-block-end: 0.18rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--c-veillee-door, #D9A862);
  translate: 0 160%;
}

@media (prefers-reduced-motion: no-preference) {
  .plot__link a,
  .works__next a,
  .veillee__mail a {
    transition:
      background-size var(--d-hover, 200ms) var(--ease-assise, ease-out),
      text-decoration-color var(--d-hover, 200ms) ease-out,
      text-underline-offset var(--d-hover, 200ms) ease-out;
  }

  .btn__door::before {
    transition: translate var(--d-ouverture, 500ms) var(--ease-ouverture, ease-out);
  }

  .btn--door:is(:hover, :focus-visible) .btn__door::before {
    translate: 0 0;
  }

  .etym__more > summary {
    transition: translate var(--d-hover, 200ms) var(--ease-assise, ease-out);
  }

  .etym__more > summary:hover {
    translate: calc(var(--dir) * 0.25rem) 0;
  }

  .plot--open .plot__text,
  .plot--open .plot__elev {
    transition: translate var(--d-hover, 200ms) var(--ease-assise, ease-out);
  }
}

.plot__link a:is(:hover, :focus-visible),
.works__next a:is(:hover, :focus-visible),
.veillee__mail a:is(:hover, :focus-visible) {
  background-size: 100% 0.12em;
}

.btn--door:is(:hover, :focus-visible) .btn__door::before {
  translate: 0 0;
}

/* ── Mouvement : étapes de la méthode, rue des ouvrages ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sc-lay {
    from { clip-path: var(--sc-clip-from); }
    to { clip-path: inset(0 0 0 0); }
  }

  @keyframes sc-settle {
    0% { translate: 0 -5px; }
    60% { translate: 0 0.6px; }
    100% { translate: 0 0; }
  }

  @keyframes sc-grow-y {
    from { scale: 1 0; }
    to { scale: 1 1; }
  }

  @keyframes sc-grow-x {
    from { scale: 0 1; }
    to { scale: 1 1; }
  }

  /* étape II : seule la moitié basse du mur est bâtie (le svg la coupe à y 108, soit 50,6 % du mur) */
  @keyframes sc-up-half {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(49% 0 0 0); }
  }

  @keyframes sc-up {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(-2px 0 0 0); }
  }

  @keyframes sc-key {
    0% { translate: 0 -30px; opacity: 0; }
    55% { translate: 0 0; opacity: 1; }
    75% { translate: 0 -2px; }
    100% { translate: 0 0; opacity: 1; }
  }

  @keyframes sc-sun {
    from { translate: 0 22px; opacity: 0; }
    to { translate: 0 0; opacity: 1; }
  }

  @keyframes sc-flip {
    from { transform: perspective(260px) rotateX(-90deg); opacity: 0; }
    to { transform: perspective(260px) rotateX(0deg); opacity: 1; }
  }

  @keyframes sc-shimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }

  @keyframes sc-par-sky {
    from { transform: translateX(calc(var(--dir) * -3px)); }
    to { transform: translateX(calc(var(--dir) * 3px)); }
  }

  /* en attente : les animations existent mais restent en pause à leur image de départ */
  .plot.sc-wait * {
    animation-play-state: paused !important;
  }

  /* étape I : piquets, cordeau, deux assises posées brique à brique */
  .plot:is(.sc-wait, .is-in) .el__stakes path:first-child {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: sc-grow-y 600ms var(--sc-settle) 100ms both;
  }

  .plot:is(.sc-wait, .is-in) .el__string {
    transform-box: fill-box;
    transform-origin: var(--sc-start) 50%;
    animation: sc-grow-x 500ms var(--sc-ease) 600ms both;
  }

  .plot:is(.sc-wait, .is-in) .el__course--b {
    animation:
      sc-lay 700ms steps(6, jump-end) 800ms both,
      sc-settle 700ms var(--sc-ease) 800ms both;
  }

  .plot:is(.sc-wait, .is-in) .el__course--a {
    animation:
      sc-lay 700ms steps(6, jump-end) 1500ms both,
      sc-settle 700ms var(--sc-ease) 1500ms both;
  }

  /* étape II : les jambages montent assise par assise depuis le sol (jamais le haut du mur par le bas), puis le linteau se pose */
  .plot--stage:is(.sc-wait, .is-in) .el__build[clip-path] > .el__gate {
    animation: sc-up-half 900ms steps(5, jump-end) 250ms both;
  }

  .plot:is(.sc-wait, .is-in) .el__course--lay {
    animation:
      sc-lay 600ms steps(5, jump-end) 1350ms both,
      sc-settle 600ms var(--sc-ease) 1350ms both;
  }

  /* étape III : le mur s'élève assise par assise, la porte se dresse, la clé de voûte tombe, le parapet se ferme */
  .plot--stage:is(.sc-wait, .is-in) .el__build:not([clip-path]) > .el__gate {
    animation: sc-up 1200ms steps(9, jump-end) 200ms both;
  }

  .plot--stage:is(.sc-wait, .is-in) .el__door {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: sc-grow-y 600ms var(--sc-ease) 1300ms both;
  }

  .plot:is(.sc-wait, .is-in) .el__key {
    animation: sc-key 700ms var(--sc-ease) 1900ms both;
  }

  .plot--stage:is(.sc-wait, .is-in) .el__sun {
    animation: sc-sun 1100ms var(--sc-ease) 100ms both;
  }

  /* le numéral bascule */
  .plot--stage:is(.sc-wait, .is-in) .plot__label {
    transform-origin: 50% 100%;
    animation: sc-flip 700ms var(--sc-settle) 150ms both;
  }

  /* course de liaison, posée quand l'étape est bâtie : vers le bas en pile, vers l'étape suivante dans le rail */
  @keyframes sc-lay-down {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0 0 0 0); }
  }

  .plot--stage:is(.sc-wait, .is-in) .plot__conn {
    animation: sc-lay-down 900ms var(--sc-ease) 2200ms both;
  }

  @container wall (min-width: 40rem) {
    .plot--stage:is(.sc-wait, .is-in) .plot__conn {
      animation-name: sc-lay;
    }
  }

  /* ouvrages : la rue se bâtit, de plus en plus loin */
  .reach__list > .plot:nth-child(2) { --sc-d: 180ms; }
  .reach__list > .plot:nth-child(3) { --sc-d: 360ms; }

  /* les murs des ouvrages montent assise par assise, comme ceux de la méthode (pas d'étirement vertical) */
  .plot--work:is(.sc-wait, .is-in) .el__build,
  .plot--walled:is(.sc-wait, .is-in) .el__build {
    animation: sc-up 1000ms steps(9, jump-end) calc(var(--sc-d, 0ms) + 100ms) both;
  }

  .plot--work:is(.sc-wait, .is-in) .el__sun {
    animation: sc-sun 1100ms var(--sc-ease) 200ms both;
  }

  /* baies murées : les assises se posent une à une, puis le chantier respire (opacité seule) */
  .plot--walled:is(.sc-wait, .is-in) .el__course--w1,
  .plot--walled:is(.sc-wait, .is-in) .el__course--w2 {
    transform-box: fill-box;
    transform-origin: var(--sc-start) 50%;
    animation: sc-grow-x 700ms var(--sc-ease) calc(var(--sc-d, 0ms) + 900ms) both;
  }

  .plot--walled:is(.sc-wait, .is-in) .el__course--w2 {
    animation-delay: calc(var(--sc-d, 0ms) + 1400ms);
  }

  .plot--walled:is(.sc-wait, .is-in) .el__rest {
    animation: sc-shimmer 3.4s ease-in-out calc(var(--sc-d, 0ms) + 2200ms) infinite;
  }

  .plot--walled:is(.sc-wait, .is-in) .el__frame {
    animation: sc-shimmer 3.4s ease-in-out calc(var(--sc-d, 0ms) + 3300ms) infinite;
    animation-direction: reverse;
  }

  /* parallaxe pendant qu'on fait défiler le rail : seul le ciel (le soleil) glisse ; les épures restent calées sur leurs murs */
  @supports (animation-timeline: scroll()) {
    @container wall (min-width: 40rem) {
      .street {
        scroll-timeline: --rail inline;
      }

      .plot--work:is(.sc-wait, .is-in) .el__sun,
      .plot--stage:is(.sc-wait, .is-in) .el__sun {
        animation:
          sc-sun 1100ms var(--sc-ease) 100ms both,
          sc-par-sky linear both;
        animation-timeline: auto, --rail;
      }
    }
  }

  /* ── Serments, cadrans, serments : marches (liés au défilement) ── */
  @keyframes sc-oath-step {
    from { translate: 0 1.5rem; }
    to { translate: 0 0; }
  }

  @keyframes sc-oath-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .oath {
    position: relative;
  }

  .oath::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(var(--stroke-hair, 1px) * -1);
    block-size: 3px;
    background-color: var(--c-field-num, var(--c-sun));
    transform-origin: var(--sc-start-x) 50%;
  }

  /* repli sans animation-timeline : reveal.js pose .rv-wait puis .is-in */
  .oath.rv-wait::after {
    scale: 0 1;
  }

  .oath.rv-wait.is-in::after {
    scale: 1 1;
    transition: scale 800ms var(--sc-ease) 250ms;
  }

  @supports (animation-timeline: view()) {
    .oath {
      animation:
        sc-oath-fade linear both,
        sc-oath-step steps(6, jump-end) both;
      animation-timeline: view(), view();
      animation-range: entry 4% entry 52%, entry 4% entry 60%;
    }

    .oath::after {
      animation: assise linear both;
      animation-timeline: view();
      animation-range: entry 25% entry 95%;
    }

    /* le soleil du cadran monte quand la salle arrive */
    .jamb__sun {
      animation: lever linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    /* la clé de la porte de bande bascule au passage */
    .band__num {
      animation: sc-flip linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 80%;
    }
  }
}