/**
 * Flagler Coast — trail layer on top of the kit.
 *
 * The palette is pulled from the trail's own photography: deep Atlantic
 * indigo from the night/dusk coast frames, shell-paper and sea-mist for the
 * type, dusk-water blue for the cool accent, and lighthouse-lamp amber for
 * the warm one — Gilded Age gold, not neon.
 *
 * The rest of the file is one bespoke set-piece: the Sweep (#sweep), a
 * pinned 320vh night-watch scene before the tally. An off-frame lighthouse
 * beam (a conic-gradient mask anchored beyond the stage's lower-right edge)
 * crosses a dark panorama of the coast; the JS drives --beam and the log.
 * Nothing here animates on its own — all motion is scroll-driven from the
 * flourish, so scrubbing backwards runs the whole scene in reverse.
 */

/* ── the palette ─────────────────────────────────────────────────────────
   Contrast, computed: --paper on --ink = 16.3:1, --muted on --ink = 7.4:1.
   The photography runs dusk-and-lamplight rather than flat daylight, so the
   default veil only needs retinting to this trail's ink, not strengthening. */
.exp[data-trail="flagler-coast"] {
  --ink: #0a0f16;      /* Atlantic night */
  --paper: #f2ecdf;    /* shell / keeper's-log paper */
  --muted: #93a3b3;    /* sea-mist grey-blue */
  --accent: #8fbcd4;   /* dusk water */
  --sodium: #e6b35c;   /* lamp amber, Gilded Age gold */

  --x-selection-bg: var(--sodium);
  --x-selection-color: #140f06;

  --x-veil-grad-bg:
    linear-gradient(180deg, rgba(10,15,22,.92), rgba(10,15,22,.74) 42%, rgba(10,15,22,.97)),
    radial-gradient(72% 62% at 50% 52%, rgba(10,15,22,.66), transparent 76%);
  --x-coldveil-bg: linear-gradient(rgba(10,15,22,.55), rgba(10,15,22,.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: #140f06;
  --x-btn-s-color: var(--paper);
}

/* ── the pinned wrapper ────────────────────────────────────────────────────
   A kit .scene is min-height:100vh flex with gutters; the sweep needs the
   full 320vh pin with an inner sticky stage, so the base rules are reset
   rather than extended (same pattern as the rose window). */
.scene.sweep {
  display: block;
  min-height: 0;
  height: 320vh;
  padding: 0;
  overflow: visible;
}

.sweep-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #04070c;

  /* The lighthouse stands off-frame, lower right. --beam is the bearing the
     JS writes each frame; --sx/--sy anchor every conic mask to the lamp. */
  --sx: 116%;
  --sy: 112%;
  --beam: 210deg;
}

/* ── the night sky ─────────────────────────────────────────────────────────
   Gradient-only: a cold vault overhead, open water below the panorama band. */
.sweep-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 45% at 78% 8%, rgba(143, 188, 212, 0.05), transparent 70%),
    linear-gradient(180deg, #03050a 0%, #071019 34%, #0a1420 55%, #050a10 78%, #030508 100%);
}

/* ── the panorama band ─────────────────────────────────────────────────────
   Three dusk coast photographs side by side, treated as deep night; the top
   and bottom edges dissolve into the sky so it reads as distance, not a
   pasted strip. .sweep-lit carries the SAME frames at full exposure above
   the night veil — only where the beam's mask lets it through. */
.sweep-pano,
.sweep-lit {
  position: absolute;
  left: -2vw;
  right: -2vw;
  top: 21vh;
  height: 53vh;
  display: flex;
}

.sweep-pano {
  filter: brightness(0.26) saturate(0.58) contrast(1.08);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent);
}

.sweep-frame {
  flex: 1 1 0;
  background-size: cover;
  background-position: center;
}

/* Blend the seams so the three frames read as one coastline. */
.sweep-frame + .sweep-frame {
  box-shadow: inset 18vw 0 12vw -10vw rgba(4, 7, 12, 0.9);
}

/* The night veil over everything but the beam and the dawn; the JS eases
   its opacity down on the final hold. */
.sweep-night {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(4, 7, 12, 0.34), rgba(3, 5, 8, 0.72) 82%),
    linear-gradient(180deg, rgba(3, 5, 8, 0.55), rgba(3, 5, 8, 0.2) 40%, rgba(3, 5, 8, 0.66));
  opacity: 1;
  pointer-events: none;
}

/* The dawn plate: the sunrise frame that rises as the watch ends. */
.sweep-dawn {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 68%;
  opacity: 0;
  filter: saturate(1.08);
  pointer-events: none;
}

/* The lit layer: the same panorama at full exposure, revealed only inside
   the beam. The mask intersects three pieces — the band's edge fade, a
   distance falloff from the lamp, and the rotating wedge itself. */
.sweep-lit {
  filter: brightness(1.02) saturate(1.05);
  /* Multiple mask layers UNION by default (mask-composite: add) — without
     an explicit intersect the band-fade layer alone would reveal the whole
     strip and there would be no beam at all. */
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent),
    radial-gradient(135% 150% at var(--sx) var(--sy), #000 26%, rgba(0, 0, 0, 0.55) 58%, transparent 82%),
    conic-gradient(from calc(var(--beam) + 83deg) at var(--sx) var(--sy),
      transparent 0deg,
      rgba(0, 0, 0, 0.5) 2.5deg,
      #000 5.5deg,
      #000 8.5deg,
      rgba(0, 0, 0, 0.5) 11.5deg,
      transparent 14deg,
      transparent 360deg);
  -webkit-mask-image:
    linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent),
    radial-gradient(135% 150% at var(--sx) var(--sy), #000 26%, rgba(0, 0, 0, 0.55) 58%, transparent 82%),
    conic-gradient(from calc(var(--beam) + 83deg) at var(--sx) var(--sy),
      transparent 0deg,
      rgba(0, 0, 0, 0.5) 2.5deg,
      #000 5.5deg,
      #000 8.5deg,
      rgba(0, 0, 0, 0.5) 11.5deg,
      transparent 14deg,
      transparent 360deg);
  pointer-events: none;
}

/* The beam's body: a warm haze along the wedge, wider and softer than the
   reveal, blurred once on a single layer. */
.sweep-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--sx) var(--sy),
    rgba(230, 179, 92, 0.5), rgba(230, 179, 92, 0.16) 42%, transparent 68%);
  filter: blur(14px);
  mask-image: conic-gradient(from calc(var(--beam) + 79deg) at var(--sx) var(--sy),
    transparent 0deg,
    rgba(0, 0, 0, 0.55) 5deg,
    #000 11deg,
    rgba(0, 0, 0, 0.55) 17deg,
    transparent 22deg,
    transparent 360deg);
  -webkit-mask-image: conic-gradient(from calc(var(--beam) + 79deg) at var(--sx) var(--sy),
    transparent 0deg,
    rgba(0, 0, 0, 0.55) 5deg,
    #000 11deg,
    rgba(0, 0, 0, 0.55) 17deg,
    transparent 22deg,
    transparent 360deg);
  opacity: 0.85;
  pointer-events: none;
}

/* ── the lights ────────────────────────────────────────────────────────────
   One small point of warmth per named place, positioned by the JS. .hot
   while the beam bears on it; .logged keeps a faint ember afterwards. */
.sweep-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #f4d9a0;
  box-shadow: 0 0 10px 2px rgba(230, 179, 92, 0.55), 0 0 26px 6px rgba(230, 179, 92, 0.22);
  opacity: 0.1;
  transform: scale(0.8);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

.sweep-dot.hot {
  opacity: 1;
  transform: scale(1.5);
}

.sweep-dot.logged:not(.hot) {
  opacity: 0.42;
  transform: scale(1);
}

/* ── the keeper's log ──────────────────────────────────────────────────────
   Mono ledger lines at the lower left; each is revealed by the JS when its
   light is caught, and hidden again if the scroll rewinds past it. */
.sweep-kicker {
  position: absolute;
  left: 8vw;
  top: 8.5vh;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.sweep-log {
  position: absolute;
  left: 8vw;
  bottom: 9vh;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}

.sweep-log .sl-line {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--paper);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.sweep-log .sl-line.on {
  opacity: 1;
  transform: translateY(0);
}

.sweep-log .sl-line em {
  font-style: normal;
  color: var(--sodium);
}

.sweep-log .sl-dawn {
  margin-top: 5px;
  color: var(--accent);
}

/* ── the counter ─────────────────────────────────────────────────────────── */
.sweep-count {
  position: absolute;
  right: 8vw;
  bottom: 9vh;
  display: flex;
  align-items: baseline;
  gap: 10px;
  pointer-events: none;
}

.sweep-count b {
  font: 700 26px/1 "Space Mono", monospace;
  color: var(--sodium);
  min-width: 2ch;
  text-align: right;
  text-shadow: 0 0 18px rgba(230, 179, 92, 0.35);
}

.sweep-count span {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── reduced motion: the watch in its final state, nothing moves ──────────
   Panorama half-lit, the log complete, no beam, no dawn pass. */
.sweep-reduced .sweep-pano {
  filter: brightness(0.62) saturate(0.8);
}

.sweep-reduced .sweep-night {
  opacity: 0.45;
}

.sweep-reduced .sweep-lit,
.sweep-reduced .sweep-glow {
  display: none;
}

.sweep-reduced .sweep-dot {
  opacity: 0.5;
  transform: scale(1);
}

.sweep-reduced .sweep-log .sl-line {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .scene.sweep {
    height: 300vh;
    padding: 0;
  }

  /* The band crops taller so the frames still read at 390px; the conic
     masks are anchored in percentages, so the beam scales on its own. */
  .sweep-pano,
  .sweep-lit {
    top: 18vh;
    height: 50vh;
    left: -30vw;
    right: -30vw;
  }

  .sweep-kicker {
    left: 22px;
    top: 7.5vh;
    right: 22px;
    font-size: 9px;
    letter-spacing: 0.18em;
  }

  /* The kit's mute pill sits bottom-left, so the log moves right of it. */
  .sweep-log {
    left: 22px;
    right: 22px;
    bottom: 12vh;
    gap: 5px;
  }

  .sweep-log .sl-line {
    font-size: 9.5px;
    letter-spacing: 0.12em;
  }

  .sweep-count {
    right: 22px;
    bottom: 6.5vh;
  }

  .sweep-count b {
    font-size: 20px;
  }
}