@font-face {
  font-family: "Aeonik";
  src: url("fonts/Aeonik-Regular.woff2") format("woff2"),
    url("fonts/Aeonik-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000;
  --white: #fff;
  --gutter: 24px;              /* marges Figma : 24px */
  --fs-nav: 14px;
  --fs-name: 5vw;              /* 64px sur une frame de 1280px */
  --tracking: -0.02em;         /* -0.28px / 14px et -2.18px / 109px */
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: "Aeonik", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/*
 * Empilement :
 *   0  photo du hero
 *   1  couche fluide (fixe) — cadre noir percé dans le hero, trace légère ailleurs
 *   2  textes / contenu
 * Aucun conteneur ne doit créer de contexte d'empilement (pas de z-index,
 * transform, opacity < 1… sur .hero ou main), sinon la photo passerait au-dessus.
 */
.fluid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

.content {
  position: relative;
  z-index: 2;
}

/* ---------- Lenis (règles recommandées par la librairie) */

html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Navigation (fixe, au-dessus de tout) */

.nav {
  position: fixed;
  top: var(--gutter);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: var(--fs-nav);
  line-height: 1;
  letter-spacing: var(--tracking);
}

.nav__link {
  color: inherit;
  text-decoration: none;
  text-box: trim-both cap alphabetic;
}

/* ---------- Hero */

/* Course de scroll de la transition : 0 → 70vh les mots s'écartent (hero épinglé),
   puis le globe arrive pendant que le hero (devenu transparent) s'en va */
.hero-wrap {
  position: relative;
  height: 170vh;
  height: 170svh;
}

.hero {
  position: sticky;            /* sticky crée un contexte d'empilement : on le place */
  z-index: 2;                  /* au-dessus de la couche WebGL (transparent → le canvas reste visible) */
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
}

/* Cadrage Figma : largeur 115.62 %, décalée vers le haut de ~9 % de sa hauteur */
/* Fixée à l'écran : l'image ne bouge jamais, même quand le hero remonte */
.hero__photo {
  position: fixed;
  top: 0;
  left: 0;
  width: 115.625vw;
  height: auto;
  min-height: 110vh;
  object-fit: cover;
  object-position: left top;
  translate: 0 -8.98%;
  user-select: none;
  pointer-events: none;
}

/* Tant que le fluide n'a pas dessiné le cadre noir (ou sans WebGL), on cache la photo */
html:not(.is-fluid) .hero__photo { visibility: hidden; }
/* Photo dessinée par WebGL (avec glitch) : l'<img> ne sert plus qu'au cadrage */
html.is-photo-gl .hero__photo { visibility: hidden; }

.hero__name {
  position: absolute;
  top: 46.63%;                 /* 388px / 832px */
  left: var(--gutter);
  right: var(--gutter);
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-name);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tracking);
  white-space: nowrap;
  pointer-events: none;
}

.hero__name span {
  text-box: trim-both cap alphabetic;
  will-change: transform;
}

/* ---------- Loader (intro.js) */

html.is-intro,
html.is-intro body { overflow: hidden; }

/* Nom invisible tant qu'il n'est pas placé au centre (évite un flash) */
html.is-intro .hero__name span { opacity: 0; }
html.is-intro-in .hero__name span { opacity: 1; }

/* Navigation : apparaît une fois les mots écartés */
.nav { transition: opacity 0.9s ease 0.2s; }
html.is-intro .nav { opacity: 0; pointer-events: none; }
html.is-intro-split .nav { opacity: 1; }

/* Nom dessiné par WebGL (effet arc-en-ciel au contact de l'encre) :
   le texte HTML reste présent (accessibilité, sélection) mais invisible */
html.is-text-gl .hero__name { color: transparent; }

/* ---------- Projets : globe */

.projects {
  position: relative;
  height: 100vh;
  height: 100svh;
}

/* Arrivé sur le globe : la page ne défile plus, tout pilote le globe */
html.is-globe-locked,
html.is-globe-locked body { overflow: hidden; overscroll-behavior: none; }
html.is-globe-locked .projects__stage { touch-action: none; }

.projects__stage {
  position: sticky;            /* sticky crée un contexte d'empilement : on le place au-dessus */
  z-index: 2;                  /* de la couche WebGL (transparent, donc le globe reste visible) */
  top: 0;
  height: 100vh;
  height: 100svh;
  cursor: grab;
  touch-action: pan-y;         /* tactile : glisser horizontal = globe, vertical = page */
  user-select: none;
  -webkit-user-select: none;
}

.projects__stage.is-dragging { cursor: grabbing; }

.projects__hint {
  position: absolute;
  left: var(--gutter);
  margin: 0;
  font-size: var(--fs-nav);
  line-height: 1;
  letter-spacing: var(--tracking);
  pointer-events: none;
}

.projects__hint {
  bottom: var(--gutter);
  opacity: 0.6;
}

@media (max-width: 640px) {
  .hero__name {
    flex-direction: column;
    gap: 0.25em;
    font-size: 12vw;
  }
  .hero__name span:last-child { align-self: flex-end; }
}