/* ============================================================
   AMALAB — scaled-home.css (V12)
   Home "Une méthode qui s'adapte…" — a lighter cousin of the method-page
   journey. The larger title stays fixed at the top of the pinned viewport for
   the complete journey and uses the same section margin as the rest of the
   page. The stage and phase copy are optically centred as one visible group
   (compensating for the letter footage's internal white space) and sit slightly
   above the mathematical midpoint; the word SCALED remains screen-centred from the first
   frame, with its S rendered by the letter footage on a white
   frame (box invisible on the white band → only the navy letter reads). As the
   pin scrolls, CALED fades while the S FLIPs left into the stage, then five
   morph clips scrub S→C→A→L→E→D. Under the frame sits the same caption block as
   the method page — name carousel (Scan. Coach. …), secondary-colour descriptor
   (Diagnostic, Adoption…), index (01/06) and the S—C—A—L—E—D rail — all driven
   by scroll. The right column keeps only a short line + a per-phase CTA.
   The right-hand reel reuses the approved phase titles from the full method
   page. Degrades: reduced motion / no JS → static "SCALED" + phases stacked.
   ============================================================ */

.scaled-home {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding-block: 0;
}

/* ---------- Pin: scroll room for the reveal + five morphs ----------
   Matches the benefits journey ("Notre métier…") pin length so both pinned
   sections hold scroll for the same distance and read as one system. */
.scaled-home-pin { height: calc(300svh - var(--nav-h)); }
.scaled-home-viewport {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  overflow: hidden;                 /* the travelling frame must never spill out */
  display: flex;
  flex-direction: column;
}

/* ---------- Title header (persistent within the sticky viewport) ---------- */
.sh-head {
  position: relative;
  flex: none;
  width: 100%;
  z-index: 3;
  text-align: center;
  padding-top: var(--section-y);
  padding-bottom: var(--s-8, 48px);
  pointer-events: none;
}
.sh-title { font-size: var(--step-h2); }

/* ---------- Scroll-linked arrival ----------
   js/scaled-home.js writes --arr (0→1) while the section enters the
   viewport, spilling ~15% into the pin: the title settles first, then the
   wordmark + stage rise together, still finishing as the reveal starts to
   scrub — motion is underway before the pin engages and the seam into the
   journey is continuous. The layout and the wordmark MUST share one window
   and one distance: the frame is transform-parked on the wordmark's S slot,
   and equal offsets keep it parked (and keep the FLIP measure invariant).
   Scrubbed from scroll (reversible), so no transition. var(--arr, 1)
   defaults to the settled state (no JS, reduced motion → .is-static, deep
   links). */
html.js .scaled-home-pin:not(.is-static) .sh-head {
  --arr-head: clamp(0, calc(var(--arr, 1) / 0.55), 1);
  opacity: var(--arr-head);
  transform: translateY(calc((1 - var(--arr-head)) * 22px));
}
html.js .scaled-home-pin:not(.is-static) .sh-layout {
  --arr-stage: clamp(0, calc((var(--arr, 1) - 0.18) / 0.77), 1);
  opacity: var(--arr-stage);
  transform: translateY(calc((1 - var(--arr-stage)) * 30px));
}
html.js .scaled-home-pin:not(.is-static) .sh-wordmark {
  --arr-stage: clamp(0, calc((var(--arr, 1) - 0.18) / 0.77), 1);
  opacity: var(--arr-stage);
  /* compose with the wordmark's own nav-height optical lift */
  transform: translateY(calc(var(--nav-h) / -2 + (1 - var(--arr-stage)) * 30px));
}

/* ---------- Layout: rail + stage left, copy right ---------- */
.sh-layout {
  --sh-optical-x: 0px;
  --sh-optical-y: 0px;
  position: relative;
  inset-inline-start: var(--sh-optical-x);
  top: calc(0px - var(--sh-optical-y));
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto auto;
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 0;
  align-content: center;
  padding-block: var(--s-7);
}
.sh-stage { grid-column: 1; grid-row: 2; align-self: start; }
.sh-copy  { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.sh-rail  { grid-column: 1; grid-row: 1; justify-self: center; margin-bottom: -48px; position: relative; z-index: 2; }

@media (min-width: 901px) {
  .sh-layout {
    --sh-optical-x: clamp(0px, calc(15vw - 135px), 80px);
    --sh-optical-y: clamp(var(--s-4), 2.2vw, var(--s-6));
  }
}

/* ---------- Stage : frame + caption + rail ---------- */
.sh-stage { min-width: 0; }
.sh-stage-inner {
  /* Keep the complete frame + caption inside the evenly spaced content area,
     including on shorter desktop viewports. The 160px floor is load-bearing:
     without it a wide-but-short window — a Pro Max in landscape reports
     932×430 — drove the subtraction below zero and the stage collapsed to a
     3px sliver. */
  width: min(100%, max(160px, calc(100svh - var(--nav-h) - var(--section-y) - 304px)));
  margin-inline: auto;
}
.sh-frame {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  transform-origin: center;
  will-change: transform;
  /* The name bar and the name are sized against THIS box, not the viewport.
     The frame shrinks with available height while a vw/px scale does not, so
     the bar's share of the frame drifted: 15% at 1920px but 22.9% at 768px.
     The letter artwork leaves a 20.2% bottom margin (measured on the tightest
     glyphs, S and C), so past that the opaque bar cut the letter's foot off.
     16.5% holds a constant, safe clearance at every frame size — and it is
     also what keeps "Automate." inside its card on short windows. */
  --sh-name-h: clamp(1.25rem, 16.5cqi, 4.25rem);
  container-type: inline-size;
}
.sh-frame video,
.sh-frame .sh-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* Hard cut — the engine parks inactive clips on the shared boundary frame. */
  transition: none;
}
.sh-frame video.is-active,
.sh-frame .sh-poster.is-active { opacity: 1; }
.sh-frame video { filter: brightness(1.02); } /* lift baked #FBFBFB → true #fff */
html:not(.js) .sh-frame .sh-poster--s { opacity: 1; }

/* Name carousel on the frame's bottom edge (Scan. Coach. …), docks in ---------- */
.sh-namecar {
  position: absolute;
  inset: auto 0 0 0;
  height: var(--sh-name-h);
  background: var(--white);
  z-index: 2;
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
}
.scaled-home-pin.is-docked .sh-namecar { opacity: 1; }
.sh-namecar-vp {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 15%, #000 23%, #000 85%, transparent 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 15%, #000 23%, #000 85%, transparent 93%, transparent 100%);
}
.sh-namecar-track {
  width: 100%;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.sh-name {
  height: var(--sh-name-h);
  width: 100%;
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.08em;
  font-family: var(--font-display);
  font-weight: 600;
  /* 9.9cqi is 60% of the 16.5cqi bar — the ratio the 1920px frame already
     used (44px name in a 68px bar), held constant now that the bar itself is
     container-relative. The mask above only reveals the middle 62% of the
     bar, so a name much larger than this loses its own descenders. */
  font-size: clamp(0.75rem, 9.9cqi, 2.75rem);
  line-height: 1;
  color: var(--navy);
}
.sh-name .dot { color: var(--orange); }

/* ---------- Rail : SCALED as one word, active letter in orange ---------- */
.sh-rail {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.08em;
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
}
.scaled-home-pin.is-docked .sh-rail { opacity: 1; }
.sh-rail-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  transition: color var(--t-ui) var(--ease-out);
}
.sh-rail-letter.is-active { color: var(--orange); }
.sh-rail-letter.is-done { color: var(--navy); }

/* ---------- Wordmark overlay : transparent S slot + CALED text ---------- */
.sh-wordmark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  font-size: clamp(3rem, 1.9rem + 5.4vw, 7rem);
  line-height: 1;
  transform: translateY(calc(var(--nav-h) / -2));
}
.sh-s-slot {
  display: inline-block;
  width: 1.42em;
  height: 1.42em;      /* square the stage scales into; S glyph ≈ CALED cap */
  flex: none;
  color: transparent;  /* keep the semantic S without duplicating the filmed glyph */
}
.sh-rest {
  /* tuck CALED against the S (the letter footage carries side padding) */
  margin-left: -0.24em;
}

/* ---------- Phase reel — short line + per-phase CTA, docks in ---------- */
.sh-copy {
  min-width: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}
.scaled-home-pin.is-docked .sh-copy {
  opacity: 1;
  transform: none;
}
.sh-reel {
  --reel-h: clamp(280px, 40svh, 360px);
  height: var(--reel-h);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 4%, #000 22%, #000 78%, transparent 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 4%, #000 22%, #000 78%, transparent 96%, transparent 100%);
}
.sh-reel-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.sh-item {
  height: var(--reel-h);
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* only the phase in the window is interactive (its CTA is clickable) */
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 320ms var(--ease-out);
}
.sh-item.is-active { pointer-events: auto; opacity: 1; }
.sh-item h3 {
  font-size: var(--step-h2);
  line-height: 1.18;
  max-width: 18ch;
}

/* ---------- Tablet / mobile : single column, tight ---------- */
@media (max-width: 900px) {
  .scaled-home-pin { height: calc(300svh - var(--nav-h)); }
  .sh-head { padding-top: clamp(12px, 3svh, var(--section-y)); }
  .sh-title { font-size: clamp(1.25rem, 5.5vw, 2.125rem); }
  .sh-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: clamp(6px, 1.2svh, var(--s-4));
    justify-items: center;
    text-align: center;
    padding-block: clamp(4px, 1.5svh, var(--s-6));
  }
  .sh-rail  { grid-column: 1; grid-row: 1; justify-self: center; }
  .sh-stage { grid-column: 1; grid-row: 2; }
  .sh-copy  { grid-column: 1; grid-row: 3; }
  .sh-stage-inner { width: 100%; max-width: 420px; }
  .sh-frame {
    width: max(110px, min(50vw, 210px, 28svh));
    margin-inline: auto;
  }
  .sh-wordmark { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  .sh-reel { --reel-h: clamp(150px, 30svh, 300px); }
  .sh-item { align-items: center; text-align: center; }
  .sh-item h3 { max-width: 20ch; font-size: clamp(1.25rem, 5.5vw, 1.75rem); }
}

/* ---------- Landscape phones : wide, but barely 320px tall ----------
   Stacking the stage over the reel needs ~370px and this window offers ~318px,
   so the stage climbed over the title. Side by side — the desktop arrangement,
   which is what a landscape window actually wants — the same content fits with
   room to spare. Applies to the two short-and-wide bands the mobile rules
   cover (667×375, 844×390) and mirrors the ≥901px rule below for 932×430. */
@media (max-width: 900px) and (max-height: 560px) {
  .sh-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--s-5);
    justify-items: stretch;
    align-items: center;
    text-align: left;
  }
  .sh-title { font-size: clamp(1.125rem, 3vw, 1.75rem); }
  .sh-frame { width: max(120px, min(38vw, 210px, 45svh)); }
  .sh-reel { --reel-h: clamp(140px, 56svh, 240px); }
  .sh-item { align-items: flex-start; text-align: left; }
  .sh-item h3 { font-size: clamp(1rem, 2.4vw, 1.25rem); }
}

/* Wide-and-short windows above the mobile breakpoint (a Pro Max in landscape
   reports 932×430) keep the desktop two-column layout but need the same
   vertical diet. */
@media (min-width: 901px) and (max-height: 620px) {
  /* Same split as the mobile block: the width budget belongs to the frame, not
     to the caption. Floored at 160px the stage box was narrower than the
     longest descriptor ("INDUSTRIALISATION", 170px), which then overhung it. */
  .sh-stage-inner { width: min(100%, 420px); }
  .sh-frame {
    width: max(140px, min(100%, calc(100svh - var(--nav-h) - var(--section-y) - 304px)));
    margin-inline: auto;
  }
  .sh-head { padding-top: clamp(10px, 2.5svh, var(--section-y)); }
  .sh-title { font-size: clamp(1.125rem, 2.4vw, 1.75rem); }
  .sh-layout { padding-block: clamp(4px, 1.5svh, var(--s-7)); }
  .sh-reel { --reel-h: clamp(120px, 44svh, 260px); }
  .sh-wordmark { font-size: clamp(2rem, 5vw, 4rem); }
}

/* ---------- Static layout : no JS, or reduced motion (JS adds .is-static) ----
   Pin collapses to normal flow: title, the SCALED rail, then the six phases
   as a plain list. The video stage and wordmark are hidden. */
html:not(.js) .scaled-home-pin,
.scaled-home-pin.is-static { height: auto; }
html:not(.js) .scaled-home-viewport,
.scaled-home-pin.is-static .scaled-home-viewport {
  position: static;
  height: auto;
  overflow: visible;
  display: block;
}
html:not(.js) .sh-head,
.scaled-home-pin.is-static .sh-head {
  position: static;
  padding-top: var(--section-y);
  padding-bottom: 0;
  margin-bottom: var(--s-5);
  pointer-events: auto;
}
html:not(.js) .sh-wordmark,
.scaled-home-pin.is-static .sh-wordmark { display: none; }
html:not(.js) .sh-stage,
.scaled-home-pin.is-static .sh-stage { display: none; }
html:not(.js) .sh-rail,
.scaled-home-pin.is-static .sh-rail {
  opacity: 1;
  transition: none;
  justify-content: center;
  margin-bottom: var(--s-4);
}
html:not(.js) .sh-rail-letter,
.scaled-home-pin.is-static .sh-rail-letter {
  font-size: clamp(2rem, 8vw, 3.5rem);
}
html:not(.js) .sh-copy,
.scaled-home-pin.is-static .sh-copy {
  opacity: 1;
  transform: none;
  transition: none;
}
html:not(.js) .sh-reel,
.scaled-home-pin.is-static .sh-reel {
  height: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
html:not(.js) .sh-reel-track,
.scaled-home-pin.is-static .sh-reel-track {
  transform: none !important;
  gap: 0;
}
html:not(.js) .sh-item,
.scaled-home-pin.is-static .sh-item {
  height: auto;
  display: block;
  opacity: 1;
  pointer-events: auto;
  border-top: 1px solid var(--border);
  padding-block: var(--s-4);
}
html:not(.js) .sh-layout,
.scaled-home-pin.is-static .sh-layout {
  inset-inline-start: 0;
  top: 0;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  text-align: center;
  padding-block: 0 var(--s-7);
}
.scaled-home-pin.is-static .sh-rail { grid-row: 1; }
.scaled-home-pin.is-static .sh-copy { grid-row: 2; }

/* ---------- Reduced motion : no travel, no scrub ---------- */
/* ---------- SCALED CTA button after the journey ---------- */
.sh-cta {
  text-align: center;
  padding-block: var(--s-8) var(--section-y);
}

/* ---------- Reduced motion : no travel, no scrub ---------- */
@media (prefers-reduced-motion: reduce) {
  .sh-frame video { display: none; }
  .sh-frame,
  .sh-frame .sh-poster,
  .sh-copy,
  .sh-item,
  .sh-reel-track,
  .sh-namecar,
  .sh-caption,
  .sh-rail { transition: none; }
}