/* ── Chrome du site — porté d'Oryzo ─────────────────────────────────────────
   Tout ce qui vit EN DEHORS du parcours de sections : en-tête, indicateur de
   scroll, invite de défilement, préchargement, lecteur plein écran.

   Chez Oryzo ces éléments sont sortis de `#ui` et posés directement dans le
   `body`, en `position: fixed`. Ils ne participent donc jamais au parcours :
   quand une section change, eux ne bougent pas. C'est ce qui donne
   l'impression d'un appareil dont l'écran change, plutôt que d'une page.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Le canvas WebGL ─────────────────────────────────────────────────────── */

#canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
}
#canvas canvas { width: 100%; height: 100%; }

/* La 3D reçoit les gestes seulement quand elle est le sujet — sinon elle
   volerait les clics du contenu posé par-dessus. */
html[data-grab='on'] #canvas { pointer-events: auto; }

/* ── Ossature ────────────────────────────────────────────────────────────── */

#ui { position: relative; z-index: var(--z-content); }

#site-content {
  position: relative;
  width: 100%;
  overflow-x: clip;
}

#pages-container {
  position: relative;
  width: 100%;
  z-index: 1;
  min-height: calc(var(--vh) * 100);
}

/* La page entière se révèle d'un bloc quand la scène est prête : on ne montre
   jamais un demi-chargement. */
.page {
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
html[data-ready='on'] .page { opacity: 1; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */

#site-header {
  position: fixed;
  left: var(--site-padding-x);
  /* La barre d'indicateur occupe le bord droit : la navigation s'arrête
     avant, sinon « Contact » passe dessous. */
  right: var(--site-padding-r);
  top: var(--site-padding-y);
  z-index: var(--z-nav);
  color: var(--color-white);
}

/* Oryzo pose 94×21 pour son logotype : un mot long et très plat. Notre marque
   est une éponge — au même rapport elle serait écrasée en pilule. On garde la
   hauteur de rang (21 px, `--site-header`) et on déduit la largeur du rapport
   réel du dessin, avec le nom posé à côté. */
#site-header-logo {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-white);
  transform-origin: 0 0.03em;
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--mono-font);
  font-size: var(--link-header);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  /* Invisible sur le premier écran — c'est la règle d'Oryzo, relevée telle
     quelle (`#site-header-logo { opacity: 0 }`). Le hero porte déjà son
     accroche en haut à gauche, exactement là ; le logo n'apparaît qu'une fois
     qu'on a quitté l'intro, quand il devient un repère de retour. */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
html[data-intro='off'] #site-header-logo {
  opacity: 1;
  pointer-events: auto;
}
#site-header-logo div {
  height: var(--site-header);
  aspect-ratio: 120 / 64;
}
#site-header-logo svg { width: 100%; height: 100%; }

#site-header-nav {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 11;
}
#site-header-nav ul {
  display: flex;
  gap: 2em;
}
/* Survoler la nav éteint les autres entrées : le lien visé reste seul net.
   Détail relevé chez Oryzo, et il change beaucoup la sensation de précision. */
#site-header-nav li { transition: opacity var(--dur-fast); }
#site-header-nav:hover li { opacity: 0.5; }
#site-header-nav:hover li.is-active,
#site-header-nav:hover li:hover { opacity: 1; }
#site-header-nav a { color: var(--color-white); }

/* Le filet sous la nav se dessine sous l'entrée active, et glisse d'une
   entrée à l'autre. Position et largeur sont posées par le JS. */
#site-header-line {
  position: absolute;
  top: 100%;
  margin-top: 0.2em;
  left: 0;
  width: 0;
  height: 1px;
  transition: transform var(--dur) var(--ease-out), width var(--dur) var(--ease-out);
}

/* Voile qui s'allume au survol de la nav : le contenu s'efface derrière. */
#site-header-blocker {
  position: fixed;
  inset: 0;
  background-color: rgb(32 25 20 / 0.75);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast);
}
#site-header-nav:hover ~ #site-header-blocker { opacity: 1; }

/* ── Menu mobile ─────────────────────────────────────────────────────────── */

#site-header-mobile-btn {
  position: absolute;
  right: 0;
  top: -0.5em;
  z-index: 11;
  font-family: var(--mono-font);
  font-size: var(--btn);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1em 1.75em 1em 2.5em;
  border: 1px dashed var(--color-white);
  border-radius: 3em;
}
#site-header-mobile-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.5em;
  width: 0.5em;
  height: 0.5em;
  margin-top: -0.25em;
  background-color: var(--color-white);
  border-radius: 3em;
}
#site-header-mobile-btn span:nth-child(2) { display: none; }

#site-header.is-menu-active #site-header-mobile-btn {
  background-color: var(--color-white);
  color: var(--color-black);
}
#site-header.is-menu-active #site-header-mobile-btn::before { background-color: var(--color-black); }
#site-header.is-menu-active #site-header-mobile-btn span:nth-child(1) { display: none; }
#site-header.is-menu-active #site-header-mobile-btn span:nth-child(2) { display: block; }

#site-header-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: min(78vw, 30rem);
  height: calc(var(--vh) * 100);
  background-color: var(--color-black);
  z-index: 10;
  padding: calc(var(--site-padding-y) * 3) calc(var(--site-padding-x) * 1.5);
  transition: transform var(--dur-slow) var(--ease-out);
  transform: translate(101%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#site-header.is-menu-active #site-header-mobile-menu { transform: translate(0); }

/* Le pied fixe et le menu partagent le même rang de peinture, et le pied
   vient après dans le DOM : sans ça, « défiler pour continuer » se retrouve
   posé PAR-DESSUS le panneau ouvert. */
html[data-menu='open'] #site-footer,
html[data-menu='open'] #scroll-indicator {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}

#site-header-mobile-menu ul {
  display: flex;
  flex-direction: column;
  font-size: calc(var(--screen-unit) * 37);
  line-height: 1.3;
}
#site-header-mobile-menu a {
  display: inline-block;
  border-bottom: 1px dashed transparent;
}
#site-header-mobile-menu a.is-active { border-bottom-color: var(--color-white); }
#site-header-mobile-menu .sub2 { color: var(--color-grey-brown); }
#site-header-mobile-bottom { margin-bottom: 0.5em; }

/* ── Invite de défilement, en bas ────────────────────────────────────────── */

#site-footer {
  position: fixed;
  left: var(--site-padding-x);
  right: var(--site-padding-r);
  bottom: var(--site-padding-y);
  z-index: var(--z-nav);
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  color: var(--color-white);
}

/* L'invite est CENTRÉE, pas collée à droite : le coin bas-droit est occupé
   par la vignette du showreel dans le hero, et par le tableau ailleurs. Un
   centrage absolu la met hors d'atteinte des deux. */
#site-footer-scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

#site-footer-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-white);
  /* Il bat au rythme de l'éponge : `--pulse` est écrit par la scène 3D. */
  transform: scale(calc(1 + var(--pulse, 0) * 0.9));
  opacity: calc(0.45 + var(--pulse, 0) * 0.55);
}

#site-footer-scroll {
  display: flex;
  align-items: center;
  gap: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Disparaît dès qu'on a compris le principe. */
  opacity: var(--scroll-hint, 1);
  transition: opacity var(--dur-slow) var(--ease-out);
}
#site-footer-scroll-icon { width: 1.4em; height: 1.4em; }
#site-footer-scroll-icon svg { width: 100%; height: 100%; animation: scroll-nudge 2.4s var(--ease-in-out) infinite; }

@keyframes scroll-nudge {
  0%, 60%, 100% { transform: translateY(0); opacity: 1; }
  30% { transform: translateY(25%); opacity: 0.6; }
}

/* ── Indicateur de scroll, sur le bord droit ─────────────────────────────
   Chez Oryzo c'est une barre crème collée au bord, dont le TEXTE est tourné
   à 90°. On reprend le procédé : `transform: rotate(90deg)` sur un bloc plus
   large que haut, avec origine en haut-gauche. */

#scroll-indicator {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: calc(var(--vh) * 100);
  z-index: var(--z-nav);
  pointer-events: none;
}

#scroll-indicator__bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 190px;
  background-color: var(--color-white);
  /* La position verticale suit la progression globale : elle est posée par le
     JS en `--y` (0 → 1). */
  transform: translateY(calc((var(--vh) * 100 - 190px) * var(--y, 0)));
}

#scroll-indicator__bar-inner {
  width: 190px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  transform-origin: 0 0;
  transform: rotate(90deg) translateY(-100%);
  text-transform: uppercase;
  font-family: var(--mono-font);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--color-black);
  white-space: nowrap;
}

#scroll-indicator__bar-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: var(--color-black);
  border-radius: 50%;
  margin-top: -3px;
  margin-right: 0.6em;
  vertical-align: middle;
}
#scroll-indicator__bar-text { display: inline-block; }

@media (max-width: 767.98px) {
  #scroll-indicator { display: none; }
  /* Valeur relevée chez Oryzo : sous 768 px l'invite descend à 11 unités,
     sinon elle passe sur deux lignes et heurte le point de gauche. */
  #site-footer-scroll { font-size: calc(var(--screen-unit) * 11); }
}

/* ── Préchargement ───────────────────────────────────────────────────────── */

#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--color-black);
  display: grid;
  place-items: center;
  transition: opacity var(--dur-slow) var(--ease-out);
}
#preloader[data-done='true'] {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

#preloader-inner {
  width: min(28rem, 70vw);
  display: flex;
  flex-direction: column;
  gap: 0.9em;
}
#preloader-count {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono-font);
  font-size: var(--sub2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-grey-brown);
}
#preloader-num { color: var(--color-white); }
#preloader-track {
  height: 1px;
  background: rgb(255 237 215 / 0.16);
}
#preloader-fill {
  height: 100%;
  width: 0%;
  background: var(--color-white);
  transform-origin: 0 50%;
}
#preloader-word {
  font-family: var(--display-font);
  font-size: var(--h5);
  letter-spacing: 0.02em;
  color: var(--color-grey-brown);
}

/* ── Lecteur plein écran ─────────────────────────────────────────────────── */

#video-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  background: rgb(16 9 4 / 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
#video-overlay[data-open='true'] {
  opacity: 1;
  visibility: visible;
}

#video-overlay__inner {
  position: relative;
  width: min(92vw, calc(var(--vh) * 100 * 16 / 9 * 0.8));
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  overflow: hidden;
}
#video-overlay__player,
#video-overlay__player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#video-overlay__close {
  position: absolute;
  top: var(--site-padding-y);
  right: var(--site-padding-x);
  padding: 0.9em 1.6em;
  border: 1px dashed var(--color-white);
  border-radius: 3em;
}

/* Halo et liseré partagés avec la vignette du hero. */
.video-overlay__glow,
.hero-video__glow {
  position: absolute;
  inset: -18%;
  background: radial-gradient(closest-side, rgb(220 80 0 / 0.55), transparent 70%);
  filter: blur(18px);
  opacity: 0.6;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}
.video-overlay__border,
.hero-video__border {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(255 237 215 / 0.35);
  border-radius: inherit;
  pointer-events: none;
}

/* ── Grain et curseur ────────────────────────────────────────────────────── */

.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0.05;
  background-image: var(--grain-src);
  animation: grain-shift 700ms steps(1) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(2%, 1%); }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  #site-footer-scroll-icon svg { animation: none; }
}