/**
 * The Keys Crossing — trail layer on top of the kit.
 *
 * The palette is pulled from the trail's own photography: the turquoise
 * shallows under the Seven Mile Bridge (21676), the amber of the water at
 * golden hour (37018, 23895), and the deep channel blue of dusk over the
 * Gulf. Contrast: --paper on --ink is 15.92:1, --muted on --ink is 7.41:1.
 *
 * One bespoke set-piece: the Mile Marker (#milemarker), a pinned 340vh
 * golden-hour drive between Chapter IV and the tally. The road, the
 * countdown sign, the waypoints and the arrival stamp are all choreographed
 * by the-keys-crossing.js as pure functions of pin progress; this file owns
 * the stage, the sign furniture and the static/reduced-motion fallbacks.
 */

/* ── palette ─────────────────────────────────────────────────────────────── */
.exp[data-trail="the-keys-crossing"] {
  --ink: #0b141c;      /* deep channel water at dusk */
  --paper: #f3ede0;    /* sun-bleached postcard white */
  --muted: #93a7ae;    /* seafoam haze */
  --accent: #55b8c4;   /* turquoise shallows */
  --sodium: #e8a34c;   /* golden-hour amber */

  --x-selection-bg: var(--sodium);
  --x-selection-color: #14100a;

  /* The Keys photography is bright turquoise daylight and glowing dusk — the
     kit's default veil was tuned for dark interiors and lets the copy fight
     the backdrop. Tint it to the trail's own ink and deepen it. */
  --x-veil-grad-bg:
    linear-gradient(180deg, rgba(11,20,28,.92), rgba(11,20,28,.72) 42%, rgba(11,20,28,.97)),
    radial-gradient(72% 62% at 50% 52%, rgba(11,20,28,.64), transparent 76%);
  --x-coldveil-bg: linear-gradient(rgba(11,20,28,.55), rgba(11,20,28,.78));
  --x-prog-bg: var(--sodium);
  --x-kicker-color: var(--accent);
  --x-titleword-color: var(--paper);
  --x-titleword-bg: none;
  --x-titleword-bg-clip: border-box;
  --x-titleword-filter: drop-shadow(0 8px 34px rgba(0,0,0,.6));
  --x-btn-p-bg: var(--sodium);
  --x-btn-p-color: #14100a;
  --x-btn-s-color: var(--paper);
}

/* ── the pinned wrapper ────────────────────────────────────────────────────
   A kit .scene is min-height:100vh flex with gutters; the drive needs the
   full 340vh pin with an inner sticky stage, so the base rules are reset
   rather than extended. */
.scene.milemarker {
  display: block;
  min-height: 0;
  height: 340vh;
  padding: 0;
  overflow: visible;
}

.mm-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #0b141c;
}

/* The dusk veil: JS raises --dusk as the count runs down, so night falls
   over the last miles and you reach Key West after dark. Sits above the
   scenery, below the furniture. */
.mm-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, #05081a 0%, #0a1226 58%, #0b1420 100%);
  opacity: var(--dusk, 0);
  pointer-events: none;
}

/* ── sky ───────────────────────────────────────────────────────────────────
   Golden hour over the Gulf: indigo zenith falling through dusty rose to a
   hot amber band at the horizon. The horizon sits at 58% so the water and
   the road get the lower half of the frame. */
.mm-sky {
  position: absolute;
  inset: 0 0 42% 0;
  background:
    radial-gradient(90% 70% at 36% 100%, rgba(232,163,76,.5), transparent 68%),
    linear-gradient(180deg,
      #101c2c 0%,
      #27314a 34%,
      #5c4a58 58%,
      #a06a55 78%,
      #e8a34c 100%);
}

/* The sun: a soft disc low over the water. JS sinks it and dims it as the
   count falls — you reach Key West at nightfall. */
.mm-sun {
  position: absolute;
  left: 36%;
  top: 58%;
  width: 15vmin;
  height: 15vmin;
  margin: -7.5vmin 0 0 -7.5vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff3d8 0%, #f7c773 42%, rgba(232,163,76,0) 72%);
  filter: blur(1px);
  transform: translate3d(0, calc(var(--sink, 0) * 1px), 0);
  opacity: var(--sun, 1);
  pointer-events: none;
}

/* ── water ─────────────────────────────────────────────────────────────────
   Below the horizon: teal shallows deepening to channel blue, with the sun's
   reflection dragged down the middle and a faint streak texture. JS slides
   the streaks as you scroll — the water only moves when you do. */
.mm-water {
  position: absolute;
  inset: 58% 0 0 0;
  background:
    radial-gradient(34% 90% at 36% 0%, rgba(247,199,115,.4), transparent 72%),
    repeating-linear-gradient(180deg,
      rgba(243,237,224,.05) 0 2px,
      transparent 2px 9px),
    linear-gradient(180deg,
      #3d7f86 0%,
      #2a5d68 22%,
      #17384a 62%,
      #0b141c 100%);
  background-position:
    0 0,
    0 var(--drift, 0px),
    0 0;
}

/* ── the road ──────────────────────────────────────────────────────────────
   The ribbon is drawn on canvas (asphalt, edge lines, centerline dashes
   flowing toward the viewer); the element below just gives it a frame. */
.mm-road {
  position: absolute;
  inset: 0;
}

.mm-road canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── the guide sign ────────────────────────────────────────────────────────
   FHWA green, white gothic legend, rounded corners, two bolts. The face has
   a faint vertical sheen for the retroreflective bead look, and JS raises a
   headlight glow on the legend as dusk falls. */
.mm-sign {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(30vmin, 44vw);
  aspect-ratio: 5 / 6;
  border-radius: 2.2vmin;
  background:
    linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 28%, transparent 68%, rgba(255,255,255,.07) 100%),
    linear-gradient(180deg, #0a6b3f 0%, #075231 58%, #043e25 100%);
  border: 0.45vmin solid #e9ece5;
  box-shadow:
    0 0 0 0.18vmin rgba(4,32,20,.9),
    0 2.5vmin 6vmin rgba(3,10,14,.55),
    inset 0 0 3vmin rgba(2,24,14,.5);
}

.mm-face {
  position: absolute;
  inset: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2%;
}

.mm-word {
  margin-top: 4%;
  font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 6.2vmin;
  letter-spacing: 0.06em;
  color: #f4f6ef;
  text-shadow: 0 0 1.2vmin var(--glow, rgba(255,255,255,0));
}

.mm-num {
  font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 16.5vmin;
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: #f7f9f2;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 1.6vmin var(--glow, rgba(255,255,255,0));
}

.mm-bolt {
  position: absolute;
  left: 50%;
  width: 1.7vmin;
  height: 1.7vmin;
  margin-left: -0.85vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #e8ebe2 0%, #9aa39b 52%, #4d564f 100%);
  box-shadow: inset 0 -0.2vmin 0.3vmin rgba(0,0,0,.45), 0 0.15vmin 0.3vmin rgba(0,0,0,.4);
}

.mm-bolt-a { top: 3.2%; }
.mm-bolt-b { bottom: 3.2%; }

/* ── the waypoints ─────────────────────────────────────────────────────────
   Small green shoulder signs that rise at the road's right edge and slide
   past as their mile number comes up. Position, scale and opacity are set
   by JS per frame; hidden until the JS places them. */
.mm-ways {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.mm-way {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 15vmin;
  padding: 1.1vmin 1.6vmin 1.2vmin;
  border-radius: 0.9vmin;
  background: linear-gradient(180deg, #0a6b3f, #05472a);
  border: 0.28vmin solid #e9ece5;
  box-shadow: 0 1vmin 2.6vmin rgba(3,10,14,.5), inset 0 0 1.4vmin rgba(2,24,14,.45);
  opacity: 0;
  will-change: transform, opacity;
}

.mm-way b {
  display: block;
  font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.5vmin;
  letter-spacing: 0.04em;
  color: #f4f6ef;
  white-space: nowrap;
}

.mm-way span {
  display: block;
  margin-top: 0.35vmin;
  font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.75vmin;
  letter-spacing: 0.05em;
  color: #cfe3d6;
  white-space: nowrap;
}

/* ── the arrival ───────────────────────────────────────────────────────────
   MM 0: the town sign and the rubber stamp. Both are held invisible until
   the count runs out; JS drives --arr from the final percent of the pin. */
.mm-arrival {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.4vmin;
  opacity: var(--arr, 0);
  pointer-events: none;
}

.mm-arrival-sign {
  padding: 2.4vmin 4.2vmin 2.6vmin;
  border-radius: 1.6vmin;
  background:
    linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 30%, transparent 68%, rgba(255,255,255,.07) 100%),
    linear-gradient(180deg, #0a6b3f 0%, #05472a 100%);
  border: 0.45vmin solid #e9ece5;
  box-shadow:
    0 0 0 0.18vmin rgba(4,32,20,.9),
    0 2.5vmin 6vmin rgba(3,10,14,.55),
    inset 0 0 3vmin rgba(2,24,14,.5);
  text-align: center;
}

.mm-arrival-sign b {
  display: block;
  font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 7.5vmin;
  letter-spacing: 0.08em;
  color: #f7f9f2;
  text-shadow: 0 0 1.6vmin rgba(255,255,255,.35);
}

.mm-arrival-sign span {
  display: block;
  margin-top: 0.6vmin;
  font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  font-size: 2.6vmin;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #cfe3d6;
}

/* The stamp: a faded-red rubber ring, slamming down rotated as the count
   hits zero. --stamp goes 0→1 in the last 4% of the pin. */
.mm-conch {
  width: 14vmin;
  height: 14vmin;
  border-radius: 50%;
  border: 0.55vmin solid rgba(196,74,52,.85);
  box-shadow: inset 0 0 0 0.28vmin rgba(196,74,52,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-12deg) scale(calc(1.7 - var(--stamp, 0) * 0.7));
  opacity: var(--stamp, 0);
  position: relative;
}

.mm-conch::before {
  content: 'MM 0';
  font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 3.6vmin;
  letter-spacing: 0.1em;
  color: rgba(196,74,52,.9);
}

.mm-conch::after {
  content: 'END OF US 1';
  position: absolute;
  bottom: 2.4vmin;
  font-family: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.35vmin;
  letter-spacing: 0.28em;
  color: rgba(196,74,52,.75);
}

/* ── the ledger ────────────────────────────────────────────────────────────
   One mono line at the lower left: where the countdown currently stands.
   JS swaps the text and toggles .show. */
.mm-ledger {
  position: absolute;
  z-index: 3;
  left: 8vw;
  bottom: 8vh;
  max-width: 46ch;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mm-ledger.show {
  opacity: 1;
}

.mm-ledger .mm-line {
  font-size: clamp(12px, 1.35vw, 15px);
  letter-spacing: 0.04em;
  color: var(--muted);
  text-shadow: 0 1px 12px rgba(5,10,14,.8);
}

.mm-ledger .mm-line em {
  color: var(--sodium);
  font-style: normal;
}

/* ── reduced motion / static fallback ──────────────────────────────────────
   .mm-static (added by JS when api.reduced, or by CSS below when there is
   motion preference for it) parks the scene at its final state: dusk down,
   sign at 0, waypoints as a plain list, no canvas motion. */
.mm-static .mm-sign {
  display: none;
}

.mm-static .mm-ways {
  inset: auto;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.2vmin;
  pointer-events: auto;
}

.mm-static .mm-way {
  position: static;
  opacity: 1;
  min-width: 0;
}

.mm-static .mm-arrival {
  left: 34%;
}

/* ── small screens ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .mm-sign {
    width: min(46vmin, 62vw);
    top: 40%;
  }

  .mm-word { font-size: 8.6vmin; }
  .mm-num { font-size: 22vmin; }

  .mm-way {
    min-width: 0;
    padding: 1.6vmin 2.2vmin;
  }

  .mm-way b { font-size: 3.4vmin; }
  .mm-way span { font-size: 2.5vmin; }

  .mm-arrival {
    top: 40%;
  }

  .mm-arrival-sign b { font-size: 8.2vmin; white-space: nowrap; }
  .mm-arrival-sign span { font-size: 3.4vmin; }

  .mm-conch {
    width: 20vmin;
    height: 20vmin;
  }

  .mm-conch::before { font-size: 5vmin; }
  .mm-conch::after { font-size: 1.9vmin; bottom: 3.2vmin; }

  .mm-ledger {
    left: 6vw;
    right: 6vw;
    bottom: 6vh;
    max-width: none;
  }

  .mm-static .mm-ways {
    right: 4vw;
    max-height: 70vh;
    overflow: hidden;
  }

  .mm-static .mm-arrival {
    left: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* If JS is unavailable entirely, at least the ways read as a list. The JS
     adds .mm-static itself for the full static render; this covers no-JS. */
  .mm-way { opacity: 1; }
}