/* =========================================================
   OUR JOURNEY — rebuild (structure + style, code original)
   Tokens lus dans la recon : fond #000, crème #ECE3CE,
   corps Montserrat, display Longinus (metachors) → remplacée par Fraunces
   (variable, OFL, libre de droits) compressée horizontalement.
   ========================================================= */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Display : Fraunces (variable opsz 9-144 / wght 300-700, OFL — libre de droits) */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --black: #000;
  --near-black: #0a0a0a;
  --cream: #ece3ce;
  --white: #fff;
  --display: "Fraunces", serif;
  --body: "Montserrat", sans-serif;
  /* compression horizontale du display (titre condensé, look éditorial) */
  --sx: 0.56;
  --display-weight: 500;
  --display-opsz: 144;
  /* unité proportionnelle : 1u = 1px @1440 */
  --u: calc(100vw / 1440);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--black); }
body {
  font-family: var(--body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--white);
  overflow-x: hidden;
}

/* espaces de test avant/après la section */
.pre-space { height: 90vh; display: grid; place-items: center; color: #444;
  font-family: var(--body); letter-spacing: .3em; text-transform: uppercase; }
.post-space { height: 60vh; }

/* ---------- section ---------- */

.our-journey {
  position: relative;
  background: var(--black);
  overflow: hidden;
  padding-bottom: calc(144 * var(--u));
}

/* décor étoiles/arcs : à l'échelle naturelle du lottie (1920×1720),
   dans la bande des cartes, au-dessus des nuages noirs, sous les cartes
   (traits blancs → visibles sur les blobs noirs, comme la réf) */
.journey-sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(1290 * var(--u));
  pointer-events: none;
}

/* ---------- titre ---------- */

.journey-text-wrapper {
  position: relative;
  z-index: 1;
  height: calc(900 * var(--u));
  /* marge basse moins négative que -630 : descend le banc de nuages + la fusée
     pour dégager le titre (le nez ne mord plus le mot « CENTER »). La fusée est
     absolue DANS la smoke-stage → elle descend avec le nuage, raccord préservé. */
  margin: calc(72 * var(--u)) 0 calc(-470 * var(--u));
  padding-top: calc(60 * var(--u));
  text-align: center;
  /* titre remonté (hors flux, ne bouge pas la fusée) : la fusée a été remontée
     pour révéler le tube de fumée droit (cf. #ship-canvas top) ; on remonte le
     titre d'autant pour que le nez reste dégagé sous « CENTER ». */
  transform: translateY(calc(-120 * var(--u)));
}

.display-condensed {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-variation-settings: "opsz" var(--display-opsz);
  text-transform: uppercase;
  color: var(--white);
}

.journey-text-wrapper h2 {
  font-size: calc(380 * var(--u));
  line-height: 0.82;
  font-weight: 550;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* chaque ligne shrink-wrappée puis compressée autour de son propre centre —
   un inline débordant ne se centre pas de façon fiable */
.journey-text-wrapper h2 span {
  flex: none;
  white-space: nowrap;
  transform: scaleX(var(--sx));
  transform-origin: 50% 50%;
}

/* ---------- fumée + vaisseau ---------- */

.journey-smoke-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1935 / 1736;
  margin-bottom: calc(-10 * var(--u));
  /* le banc de nuages Lottie a un bas coupé net (clip de l'asset) ; on garnit
     le TRÈS bas de la stage en crème pour que sous ce clip il y ait toujours du
     crème (jamais le noir de la section). Transition placée bas (89→96 %), dans
     la zone déjà couverte par le nuage opaque → invisible en vue normale, ne
     comble que le clip. Haut transparent = ciel noir. */
  background: linear-gradient(to bottom, transparent 89%, var(--cream) 96%);
}
.journey-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.journey-clouds svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* traits d'échappement (overlay Lottie trails.json), au-dessus du nuage,
   sous la fusée — même cadrage que le nuage pour rester alignés sur le tube. */
.journey-trails {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* NOTRE variation vs l'original : les traits, nets près de la tuyère,
     s'estompent en fondu vers le bas (au lieu d'être coupés net). Matérialise
     « les traits disparaissent un peu plus bas ». */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, #000 71%, transparent 84%);
          mask-image: linear-gradient(to bottom, #000 62%, #000 71%, transparent 84%);
}
.journey-trails svg {
  display: block;
  width: 100%;
  height: 100%;
}

#ship-canvas {
  position: absolute;
  /* centre fusée d'origine : x 50.1%, y 42.6% du cadre lottie.
     Le canvas est étendu vers le bas (× --ship-extend) pour contenir le
     panache d'échappement 3D ; ship.js compense via setViewOffset, le
     vaisseau garde donc exactement son cadrage d'origine à l'écran. */
  /* Marge autour du cadrage d'origine du vaisseau (base = 59% de la stage) :
     en HAUT pour que le nez ne soit pas coupé au bob haut, en BAS pour la
     flamme. ship.js lit ces deux vars et décale le viewOffset en conséquence. */
  --ship-extend-top: 0.28;
  --ship-extend-bot: 0.10;
  --ship-extend-side: 0.20; /* marge latérale : les pods ne sont plus coupés au balayage */
  left: 27%;        /* recentré pour l'élargissement (centre fusée toujours x 50.1%) */
  /* fusée remontée de 12% de la stage (−2% → −14%) : la tuyère se raccorde
     désormais au SOMMET STABLE du tube de fumée de clouds.json (au lieu d'être
     posée trop bas sur le banc), révélant le long tube droit vertical comme sur
     l'original. Le titre est remonté d'autant (cf. .journey-text-wrapper) pour
     que le nez reste dégagé. */
  top: -14%;
  width: 46.2%;     /* = 33% × (1 + 2×0.20) ; ship.js compense → taille écran inchangée */
  height: 81.4%;    /* = 59% × (1 + 0.28 + 0.10) */
  pointer-events: none;
}

/* ---------- cartes ---------- */

.journey-steps {
  position: relative;
  z-index: 3;
  /* recouvre le bas du cadre lottie (sinon liseré noir entre nuages et bande crème) ;
     le padding compense pour garder les cartes à la même position */
  margin-top: calc(-140 * var(--u));
  padding-top: calc(86 * var(--u));
  background: var(--cream);
}
.steps-clouds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.steps-clouds-bottom {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: calc(210 * var(--u));
  margin-top: -1px;
}
.journey-step { position: relative; }

.journey-step {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: calc(404 * var(--u));
  padding: 0 calc(86 * var(--u)) 0 calc(58 * var(--u));
}
.journey-step.dx { justify-content: flex-end; }

.date-wrapper-journey,
.text-wrapper-journey {
  width: calc(400 * var(--u));
  height: calc(216 * var(--u));
  background: var(--black);
  border: 1px solid var(--white);
  border-radius: calc(20 * var(--u));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* carte 1 : la date en grand, légèrement décalée + inclinée.
   Décalage droite volontairement faible : la date (centrée) doit rester
   entièrement visible, non recouverte par la carte texte. */
.date-wrapper-journey {
  flex-direction: column;
  padding: calc(20 * var(--u));
  transform: translate(calc(18 * var(--u)), calc(48 * var(--u))) rotate(13deg);
}
.date-big {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  font-size: calc(104 * var(--u));
  line-height: 1;
  color: var(--white);
}
/* année en petit sous le mois — compose un vrai « composant date » lisible */
.date-year {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "opsz" 40;
  font-size: calc(30 * var(--u));
  line-height: 1;
  letter-spacing: calc(3 * var(--u));
  margin-top: calc(8 * var(--u));
  color: var(--cream);
}

/* carte 2 : l'explication brève, centrée */
.text-wrapper-journey {
  padding: calc(34 * var(--u));
  transform: rotate(-11deg);
}
.paragraph-journey {
  font-size: calc(17 * var(--u));
  line-height: calc(24 * var(--u));
  max-width: calc(320 * var(--u));
}

/* ---------- wordmark ---------- */

.journey-wordmark {
  position: relative;
  z-index: 1;
  margin-top: calc(300 * var(--u));
  display: flex;
  justify-content: center;
}
.wordmark-line {
  display: inline-flex;
  align-items: baseline;
  flex: none;
  /* en vw fixe : le wordmark occupe la même fraction de largeur à tous
     les breakpoints (cf. réf tablette/mobile) */
  font-size: 29.9vw;
  line-height: 0.9;
  transform: scaleX(0.52);
  transform-origin: 50% 50%;
  white-space: nowrap;
}
.eth-diamond {
  height: 20.9vw;
  width: auto;
  transform: scaleX(calc(1 / 0.52 * 0.95)); /* le losange ne doit pas être écrasé autant que les lettres */
  margin: 0 -0.4vw;
  align-self: center;
  color: var(--white);
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--black);
  color: var(--cream);
  text-align: center;
  padding: calc(120 * var(--u)) 24px calc(84 * var(--u));
  font-family: var(--body);
}
.footer-mark {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "opsz" 96;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: calc(46 * var(--u));
  line-height: 1;
  margin-bottom: calc(22 * var(--u));
}
.footer-mark .dim { color: rgba(236, 227, 206, 0.42); }
.footer-by {
  font-size: calc(15 * var(--u));
  letter-spacing: 0.01em;
  opacity: 0.88;
  margin-bottom: calc(10 * var(--u));
}
.footer-copy {
  font-size: calc(13 * var(--u));
  letter-spacing: 0.05em;
  opacity: 0.5;
}

/* ---------- reveal (état initial, GSAP prend la main) ---------- */

.journey-step { opacity: 0; }

/* =========================================================
   Breakpoints — 768 : mêmes paires, plus compact.
   ========================================================= */

@media (max-width: 880px) {
  :root { --u: calc(100vw / 900); }
  .journey-step { padding: 0 calc(40 * var(--u)); }
}

/* =========================================================
   375 : pile verticale — image au-dessus, carte texte dessous.
   ========================================================= */

@media (max-width: 560px) {
  :root { --u: calc(100vw / 420); }

  .journey-text-wrapper h2 { font-size: calc(150 * var(--u)); }
  .journey-text-wrapper {
    height: calc(360 * var(--u));
    margin: calc(40 * var(--u)) 0 calc(-140 * var(--u));
    transform: none; /* pas de remontée titre en mobile : layout fusée distinct (top -38%) */
  }

  /* la fusée mobile de la réf est grande et mord sur le titre : le canvas
     déborde du cadre fumée vers le haut. Round 2 : vaisseau légèrement
     réduit (132% → 110% avant extension) pour que la tuyère passe
     au-dessus du banc de nuages et que le panache soit visible, comme
     sur la réf mobile d'origine. height = 110% × --ship-extend. */
  /* mobile inchangé : marge d'extension entièrement en bas (comme avant) */
  #ship-canvas { --ship-extend-top: 0; --ship-extend-bot: 0.322; --ship-extend-side: 0;
    left: 12%; top: -38%; width: 76%; height: 145.4%; }

  .journey-step,
  .journey-step.dx {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(520 * var(--u));
    padding: 0;
  }

  .date-wrapper-journey,
  .text-wrapper-journey {
    width: calc(330 * var(--u));
    height: calc(190 * var(--u));
  }
  .date-wrapper-journey { transform: translate(calc(8 * var(--u)), calc(10 * var(--u))) rotate(6deg); }
  .journey-step.dx .date-wrapper-journey { transform: translate(calc(-8 * var(--u)), calc(10 * var(--u))) rotate(-6deg); }
  .text-wrapper-journey { transform: translate(0, calc(-6 * var(--u))) rotate(-5deg); }
  .journey-step.dx .text-wrapper-journey { transform: translate(0, calc(-6 * var(--u))) rotate(5deg); }

  .date-big { font-size: calc(96 * var(--u)); }
  .paragraph-journey { font-size: calc(15 * var(--u)); line-height: calc(21 * var(--u)); }

  .journey-wordmark { margin-top: calc(200 * var(--u)); }
}