/* ============================================================
   Our story — a skyline hero that lifts to reveal the brand story.
   Extends styles.css (tokens, header, footer, .final-cta).
   Namespace: .sc-* (scene) / .st-* (leftovers shared with the CTA)

   Layout spine
   ------------
   .sc-track      tall scroll container
     .sc-stage    sticky, 100svh — the pinned collage
     .sc-sheet    z-index above the stage, margin-top pushes it a screen down,
                  so it rises over the pinned scene like a page laid on a desk
   .sc-blob       the story itself: one headline, one unbroken column
   ============================================================ */

.desktop-nav a.is-current {
  background: rgba(24, 24, 24, 0.05);
  box-shadow: inset 0 -2px 0 0 var(--orange);
}

/* ---------- ACT 1 · the pinned collage ---------- */
.sc-track {
  position: relative;
  /* Transparent so the orange sheet's rounded bottom corners reveal the footer
     beneath, not this layer. The hero keeps its own bg on .sc-stage. */
  background: transparent;
}

/* Same reason: let the rounded corners cut through to the revealed footer. */
main {
  background: transparent;
}

.sc-stage {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100svh;
  /* Release the pin a touch early so the sticky stage doesn't sit behind the
     sheet's rounded bottom corners — otherwise the skyline shows through them
     instead of the footer. Collapses into the sheet's 96vh margin, so the
     layout is unchanged. */
  margin-bottom: 64px;
  overflow: hidden;
  isolation: isolate;
  background: #c9d6e0;
}

.sc-plate-wrap {
  position: absolute;
  inset: -4% -2%;
  will-change: transform;
}

.sc-plate {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

/* The plate is bright hazy daylight: lift the left toward white so ink type
   reads cleanly, instead of smudging a dark scrim across a pale sky. */
.sc-plate-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(74% 56% at 50% 40%, rgba(250, 250, 248, 0.88) 0%, rgba(250, 250, 248, 0.5) 46%, rgba(250, 250, 248, 0) 78%),
    linear-gradient(180deg, rgba(250, 250, 248, 0.52) 0%, rgba(250, 250, 248, 0) 30%);
  pointer-events: none;
}

.sc-bird,
.sc-copy-wrap,
.sc-route {
  position: absolute;
}

/* ---------- the route + the couriers ---------- */
.sc-route {
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sc-route-line,
.sc-route-glow {
  fill: none;
  stroke-linecap: round;
  /* Drawn on by JS as the bird advances. */
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: var(--dash, 1400);
}

.sc-route-line {
  stroke: url(#sc-route-fade);
  stroke-width: 2;
}

/* Vapour trail: same path, wide and blurred, so the line has air around it
   instead of sitting on the photo like a sticker. */
.sc-route-glow {
  stroke: url(#sc-route-fade);
  stroke-width: 9;
  opacity: 0.3;
  filter: blur(7px);
}

.sc-bird {
  z-index: 5;
  top: 0;
  left: 0;
  width: clamp(78px, 8.4vw, 132px);
  height: auto;
  /* JS writes left/top. `translate` centres the bird (and carries the idle bob);
     `transform` turns it to face the way it's travelling — the source art flies
     left. They're separate properties, so the bob can't fight the banking. */
  translate: -50% -50%;
  transform: scaleX(-1) rotate(var(--rot, 0deg));
  filter: drop-shadow(0 14px 26px rgba(30, 45, 60, 0.4));
  opacity: calc(var(--o, 1) * var(--fade, 1));
  animation: scBob 3.4s ease-in-out infinite;
}

@keyframes scBob {
  0%, 100% { translate: -50% -50%; }
  50% { translate: -50% calc(-50% - 9px); }
}

.sc-bird--ghost1 { --o: 0.3; width: clamp(60px, 6.4vw, 100px); filter: none; animation-delay: -0.9s; }
.sc-bird--ghost2 { --o: 0.14; width: clamp(48px, 5.2vw, 82px); filter: none; animation-delay: -1.8s; }

/* ---------- the headline over the scene ---------- */
.sc-copy-wrap {
  z-index: 7;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 0;
  pointer-events: none;
  text-align: center;
}

.sc-copy {
  width: min(1180px, 100%);
  will-change: transform;
  color: var(--ink);
}

.sc-chip {
  margin-bottom: 22px;
  border-color: rgba(24, 24, 24, 0.18);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
}

.sc-copy h1 {
  max-width: 36ch;
  margin: 0 auto;
  font-size: clamp(30px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.sc-cue {
  position: absolute;
  z-index: 7;
  bottom: 26px;
  left: 50%;
  width: 22px;
  height: 34px;
  margin-left: -11px;
  border: 1px solid rgba(24, 24, 24, 0.4);
  border-radius: 999px;
  opacity: var(--cue, 1);
  transition: opacity 0.3s ease;
}

.sc-cue i {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(24, 24, 24, 0.75);
  animation: scCue 1.8s ease-in-out infinite;
}

@keyframes scCue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(11px); opacity: 0.3; }
}

/* ---------- scroll-driven shimmer ----------
   A gradient three times wider than the text, clipped to the glyphs. Scroll
   slides its background-position, so a glint travels the line — left to right,
   the same way the courier flies. Colour, not motion: nothing moves but light.

   One gradient, three custom properties. Each tier of type sets its own base and
   glint, so body copy can shimmer more gently than a headline without a second
   copy of the gradient.

   The base colour is set outside the @supports block, so a browser without
   background-clip:text gets solid type instead of invisible type. */
[data-shimmer] {
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: var(--shimmer, 100%) 50%;
  background-image: linear-gradient(
    96deg,
    var(--sh-base) 0 38%,
    var(--sh-glint) 45.5%,
    var(--sh-core) 48.5%,
    var(--sh-glint) 51.5%,
    var(--sh-base) 58% 100%
  );
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-shimmer] {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Ink headline over the pale haze: the glint is brand orange with a hot core. */
.sc-copy h1[data-shimmer] {
  --sh-base: var(--ink);
  --sh-glint: #ff5a1f;
  --sh-core: #ffc4a3;
}

/* White type on orange can't glint brighter than white, so it glints warm. */
.sc-blob [data-shimmer] {
  --sh-base: #fff;
  --sh-glint: #ffd2b8;
  --sh-core: #fff6f0;
}

/* Body copy keeps its slightly-held-back white and takes a softer glint — the
   same light, but it must never cost a line of running text its legibility. */
.sc-blob p[data-shimmer] {
  --sh-base: rgba(255, 255, 255, 0.94);
  --sh-glint: #ffe3d2;
  --sh-core: #fffbf8;
}

/* The pivots and the sign-off sit at full white and take the stronger glint. */
.sc-blob .sc-open[data-shimmer],
.sc-blob .sc-line[data-shimmer],
.sc-blob .sc-sign[data-shimmer] {
  --sh-base: #fff;
  --sh-glint: #ffd2b8;
  --sh-core: #fff6f0;
}

/* ---------- the sheet that lifts over the scene ---------- */
.sc-sheet {
  position: relative;
  z-index: 2;
  /* One screen of dwell on the collage before the tear appears. */
  margin-top: 96vh;
  color: #fff;
  background: var(--orange);
  /* The sheet lifts off to reveal the footer; round its trailing edge so it
     reads as a card. Background is clipped to the radius automatically. */
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.sc-tear {
  position: absolute;
  top: -59px;
  left: 0;
  right: 0;
  height: 60px;
  background: url("assets/story/torn-edge.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
/* ---------- ACT 2 · the story — one column, white on orange ----------
   Deliberately unsectioned: a headline, then a single unbroken read. The two
   pivot lines get size, not their own sections. */
.sc-blob {
  width: min(760px, calc(100% - 96px));
  margin: 0 auto;
  padding: 116px 0 126px;
  text-align: center;
}

.sc-blob-title {
  max-width: 15ch;
  margin: 0 auto 44px;
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.sc-blob p {
  max-width: 62ch;
  margin: 0 auto 26px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 19px;
  line-height: 31px;
}

.sc-open {
  color: #fff !important;
  font-size: 22px !important;
  line-height: 34px !important;
}

/* The two turns in the story. Emphasis inside the column, not a new section. */
.sc-line {
  max-width: 20ch;
  margin: 40px auto 34px !important;
  color: #fff !important;
  font-size: clamp(28px, 3.1vw, 44px) !important;
  font-weight: 500;
  line-height: 1.08 !important;
  letter-spacing: -0.025em;
}

.sc-sign {
  margin: 34px auto 34px !important;
  color: #fff !important;
  font-size: 21px !important;
  line-height: 30px !important;
  font-weight: 500;
}

.sc-sign::before {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto 26px;
  background: rgba(255, 255, 255, 0.5);
}

.sc-cta {
  min-width: 240px;
  min-height: 52px;
  color: var(--orange-deep);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 12px 30px rgba(120, 34, 4, 0.26);
}

.sc-cta:hover {
  background: #fff;
}
/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .sc-blob {
    width: min(680px, calc(100% - 64px));
  }
}

@media (max-width: 860px) {
  .sc-copy-wrap { padding: 60px 20px 0; }

  .sc-bird { width: clamp(58px, 15vw, 92px); }

  .sc-copy h1 { max-width: 24ch; }

  .sc-sheet { margin-top: 88vh; }

  .sc-tear { top: -39px; height: 40px; }

  .sc-blob {
    width: calc(100% - 32px);
    padding: 82px 0 92px;
  }

  .sc-blob p { font-size: 17.5px; line-height: 29px; }
  .sc-open { font-size: 19px !important; line-height: 30px !important; }
  .sc-line { margin: 32px 0 28px !important; }
  .sc-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  /* No pin, no parallax: the scene becomes a still, the sheet a plain section. */
  .sc-stage {
    position: relative;
    height: 88svh;
  }

  .sc-sheet { margin-top: 0; }
  .sc-cue { display: none; }
  .sc-route-line,
  .sc-route-glow { stroke-dashoffset: 0 !important; }
  .sc-cue i { animation: none; }
  .sc-bird { animation: none; }

  [data-shimmer] {
    background-image: none !important;
    -webkit-text-fill-color: currentColor;
    color: inherit;
  }

  .sc-copy h1[data-shimmer] { color: var(--ink); -webkit-text-fill-color: var(--ink); }
  .sc-blob [data-shimmer] { color: #fff; -webkit-text-fill-color: #fff; }
  .sc-blob p[data-shimmer] { color: rgba(255, 255, 255, 0.94); -webkit-text-fill-color: rgba(255, 255, 255, 0.94); }
}