/* ============================================================================
   SADER — TIMELINE 3D  (s-timeline-3d)
   First-person camera fly-through time corridor.
   Scroll drives translateZ on the 3D scene; cards float left/right of centre,
   growing from thumbnail to full-size as the camera approaches.
   Depth-of-field blur, mouse-reactive tilt, era color-temperature drift,
   perspective grid, ghost year watermarks, cinematic HUD.
   ============================================================================ */

/* ── Root ──────────────────────────────────────────────────────────────────── */
.s-tl3d {
  position: relative;
  background: #060606;
  /* height is set by JS once ribbon depth is measured */
}

/* ── Sticky viewport — perspective container ──────────────────────────────── */
.tl3d__viewport {
  position: sticky;
  top: 0;
  block-size: 100vh;   /* must equal window.innerHeight used by the JS driver */
  overflow: hidden;
  perspective: 900px;
  perspective-origin: 50% 48%;
  background: #060606;
}

/* ── 3D Scene — moves along Z as user scrolls ─────────────────────────────── */
.tl3d__scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  /* GSAP sets transform: translateZ(Xpx) rotateX(Ydeg) rotateY(Zdeg) */
}

/* ── Atmospheric depth fog ────────────────────────────────────────────────── */
.tl3d__fog {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,   #060606 0%, transparent 18%),
    linear-gradient(to top,      #060606 0%, transparent 18%),
    radial-gradient(ellipse 80% 60% at 50% 50%,
      transparent 40%,
      rgba(6,6,6,0.5) 80%,
      rgba(6,6,6,0.85) 100%);
  pointer-events: none;
  z-index: 5;
}

/* ── Perspective grid floor ───────────────────────────────────────────────── */
.tl3d__grid-floor {
  position: absolute;
  inset-inline: -100%;
  block-size: 55%;
  inset-block-end: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 120px 120px;
  transform: perspective(500px) rotateX(78deg);
  transform-origin: 50% 100%;
  pointer-events: none;
  z-index: 1;
}
.tl3d__grid-ceil {
  position: absolute;
  inset-inline: -100%;
  block-size: 30%;
  inset-block-start: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 120px 120px;
  transform: perspective(400px) rotateX(-78deg);
  transform-origin: 50% 0%;
  pointer-events: none;
  z-index: 1;
}

/* Vanishing-point horizon glow */
.tl3d__horizon {
  position: absolute;
  inset-block-start: 48%;
  inset-inline: 20%;
  block-size: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.06) 30%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.06) 70%,
    transparent
  );
  pointer-events: none;
  z-index: 2;
}

/* ── Central axis spine ───────────────────────────────────────────────────── */
.tl3d__spine {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 0.5px);
  inline-size: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,0.06) 20%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.06) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* ── Cinematic scanlines overlay ──────────────────────────────────────────── */
.tl3d__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.06) 4px
  );
  pointer-events: none;
  z-index: 8;
  mix-blend-mode: multiply;
}

/* ── Event cards in 3D space ──────────────────────────────────────────────── */
/* Each card is a direct child of the preserve-3d scene. Its single transform
   is driven by CSS vars:
     --z      depth in the corridor (negative = ahead), set inline per card
     --card-x horizontal offset (left/right wall), from modifier class
     --card-ry angle toward the centre aisle, from modifier class
     --focus  0→1, set by JS as the camera approaches: the billboard slides
              toward centre and turns flat to face the viewer, then turns away. */
.tl3d__card {
  position: absolute;
  inset-block-start: 50%;
  /* Physical `left` (not inset-inline-start) so it pairs with the physical
     translate(-50%) below — otherwise RTL flips the anchor to the right edge
     and the whole corridor / focused card lands off-centre. */
  left: 50%;
  inline-size: clamp(340px, 30vw, 500px);
  transform-style: preserve-3d;
  transform-origin: center center;
  /* As --focus → 1 the card slides fully onto the centre axis, turns flat to
     face the camera, and scales up so the centred card commands attention. */
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--card-x, 0px) * (1 - var(--focus, 0))))
    translateZ(var(--z, 0px))
    rotateY(calc(var(--card-ry, 0deg) * (1 - var(--focus, 0))))
    scale(calc(1 + var(--focus, 0) * 0.22));
  will-change: transform, opacity, filter;
  cursor: default;
}

/* Cards alternate left/right wall and angle inward toward the aisle.
   Wider offsets keep the un-focused side cards clear of the centred one. */
.tl3d__card--left  {
  --card-x: clamp(-600px, -34vw, -380px);
  --card-ry: -18deg;
}
.tl3d__card--right {
  --card-x: clamp(380px, 34vw, 600px);
  --card-ry: 18deg;
}

/* The actual card face */
.tl3d__card-face {
  position: relative;
  background: #121212;            /* solid, opaque card ground */
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  backface-visibility: hidden;
  transition:
    border-color 400ms ease,
    background   400ms ease,
    box-shadow   400ms ease;
}

/* Featured cards are slightly taller */
.tl3d__card--featured .tl3d__card-face {
  border-color: rgba(255,255,255,0.13);
  background: #161616;            /* solid, opaque */
}

/* When card is near the camera (JS adds .is-near) — billboard lights up */
.tl3d__card.is-near .tl3d__card-face {
  border-color: rgba(255,255,255,0.42);
  background: #1c1c1c;            /* solid, opaque */
  box-shadow:
    0 0 90px rgba(255,255,255,0.09),
    0 30px 80px rgba(0,0,0,0.6),
    inset 0 0 50px rgba(255,255,255,0.03);
}

/* Image within card */
.tl3d__card-img {
  display: block;
  inline-size: 100%;
  block-size: clamp(160px, 18vh, 240px);
  object-fit: cover;
  object-position: center top;
  transition: filter 600ms ease;
}

/* Era-specific filter tints — shifts from warm sepia to crisp modern */
.tl3d__card[data-era="ottoman"]    .tl3d__card-img { filter: sepia(0.9)  brightness(0.70) contrast(1.1); }
.tl3d__card[data-era="mandate"]    .tl3d__card-img { filter: sepia(0.65) brightness(0.75) contrast(1.1); }
.tl3d__card[data-era="independence"] .tl3d__card-img { filter: sepia(0.35) brightness(0.80) contrast(1.05); }
.tl3d__card[data-era="civil-war"]  .tl3d__card-img { filter: sepia(0.20) brightness(0.75) contrast(1.15) saturate(0.6); }
.tl3d__card[data-era="post-war"]   .tl3d__card-img { filter: sepia(0.10) brightness(0.82) contrast(1.1); }
.tl3d__card[data-era="digital"]    .tl3d__card-img { filter: sepia(0.04) brightness(0.86) contrast(1.0); }
.tl3d__card[data-era="intelligence"] .tl3d__card-img { filter: brightness(0.90) contrast(1.0); }

/* When near: sharpen and lighten the image */
.tl3d__card.is-near .tl3d__card-img {
  filter: brightness(0.95) contrast(1.05) !important;
}

/* Card text content */
.tl3d__card-body {
  padding: clamp(1.1rem, 1.7vw, 1.7rem);
}
.tl3d__card-year {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.85);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-block-end: 0.3em;
}
.tl3d__card-title {
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 1.2vw, 1.15rem);
  font-weight: var(--fw-semi);
  color: rgba(255,255,255,0.70);
  line-height: 1.3;
  margin-block-end: 0.5em;
}
.tl3d__card-text {
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  color: rgba(255,255,255,0.38);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tl3d__card.is-near .tl3d__card-text {
  color: rgba(255,255,255,0.55);
}

/* Bottom accent line per era */
.tl3d__card-face::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.18) 50%,
    transparent
  );
  transform: scaleX(0);
  transition: transform 500ms ease;
}
.tl3d__card.is-near .tl3d__card-face::after {
  transform: scaleX(1);
}

/* ── Ghost year watermarks ────────────────────────────────────────────────── */
.tl3d__ghost-year {
  position: absolute;
  inset-block-start: 50%;
  left: 50%;   /* physical anchor — pairs with the physical translate below */
  font-family: var(--font-display);
  font-size: clamp(8rem, 18vw, 18rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255,255,255,0.05);
  transform-origin: center center;
  translate: -50% -50%;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ── Era divider planes ───────────────────────────────────────────────────── */
.tl3d__era-divider {
  position: absolute;
  inset-block: 0;
  inset-inline: -50%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,0.03) 30%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* Era label on divider */
.tl3d__era-label {
  position: absolute;
  inset-block-start: 50%;
  left: 50%;   /* physical anchor — pairs with the physical translate below */
  translate: -50% -50%;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
}

/* ── Depth particles (floating dots) ─────────────────────────────────────── */
.tl3d__particle {
  position: absolute;
  inline-size: 2px;
  block-size: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  pointer-events: none;
}

/* ── HUD overlay (above everything, not in 3D scene) ─────────────────────── */
.tl3d__hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* Era name — top left (cleared below the fixed site header) */
.tl3d__hud-era {
  position: absolute;
  inset-block-start: calc(var(--header-h) + var(--space-5));
  inset-inline-start: var(--gutter);
}
.tl3d__hud-era-label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-block-end: 0.3em;
}
.tl3d__hud-era-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.72);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  transition: opacity 400ms ease;
}

/* Year counter — top right (cleared below the fixed site header) */
.tl3d__hud-year {
  position: absolute;
  inset-block-start: calc(var(--header-h) + var(--space-5));
  inset-inline-end: var(--gutter);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: var(--fw-light);
  color: rgba(255,255,255,0.30);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 400ms ease;
}
.tl3d__hud-year.is-active {
  color: rgba(255,255,255,0.72);
}

/* Vertical progress bar — right edge (top cleared below the fixed header) */
.tl3d__hud-progress {
  position: absolute;
  inset-block-start: calc(var(--header-h) + var(--space-7));
  inset-block-end: var(--space-9);
  inset-inline-end: var(--space-5);
  inline-size: 1px;
  background: rgba(255,255,255,0.08);
}
.tl3d__hud-progress-fill {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 0%;
  background: rgba(255,255,255,0.45);
  transition: block-size 80ms linear;
}
/* Progress year tick marks */
.tl3d__hud-tick {
  position: absolute;
  inset-inline-start: -3px;
  inline-size: 7px;
  block-size: 1px;
  background: rgba(255,255,255,0.20);
}
.tl3d__hud-tick-label {
  position: absolute;
  inset-inline-end: calc(100% + var(--space-3));
  font-size: 0.6rem;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1;
  translate: 0 -50%;
}

/* Scroll hint — bottom centre (sits above the persistent skip control) */
.tl3d__scroll-hint {
  position: absolute;
  inset-block-end: var(--space-9);
  inset-inline-start: 50%;
  translate: -50% 0;
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.20);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: opacity 600ms ease;
}
.tl3d__scroll-hint-arrow {
  animation: tl3d-bounce 2s ease-in-out infinite;
}
@keyframes tl3d-bounce {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(5px); }
}
.s-tl3d.is-scrolling .tl3d__scroll-hint { opacity: 0; }

/* Skip control — small persistent arrow at the very bottom that jumps past the
   corridor to the content below it. Lives inside the (pointer-events:none) HUD,
   so it re-enables clicks on itself. Hidden on mobile / reduced-motion via the
   HUD being display:none there. */
.tl3d__skip {
  position: absolute;
  inset-block-end: var(--space-5);
  inset-inline-start: 50%;
  translate: -50% 0;
  pointer-events: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 1em;
  background: none;
  border: 0;
  cursor: pointer;
  color: rgba(255,255,255,0.42);
  font-family: inherit;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color 300ms ease;
  z-index: 11;
}
.tl3d__skip:hover,
.tl3d__skip:focus-visible { color: rgba(255,255,255,0.88); }
.tl3d__skip:focus-visible { outline: 1px solid rgba(255,255,255,0.4); outline-offset: 4px; }

/* Double down-chevron drawn from borders */
.tl3d__skip-chevron {
  position: relative;
  display: block;
  inline-size: 16px;
  block-size: 15px;
  animation: tl3d-bounce 2s ease-in-out infinite;
}
.tl3d__skip-chevron::before,
.tl3d__skip-chevron::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inline-size: 9px;
  block-size: 9px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}
.tl3d__skip-chevron::before { inset-block-start: 0; }
.tl3d__skip-chevron::after  { inset-block-start: 6px; opacity: 0.5; }

/* ── Vignette corners ─────────────────────────────────────────────────────── */
.tl3d__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    transparent 60%,
    rgba(6,6,6,0.65) 100%
  );
  pointer-events: none;
  z-index: 4;
}

/* ── Mobile / narrow: the corridor becomes a vertical RAIL timeline ─────────
   The 3D fly-through can't survive a phone: a CSS `perspective` with a fixed
   origin on the (now static, page-tall) viewport shears every card by its
   distance from that origin, so milestones near the top/bottom render warped.
   Instead we drop perspective entirely and re-stage the same milestones as a
   classic vertical timeline — a hairline rail down the start edge, a node per
   event, full-width cards — with a FLAT, one-way fade-up reveal (no Z, no tilt,
   so nothing can distort). A no-JS / reduced-motion visitor just sees the rail
   timeline fully legible. */
@media (max-width: 800px) {
  .s-tl3d {
    height: auto !important;
    overflow-x: clip;                 /* kill any horizontal bleed */
    background: radial-gradient(135% 60% at 50% 0%, #17171b 0%, #0b0b0c 55%, #060606 100%);
  }
  /* !important overrides the inline height the JS sets at desktop width.
     perspective:none is the fix — a flat column can't be sheared by depth. */
  .tl3d__viewport {
    position: static;
    block-size: auto !important;
    overflow: visible;
    perspective: none;
  }
  .tl3d__scene {
    position: relative;
    transform: none !important;
    transform-style: flat;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    --tl-gap: clamp(1.75rem, 6vw, 2.75rem);
    gap: var(--tl-gap);
    max-inline-size: 34rem;
    margin-inline: auto;
    padding: var(--space-9) var(--gutter) var(--space-10);
  }

  /* Each card fills the column; the rail + node are drawn INSIDE the card's own
     start padding. Because both the rail and the dot use the SAME card-local
     offset (0.5rem), they can never drift apart no matter how --gutter or the
     root font-size resolve — the whole unit (rail, dot, card) moves together. */
  .tl3d__card {
    position: relative;
    z-index: 1;
    /* CRITICAL: neutralise the desktop corridor offsets. The base rule sets
       `position:absolute; top:50%; left:50%` for the 3D fly-through; leaving
       `left:50%` in place shoves every (now relative) card halfway across the
       viewport — the empty-left / cards-jammed-right bug. */
    inset: auto;
    inline-size: auto;
    max-inline-size: none;
    transform: none;                  /* reset the desktop corridor transform */
    padding-inline-start: 1.9rem;     /* clears the rail + node */
  }
  /* Rail segment — runs the card's height and bleeds down through the gap so the
     line reads continuous between milestones. */
  .tl3d__card::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-block-end: calc(-1 * var(--tl-gap));
    inset-inline-start: 0.5rem;
    inline-size: 1px;
    background: rgba(255,255,255,0.16);
    z-index: 0;
  }
  .tl3d__card:last-child::after { inset-block-end: 0; }
  /* Node dot sitting on the rail (same 0.5rem offset → always centred on it). */
  .tl3d__card::before {
    content: "";
    position: absolute;
    inset-block-start: 1.6rem;
    inset-inline-start: calc(0.5rem - 4px);
    inline-size: 9px;
    block-size: 9px;
    border-radius: 50%;
    background: #0c0c0e;
    border: 1px solid rgba(255,255,255,0.5);
    z-index: 2;
  }
  .tl3d__card--featured::before {
    inline-size: 11px;
    block-size: 11px;
    inset-inline-start: calc(0.5rem - 5px);
    background: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.9);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
  }

  /* Reveal state — applied only while the JS drives it (.is-reveal),
     so a no-JS / reduced-motion visitor still sees every card flat and legible.
     Pure 2D fade-up: nothing here can warp regardless of page position. */
  .s-tl3d.is-reveal .tl3d__card {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 640ms var(--ease),
      transform 720ms var(--ease);
    will-change: transform, opacity;
  }
  .s-tl3d.is-reveal .tl3d__card.tl-in {
    opacity: 1;
    transform: none;
  }
  /* The node dot fades in with its card; the rail (::after) stays constant. */
  .s-tl3d.is-reveal .tl3d__card::before {
    opacity: 0;
    transition: opacity 520ms var(--ease) 140ms;
  }
  .s-tl3d.is-reveal .tl3d__card.tl-in::before { opacity: 1; }

  /* Premium card surface */
  .tl3d__card-face {
    translate: 0;
    rotate: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 28px 60px rgba(0,0,0,0.55);
  }
  .tl3d__card--featured .tl3d__card-face { border-color: rgba(255,255,255,0.24); }
  .tl3d__card-img {
    block-size: clamp(190px, 52vw, 260px);
    filter: grayscale(0.25) brightness(0.98) !important;
  }
  .tl3d__card-body  { padding: clamp(1.2rem, 5.5vw, 1.7rem); }
  .tl3d__card-year  { color: rgba(255,255,255,0.95); font-size: clamp(2.2rem, 11vw, 3rem); }
  .tl3d__card-title { color: rgba(255,255,255,0.85); font-size: 1rem; margin-block-end: 0.6em; }
  .tl3d__card-text  { color: rgba(255,255,255,0.6); -webkit-line-clamp: unset; }

  /* Hide the 3D-only scenery + HUD chrome */
  .tl3d__ghost-year,
  .tl3d__era-divider,
  .tl3d__grid-floor,
  .tl3d__grid-ceil,
  .tl3d__horizon,
  .tl3d__spine,
  .tl3d__scanlines,
  .tl3d__fog,
  .tl3d__vignette,
  .tl3d__particle,
  .tl3d__hud { display: none; }
}

/* Desktop-width visitors who prefer reduced motion: the corridor can't run, so
   flatten it to a clean centred column. Narrow + reduced-motion is already
   handled by the mobile rail block above (it stays static when JS adds no
   .is-reveal), so this is scoped to >=801px to avoid fighting it. */
@media (prefers-reduced-motion: reduce) and (min-width: 801px) {
  .s-tl3d { height: auto !important; background: #0b0b0b; }
  .tl3d__viewport { position: static; block-size: auto !important; perspective: none; }
  .tl3d__scene {
    position: static;
    transform: none !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-9) var(--gutter) var(--space-10);
    max-inline-size: 760px;
    margin-inline: auto;
  }
  .tl3d__card {
    position: static;
    inline-size: 100%;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .tl3d__card-face {
    translate: 0;
    rotate: none;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
  }
  .tl3d__card-img   { filter: grayscale(0.3) brightness(0.95) !important; }
  .tl3d__card-year  { color: rgba(255,255,255,0.92); }
  .tl3d__card-title { color: rgba(255,255,255,0.82); }
  .tl3d__card-text  { color: rgba(255,255,255,0.55); -webkit-line-clamp: unset; }
  .tl3d__ghost-year,.tl3d__era-divider,.tl3d__grid-floor,.tl3d__grid-ceil,
  .tl3d__horizon,.tl3d__spine,.tl3d__scanlines,.tl3d__fog,.tl3d__vignette,
  .tl3d__particle,.tl3d__hud { display: none; }
}

/* ── FINALE — the brand mark flies up to fill the frame at the end ──────────── */
/* Sits on the centre line, deep past the last milestone; timeline-3d.js fades it
   in over the final stretch so it lands large and centred where the corridor
   used to dissolve into blank black space. */
/* A pinned, centred overlay (it lives in the sticky viewport, NOT the flying
   scene) so it stays dead-centre and HOLDS for the whole final stretch instead
   of flashing past. timeline-3d.js drives opacity + a gentle scale from the
   scroll progress.
   z-index sits BEHIND the scene (which is z-index:auto, i.e. 0) so the brand
   mark always rises *behind* the milestone cards — the last card (2025) is
   still centred and fully opaque while the finale fades up, and the logo must
   never paint over it. It lands in the transparent core of the fog/vignette,
   so being at the back leaves its appearance unchanged. */
.tl3d__finale {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  will-change: opacity;
}
.tl3d__finale-logo {
  display: block;
  inline-size: min(58vw, 560px);
  block-size: auto;
  transform: scale(0.92);
  transform-origin: center;
  filter: drop-shadow(0 0 70px rgba(255, 255, 255, 0.22));
}

/* Mobile: no corridor — show the mark as a centred coda at the end of the stack. */
@media (max-width: 800px) {
  .tl3d__finale {
    position: static;
    opacity: 1;
    padding-block: var(--space-9) var(--space-10);
  }
  .tl3d__finale-logo { inline-size: min(56vw, 280px); transform: none; }
}

/* Reduced motion (desktop width): same centred coda at the foot of the column. */
@media (prefers-reduced-motion: reduce) and (min-width: 801px) {
  .tl3d__finale {
    position: static;
    opacity: 1;
    padding-block: var(--space-10);
  }
  .tl3d__finale-logo { inline-size: min(40vw, 360px); transform: none; }
}