/* seuil.css — le seuil : le nom se tient dans la porte.
   Une seule largeur (--hero-arch-w) règle l'arche, les assises et le nom : la composition reste
   celle de la marque (arche r 42, soleil r 8.4, assises 4 / 5 / 4), le nom prenant la place du châtelet.
   Tout est enfant direct de la grille .seuil : rangée 1 = arche (+ mots au large), rangée 2 = nom sur les
   assises, rangée 3 = écho. Les assises sont positionnées dans la rangée 2, d'un bord d'écran à l'autre. */

.seuil {
  --gate-w: var(--hero-arch-w);
  --gate-bar: calc(var(--gate-w) * 0.04);
  --gate-gap: calc(var(--gate-w) * 0.05);
  --gate-ground: calc(2 * var(--gate-bar) + var(--gate-gap));
  --gate-lift: calc(var(--gate-w) * 0.025);   /* les pieds de l'arche se posent sur l'assise haute */
  /* distance du bord de l'écran au bord de l'arche (centrée sous 64rem) */
  --gate-lead: calc((100% - var(--gate-w)) / 2);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  padding-block: var(--s-7) var(--s-8);
  padding-inline: var(--margin);
  text-align: center;
}

/* ── L'arche et le soleil ──────────────────────────────── */
.seuil__sky,
.seuil__halo,
.seuil__rail {
  position: relative;
  grid-row: 1;
  grid-column: 1; /* les trois calques partagent la même case (sinon placement auto en colonnes implicites) */
  inline-size: var(--gate-w);
  aspect-ratio: 100 / 72;
}

.seuil__sky {
  overflow: hidden;
  color: var(--c-ink);
}

.seuil__arch {
  stroke-width: var(--stroke-display);
}

/* le soleil prend la couleur de l'heure (tokens.css, html[data-hour]) */
.seuil__sun {
  color: var(--hour-sun);
  transform-box: view-box;
  transform-origin: 50px 50px;
}

/* orbite : hero-play.js pose --sun-turn (angle autour du centre de l'arche) ; la dérive lente vit dans motion.css */
.seuil__orbit,
.seuil__drift {
  transform-box: view-box;
  transform-origin: 50px 50px;
}

.seuil__orbit {
  rotate: var(--sun-turn, 0deg);
}

/* ── Halo et poignée (créés par hero-play.js) : même boîte que le ciel, centrés sur le soleil ── */
.seuil__halo,
.seuil__rail {
  pointer-events: none;
}

/* bras : centre de l'arche = 50 % / (50 / 72) ; soleil à 0,168 × porte au-dessus */
.seuil__halo::before,
.seuil__knob {
  --arm: calc(var(--gate-w) * 0.168);
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 69.444%;
  margin-inline-start: calc(var(--size) / -2);
  margin-block-start: calc(var(--size) / -2 - var(--arm));
  inline-size: var(--size);
  block-size: var(--size);
  border-radius: 50%;
  transform-origin: 50% calc(50% + var(--arm));
  rotate: var(--sun-turn, 0deg);
}

.seuil__halo::before {
  --size: calc(var(--gate-w) * 0.78);
  content: "";
  background-image: radial-gradient(closest-side, color-mix(in srgb, var(--hour-sun) 40%, transparent), color-mix(in srgb, var(--hour-sun) 10%, transparent) 60%, transparent);
  opacity: var(--halo-a, 0.6);
}

:root[data-hour="midi"] .seuil__halo { --halo-a: 0.4; }
:root[data-hour="couchant"] .seuil__halo { --halo-a: 0.55; }
:root[data-hour="veillee"] .seuil__halo { --halo-a: 0.65; }

/* la poignée : un disque invisible posé sur le soleil (≥ 44 px), anneau de focus visible */
.seuil__knob {
  --size: max(var(--hit), var(--gate-w) * 0.2);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.seuil__knob:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.seuil.is-turning .seuil__knob {
  cursor: grabbing;
}

/* l'indication : sous le soleil, au survol ou au focus de la poignée */
.seuil__hint {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 77%;
  font-family: var(--f-label);
  font-size: var(--t-xs);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-ink-2);
  opacity: 0;
}

.seuil.is-hinting .seuil__hint {
  opacity: 1;
}

/* ── Les assises : d'un bord d'écran à l'autre, le passage laissé ouvert sous l'arche ── */
.seuil__ground {
  position: absolute;
  grid-row: 2;
  inset-inline: 0;
  inset-block-start: calc(-1 * var(--gate-lift));
  display: grid;
  grid-template-columns:
    calc(var(--gate-lead) + var(--gate-w) * 0.14)
    calc(var(--gate-w) * 0.72)
    minmax(0, 1fr);
  block-size: var(--gate-ground);
  pointer-events: none;
}

.seuil__course {
  box-sizing: border-box;
  border-block: var(--gate-bar) solid var(--c-terra);
}

.seuil__course--start {
  grid-column: 1;
}

.seuil__course--end {
  grid-column: 3;
}

/* ── Le nom : ligne de base au pied de l'assise basse, hampes entre les pieds de l'arche.
   Ligne de base = haut de boîte + --hero-name-baseline em (métriques de la police du nom et --hero-lh, voir tokens.css) ;
   pied d'assise = haut de rangée + 0.105 × porte. */
.seuil__title {
  grid-row: 2;
  position: relative;
  margin-block-start: calc(var(--gate-w) * 0.105 - var(--t-4xl) * var(--hero-name-baseline));
  font-family: var(--f-display);
  font-size: var(--t-4xl);
  font-weight: var(--w-display-hero);
  /* la largeur du nom suit --hero-name-ratio : le nom reste dans le passage entre les assises, avec de l'air de chaque côté */
  line-height: var(--hero-lh);
  letter-spacing: var(--track-display);
  white-space: nowrap;
}

/* le nom : lettres posées sur la ligne de base ; en arabe, mots entiers (les lettres se lient, on ne les coupe pas) */
.seuil__title .ch,
.seuil__title .w {
  display: inline-block;
}

/* ── Écho dans l'autre écriture + sens court : l'inscription sous la porte ── */
.seuil__echo {
  grid-row: 3;
  display: grid;
  justify-items: center;
  row-gap: var(--s-1);
  margin-block-start: calc(var(--gate-w) * 0.035);
  line-height: 1.4;
  color: var(--c-ink-2);
}

.seuil__script {
  font-size: var(--t-lg);
}

:root:lang(ar) .seuil__script {
  font-family: var(--f-display);
  font-weight: 400;
}

/* sens court, en capitales d'étiquette */
.seuil__gloss {
  font-family: var(--f-label);
  font-size: var(--t-xs);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-terra-text);
}

:root:lang(ar) .seuil__echo {
  margin-block-start: calc(var(--gate-w) * 0.07);
}

/* ── Les mots ──────────────────────────────────────────── */
.seuil__words {
  grid-row: 4;
  display: grid;
  justify-items: center;
  row-gap: var(--s-5);
  max-inline-size: 36rem;
  margin-block-start: var(--s-7);
}

.seuil__line {
  font-family: var(--f-title);
  font-size: var(--t-2xl);
  font-weight: var(--w-display);
  line-height: 1.1;
  letter-spacing: var(--track-title);
  max-inline-size: 17ch;
  text-wrap: balance;
}

:root:lang(ar) .seuil__line {
  line-height: var(--lh-display);
}

.seuil__sub {
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--c-ink-2);
  max-inline-size: 34ch;
}

/* Commencer : la petite porte s'allume au survol, s'ouvre (contour) à l'appui */
.seuil__enter {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: var(--hit);
  margin-block-start: var(--s-2);
  padding-inline-end: var(--s-1);
  font-family: var(--f-label);
  font-size: var(--t-sm);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration-color: transparent;
  text-underline-offset: 0.5em;
}

.seuil__enter .m-door {
  inline-size: 0.875rem;
  block-size: 1.875rem;
  transition: background-color var(--d-hover) ease-out, box-shadow var(--d-hover) ease-out;
}

.seuil__enter:hover {
  text-decoration-color: var(--c-link-underline);
}

.seuil__enter:hover .m-door {
  background-color: var(--c-door-hover);
}

.seuil__enter:active .m-door {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px var(--c-door);
}

/* ── ≥ 64rem : la porte au début, les mots debout sur l'assise, au large ── */
@media (min-width: 64rem) {
  .seuil {
    --gate-lead: max(var(--margin), (100% - var(--grid-max)) / 2);
    grid-template-columns: var(--gate-w) minmax(0, 34rem);
    justify-content: space-between;
    column-gap: var(--s-8);
    min-block-size: min(100svh - var(--head-h), 56rem);
    padding-inline: max(var(--margin), (100% - var(--grid-max)) / 2);
  }

  .seuil__sky,
  .seuil__halo,
  .seuil__rail,
  .seuil__title,
  .seuil__echo {
    grid-column: 1;
  }

  /* si les mots sont plus hauts que l'arche, l'arche descend avec eux jusqu'au sol */
  .seuil__sky,
  .seuil__halo,
  .seuil__rail {
    align-self: end;
  }

  .seuil__words {
    grid-row: 1;
    grid-column: 2;
    align-self: end;
    justify-items: start;
    margin-block-start: 0;
    padding-block-end: calc(var(--gate-lift) + var(--s-6));
    text-align: start;
  }

  .seuil__line {
    max-inline-size: 16ch;
  }
}

/* ── La porte du nom (.split__door, et celle de l'introduction) : cadre d'encre, passage éclairé, soleil levant ──
   Dessin 16 × 34 : cadre (evenodd), passage, soleil r 3,7, deux battants entrouverts (0,22) contre les jambages.
   Le soleil suit l'heure (html[data-hour]) ; --door-open (0…1) ouvre les battants et lève le soleil (survol, appui, focus). */
:root {
  --door-glow: color-mix(in srgb, var(--c-sun) 26%, var(--c-paper));
}

:root[data-theme="night"] {
  --door-glow: color-mix(in srgb, var(--c-sun) 72%, var(--c-paper));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --door-glow: color-mix(in srgb, var(--c-sun) 72%, var(--c-paper));
  }
}

:root[data-hour="aube"] { --door-sun-y: 7px; }
:root[data-hour="matin"] { --door-sun-y: 3.5px; }
:root[data-hour="midi"] { --door-sun-y: 0px; }
:root[data-hour="couchant"] { --door-sun-y: 4.5px; }
:root[data-hour="veillee"] { --door-sun-y: 8px; }

.door__frame,
.door__leaf {
  fill: var(--c-door);
}

.door__lit {
  fill: var(--c-paper-2);
  fill: var(--door-glow);
}

.door__sun {
  fill: var(--c-door-sun);
  transform-box: fill-box;
  transform-origin: center;
  translate: 0 calc(var(--door-sun-y, 0px) - 2.5px * var(--door-open, 0));
  scale: calc(1 + 0.15 * var(--door-open, 0));
}

.door__leaf {
  transform-box: fill-box;
  scale: calc(0.22 - 0.16 * var(--door-open, 0)) 1;
}

.door__leaf--a {
  transform-origin: 0% 50%;
}

.door__leaf--b {
  transform-origin: 100% 50%;
}

.seuil__title:hover .split__door,
.seuil.is-door-open .split__door {
  --door-open: 1;
}