/* =========================================================================
   Cut Above v2 — dramatic scroll layer.
   Sticky full-bleed hero, kinetic display type, knife-cut (skewed) section
   transitions, and CSS-var hooks for scroll-linked parallax (scrollfx.js).
   Loads after site.css and overrides it.
   ========================================================================= */

/* ---- Sticky hero: the page body slides over it like a card ---- */
.hero { position: sticky; top: 0; z-index: 1; }
.page-body { position: relative; z-index: 2; background: var(--cream-0); box-shadow: 0 -28px 64px rgba(20, 16, 10, 0.38); }

/* ---- Bigger, more kinetic display type ---- */
.hero h1 { font-size: clamp(54px, 8.8vw, 132px); }
.hero h1 .hl { will-change: transform; }

/* Outlined stroke line — editorial kinetic-type contrast */
.hero h1 .hl:nth-child(2) .hl-i { color: transparent; -webkit-text-stroke: 1.5px rgba(251, 246, 236, 0.92); }

/* ---- Parallax hooks (custom props driven by scrollfx.js) ---- */
.hero-media, .hero-content { will-change: transform, opacity; }
.about-media .media, .infra-media .media { transform: translateY(var(--py, 0px)); }
.infra-ghost { transform: skewY(1.4deg) translateX(var(--gx, 0px)); }

/* ---- Knife-cut section transitions: dark bands sit on a slight diagonal,
       edged in gold hairline; content is counter-skewed back upright ---- */
.stats { transform: skewY(-1.4deg); margin: 72px 0; border-top: 1px solid var(--hairline-gold); border-bottom: 1px solid var(--hairline-gold); }
.stats .stats-grid { transform: skewY(1.4deg); }
.infra { transform: skewY(-1.4deg); margin: 80px 0; border-top: 1px solid var(--hairline-gold); border-bottom: 1px solid var(--hairline-gold); }
.infra > .shell { transform: skewY(1.4deg); }

/* ---- Entrance choreography upgrades ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Headline lines rise with a slight rotation that settles upright */
  .hero .hl-i { transform-origin: 0 100%; animation-name: hlRiseV2; }
  @keyframes hlRiseV2 { from { transform: translateY(118%) rotate(4deg); } }

  /* Slow ken-burns settle on the hero media (one-time on load) */
  .hero-media .media, .hero-video { animation: kenBurns 6.5s var(--ease-out) both; }
  @keyframes kenBurns { from { transform: scale(1.08); } }
}

/* ---- Mission & vision: mission pins fullscreen, vision slides over it
       like a card (same language as the hero and globe transitions) ---- */
.mv-stack { position: relative; }
.mv-stack .mv-mission { position: sticky; top: 0; height: 100svh; z-index: 1; }
.mv-stack .mv-mission .shell { will-change: transform, opacity; }
.mv-stack .mv-vision { position: relative; z-index: 2; box-shadow: 0 -28px 64px rgba(20, 16, 10, 0.30); }

/* ---- Globe: fullscreen pinned panel; next sections slide over it ---- */
.globe-wrap { position: relative; z-index: 1; height: 190svh; }
.globe-wrap .globe { position: sticky; top: 0; height: 100svh; padding: 0; display: flex; align-items: center; }
.globe-wrap .globe .shell { will-change: transform, opacity; }
.globe-reveal { position: relative; z-index: 2; background: var(--cream-0); margin-top: -90svh; box-shadow: 0 -28px 64px rgba(20, 16, 10, 0.22); }
.globe-stage { max-width: min(560px, 74svh); }
@media (max-width: 960px) {
  .globe-wrap { height: auto; }
  .globe-wrap .globe { position: static; height: auto; padding: var(--s-24) 0; }
  .globe-reveal { margin-top: 0; box-shadow: none; }
}

/* ---- Origin list: programme labels + planned routes ---- */
.origin-list { grid-template-columns: 1fr; }
.origin-row .prog { margin-left: auto; font-size: 12px; color: var(--fg-2); }
.origin-row .prog + .dest { margin-left: 16px; }
.origin-row.future .code, .origin-row.future .nm { opacity: 0.55; }
.origin-row.future .dest { color: var(--brand-gold-deep); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }

/* ---- "Next on the map" strip under the product grid ---- */
.next-origins { margin-top: 20px; padding: 18px 24px; border: 1px dashed var(--sand); border-radius: var(--r-8); display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.next-origins .k { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-gold-deep); white-space: nowrap; }
.next-origins p { margin: 0; font-size: 14px; color: var(--fg-2); flex: 1 1 320px; }
.next-origins a { font-size: 14px; white-space: nowrap; }

/* ---- Dead-timeline fallback: keep v2 readable with a frozen clock ---- */
html.no-fx .hero h1 .hl:nth-child(2) .hl-i { color: var(--cream-0); -webkit-text-stroke: 0; }