/* Carbon V4 : signature sequence (the pinned opening of the home page) */

.sig {
  --sig-length: 1080;
  position: relative;
  height: calc(var(--sig-length) * 1vh + 100vh);
  background: var(--bg, #0a0a0a);
}
@supports (height: 100lvh) {
  .sig { height: calc(var(--sig-length) * 1lvh + 100lvh); }
}
.sig-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg, #0a0a0a);
}
@supports (height: 100lvh) {
  .sig-stage { height: 100lvh; }
}
.sig-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.sig.is-ready .sig-canvas { opacity: 1; }
.sig.is-hovering-card .sig-canvas { cursor: default; }

/* static first paint and no-WebGL fallback: the dark plate */
.sig-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: opacity 0.9s ease;
}
.sig.is-ready .sig-poster { opacity: 0; }
@media (max-aspect-ratio: 9/10) {
  .sig-poster { object-fit: contain; object-position: 50% 46%; transform: scale(1.36); }
}

/* ---------------- copy over the stage */
.sig-copy { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sig-copy a, .sig-copy button { pointer-events: auto; }
[data-show] { opacity: 0; visibility: hidden; will-change: opacity, transform; }
.sig:not(.is-live) [data-show] { opacity: 1; visibility: visible; }

.sig-eyebrow {
  margin: 0 0 18px;
  font: 600 11px/1.2 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
}
.sig-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 4.1vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.sig-title em { font-style: italic; color: var(--champagne-soft); }
.sig-eyebrow { text-wrap: balance; }
@media (max-width: 520px) { .sig-eyebrow .eb-long { display: none; } }

.sig-intro { position: absolute; left: 50%; top: clamp(84px, 11.5vh, 124px); width: min(92vw, 760px); margin-left: calc(min(92vw, 760px) / -2); text-align: center; }
.sig-intro .sig-title { font-size: clamp(30px, 3.1vw, 48px); line-height: 1.08; }
.sig-intro .sig-title em { display: block; }
/* on a desktop screen the line stays whole, so it keeps its distance from the car; tablets and phones keep two lines */
@media (min-width: 901px) and (min-aspect-ratio: 9/10) {
  .sig-intro { width: min(94vw, 1180px); margin-left: calc(min(94vw, 1180px) / -2); }
  .sig-intro .sig-title em { display: inline; }
}

/* the sequence moves every [data-show] element with its own transform: the cue is centred by its margins, never by a translate */
.sig-cue {
  position: absolute; left: 0; right: 0; bottom: 28px; width: max-content; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none;
  font: 500 10px/1 var(--sans); letter-spacing: 0.26em; text-transform: uppercase; color: rgba(242, 237, 228, 0.62);
}
/* the tracking after the last letter would set the word a hair to the left of its line */
.sig-cue span { margin-right: -0.26em; }
.sig-cue i { display: block; width: 1px; height: 38px; background: linear-gradient(rgba(242, 237, 228, 0.7), rgba(242, 237, 228, 0)); transform-origin: top; animation: sig-cue 2.4s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes sig-cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.sig-caption {
  position: absolute; left: var(--gutter); bottom: clamp(40px, 8vh, 84px);
  margin: 0; font: 500 11px/1.6 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: #1b1712;
}
.sig-caption b { display: block; font: 500 italic clamp(22px, 2vw, 30px)/1.1 var(--serif); letter-spacing: 0; text-transform: none; color: #1b1712; margin-bottom: 6px; }

/* the collection: the title at the centre, the cars all around it (drawn by the canvas) */
.sig-collection {
  position: absolute; left: 50%; top: 50%;
  width: min(92vw, 1000px); margin: 0; text-align: center;
  transform: translate3d(-50%, -50%, 0) scale(calc(1 + var(--sig-hold, 0) * 0.05));
  will-change: transform;
}
.sig-collection .sig-eyebrow { margin-bottom: clamp(14px, 2.4vh, 28px); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.6); }
.sig-collection .sig-title {
  font-size: clamp(46px, min(6vw, 10.8vh), 112px);
  line-height: 0.95; letter-spacing: -0.02em;
  text-shadow: 0 2px 42px rgba(0, 0, 0, 0.6);
}
.sig-collection .sig-line { display: block; padding: 0.04em 0; }
.sig-collection .sig-title em { color: var(--champagne-soft); }

.sig-final {
  position: absolute; left: var(--gutter); top: 50%;
  max-width: min(44vw, 600px);
  transform: translateY(-50%);
}
.sig-final-inner { will-change: opacity, transform; }
.sig-final .sig-title { font-size: clamp(40px, 5vw, 80px); }
/* two lines, always: « Votre collection, » then « dans votre iPhone. » */
.sig-final .sig-title em { display: block; }
.sig-final p.sig-lead { margin: 26px 0 0; max-width: 38ch; font: 400 16px/1.6 var(--sans); color: rgba(242, 237, 228, 0.72); text-wrap: pretty; }
.sig-final .sig-status { margin-top: 34px; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.sig-meta { font: 500 11px/1.4 var(--sans); letter-spacing: 0.08em; color: rgba(242, 237, 228, 0.5); }

/* chapters + skip */
.sig-chapters {
  position: absolute; left: var(--gutter); bottom: 22px; z-index: 3;
  display: flex; gap: 22px; align-items: center;
  font: 500 10px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
}
.sig-chapters a { color: rgba(242, 237, 228, 0.42); text-decoration: none; transition: color .4s ease; padding: 8px 0; }
.sig-chapters a span { margin-right: 8px; color: rgba(201, 169, 97, 0.7); font-variant-numeric: tabular-nums; }
.sig-chapters a[aria-current] { color: rgba(242, 237, 228, 0.9); }
.sig-chapters a:hover { color: var(--ink); }
.sig-skip {
  position: absolute; right: var(--gutter); bottom: 22px; z-index: 3; padding: 8px 0;
  font: 500 10px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(242, 237, 228, 0.5); text-decoration: none; transition: color .3s ease;
}
.sig-skip:hover { color: var(--ink); }
.sig-chapters, .sig-skip { transition: color .4s ease, opacity .5s ease, visibility .5s; }
.sig[data-chapter="3"] .sig-chapters, .sig[data-chapter="3"] .sig-skip { opacity: 0; visibility: hidden; }
.sig[data-chapter="0"] .sig-chapters a, .sig[data-chapter="0"] .sig-skip { color: rgba(242, 237, 228, 0.46); }
.sig.is-bright .sig-chapters a, .sig.is-bright .sig-skip { color: rgba(27, 23, 18, 0.62); }
.sig.is-bright .sig-chapters a[aria-current] { color: rgba(27, 23, 18, 0.9); }
.sig.is-bright .sig-chapters a span { color: rgba(120, 92, 40, 0.8); }

/* light plate behind the chrome: keep the small chrome legible */
.sig-chrome-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 0.35));
  opacity: calc(var(--sig-shade, 0));
}

/* phones held sideways: too short for the lead, keep the title and the badge */
@media (min-aspect-ratio: 9/10) and (max-height: 480px) {
  .sig-final p.sig-lead { display: none; }
  .sig-final .sig-status { margin-top: 22px; }
}

/* ---------------- mobile */
@media (max-aspect-ratio: 9/10) {
  .sig { --sig-length: 920; }
  .sig-intro { top: calc(env(safe-area-inset-top, 0px) + 92px); }
  .sig-intro .sig-title { font-size: clamp(28px, 8vw, 40px); }
  .sig-caption { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 96px); color: #f2ede4; }
  .sig-caption b { color: #f2ede4; }
  .sig-collection { top: 40%; }
  .sig-collection .sig-title { font-size: clamp(36px, 11.2vw, 80px); }
  .sig-final { top: calc(env(safe-area-inset-top, 0px) + 82px); left: var(--gutter); right: var(--gutter); max-width: none; transform: none; text-align: center; }
  /* the tracking after the last letter would push the centred eyebrow a hair to the left */
  .sig-final .sig-eyebrow { padding-left: 0.22em; }
  .sig-final .sig-title { font-size: clamp(30px, 8.6vw, 42px); }
  .sig-final p.sig-lead, .sig-final .sig-status { display: none; }
  .sig-chapters { display: none; }
  .sig-skip { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
  .sig-skip .skip-long { display: none; }
  .sig-cue { bottom: 64px; }
}

/* ---------------- static composition (reduced motion, no WebGL) */
.sig.is-static { height: auto; }
.sig.is-static .sig-stage { position: relative; height: auto; min-height: 100vh; display: grid; }
.sig.is-static .sig-canvas, .sig.is-static .sig-cue, .sig.is-static .sig-chapters, .sig.is-static .sig-skip,
.sig.is-static .sig-intro, .sig.is-static .sig-caption, .sig.is-static .sig-collection { display: none; }
.sig.is-static .sig-poster { position: relative; inset: auto; height: 100vh; object-fit: cover; opacity: 1; transform: none; }
.sig.is-static .sig-copy { position: relative; inset: auto; }
.sig.is-static .sig-final { position: relative; left: auto; top: auto; transform: none; max-width: 560px; margin: 0 auto; padding: 96px var(--gutter) 40px; }
.sig.is-static .sig-final [data-show] { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.sig.is-static .sig-static-phone { display: block; }
.sig-static-phone { display: none; margin: 0 auto 96px; width: min(320px, 72vw); border-radius: 44px; box-shadow: 0 0 0 9px #050505, 0 0 0 10px #3a3834, 0 40px 90px rgba(0, 0, 0, .6); }
.sig.is-static .sig-final p.sig-lead, .sig.is-static .sig-final .sig-status { display: block; }