/**
 * Monuments & Memory — trail layer on top of the kit.
 *
 * Palette first (derived from the trail's own hero photography: the Lincoln
 * Memorial at dusk, the 1946 Trenton streetscape, Gothic church stone), then
 * the one bespoke set-piece: the Inscription (#inscr), a pinned 320vh scene
 * before the tally. A granite wall fills the stage; the trail's memorials
 * carve themselves letter by letter as you scroll, the oldest lines weather,
 * and the last line is left half-carved. All choreography is driven from
 * monuments-memory.js through CSS custom properties — nothing here animates
 * on its own except the dust puffs and the lichen drift, which are
 * class-toggled / ambient.
 */

/* ── palette ───────────────────────────────────────────────────────────────
   Honed granite and bronze: cool slate ink and stone-grey type out of the
   dusk photography, a pale slate accent (the sky over the Reflecting Pool),
   and a bronze sodium (memorial lamplight, the "Faithful Unto Death" eagle).
   Contrast on --ink: --paper 15.0:1, --muted 6.6:1. */
.exp[data-trail="monuments-memory"] {
  --ink: #101216;
  --paper: #e9e6de;
  --muted: #969a9e;
  --accent: #8fa8b8;
  --sodium: #c9a05a;

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

  --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: #171207;
  --x-btn-s-color: var(--paper);
}

/* ── the pinned wrapper ────────────────────────────────────────────────────
   A kit .scene is min-height:100vh flex with gutters; the Inscription needs
   the full 320vh pin with an inner sticky stage, so the base rules are reset
   rather than extended. Own wrapper class — never `pin-wrap`, which the kit
   reserves for the htrack. */
.scene.inscr {
  display: block;
  min-height: 0;
  height: 320vh;
  padding: 0;
  overflow: visible;
}

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

/* ── the granite wall ──────────────────────────────────────────────────────
   Cool honed granite, gradient-built: a broad tonal falloff, a faint
   overhead sheen, then two layers of chisel-drag streaking and one SVG
   turbulence layer for grain. No photography — the wall is the canvas the
   letters get cut into, and a pool texture would fight the relief shadows. */
.inscr-wall {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(143, 168, 184, 0.07), transparent 58%),
    radial-gradient(90% 70% at 50% 108%, rgba(0, 0, 0, 0.5), transparent 62%),
    linear-gradient(180deg, #1b1e23 0%, #15181c 46%, #101216 100%);
}

/* Stone grain: one tiled turbulence pass, blended into the base. */
.inscr-wall::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.52 0 0 0 0 0.54 0 0 0 0 0.56 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 480px 480px;
}

/* Chisel-drag: two faint diagonal streak fields crossing at an angle. */
.inscr-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg,
      transparent 0 34px, rgba(233, 230, 222, 0.014) 34px 36px, transparent 36px 92px),
    repeating-linear-gradient(64deg,
      transparent 0 52px, rgba(0, 0, 0, 0.05) 52px 54px, transparent 54px 148px);
  pointer-events: none;
}

/* ── the mason's guideline grid ────────────────────────────────────────────
   Chalk rules across the whole wall at first; JS fades it as the carving
   advances. The half-carved line keeps its own baseline (below). */
.inscr-grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 calc(100vh / 12 - 1px), rgba(233, 230, 222, 0.42) calc(100vh / 12 - 1px) calc(100vh / 12)),
    repeating-linear-gradient(90deg,
      transparent 0 calc(100vh / 12 - 1px), rgba(233, 230, 222, 0.24) calc(100vh / 12 - 1px) calc(100vh / 12));
  pointer-events: none;
}

/* ── the inscription ───────────────────────────────────────────────────────
   One row per memorial; JS splits each into letter spans and drives the
   carve (--c), strike flash (--f) and weathering (--w) per letter / line.
   The V-cut look: a dark cut interior, a light top-left edge (the wall's
   light source) and a deep bottom-right shadow. */
.inscr-lines {
  position: relative;
  z-index: 2;
  width: min(92vw, 1060px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.6vh, 26px);
}

.inscr-line {
  position: relative;
  white-space: nowrap;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(11px, 2.5vw, 26px);
  letter-spacing: 0.14em;
  line-height: 1.2;
}

.inscr-line .ch {
  display: inline-block;
  opacity: var(--c, 0);
  color: hsl(216, 7%, calc(19% + var(--f, 0) * 42% + var(--w, 0) * 25%));
  text-shadow:
    -0.045em -0.05em 0 hsla(42, 18%, 88%,
      calc(var(--c, 0) * (0.26 + var(--f, 0) * 0.5) * (1 - var(--w, 0) * 0.62))),
    0.05em 0.07em 0.03em rgba(0, 0, 0,
      calc(var(--c, 0) * 0.62 * (1 - var(--w, 0) * 0.5)));
  transform: translateY(calc((1 - var(--c, 0)) * 0.14em));
}

/* Uncarved remainder of the final line: the guideline still visible —
   outlined ghosts on a persistent chalk baseline. */
.inscr-line .ch.ghost {
  opacity: 0.16;
  color: rgba(233, 230, 222, 0.05);
  -webkit-text-stroke: 1px rgba(233, 230, 222, 0.55);
  text-shadow: none;
  transform: none;
}

.inscr-line--guide::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -0.22em;
  height: 1px;
  background: rgba(233, 230, 222, 0.3);
}

/* ── the weathering ────────────────────────────────────────────────────────
   Per-line rain streaks and lichen blooms, built by JS inside each row;
   their opacity is the line's --w, so scrubbing backwards recedes them.
   The lichen also drifts on its own slow clock — weather is ambient, not
   scroll state. */
.inscr-line .streak {
  position: absolute;
  top: 70%;
  width: 2px;
  background: linear-gradient(180deg, rgba(7, 8, 10, 0.75), rgba(7, 8, 10, 0));
  opacity: calc(var(--w, 0) * 0.75);
  pointer-events: none;
}

.inscr-line .lichen {
  position: absolute;
  width: 2.2em;
  height: 1.6em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 134, 100, 0.5), rgba(122, 134, 100, 0) 68%);
  filter: blur(5px);
  opacity: calc(var(--w, 0) * 0.55);
  animation: inscr-lichen 9s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes inscr-lichen {
  from { transform: scale(0.94) translateY(0); }
  to   { transform: scale(1.08) translateY(2%); }
}

/* ── the dust ──────────────────────────────────────────────────────────────
   One span per chisel strike, spawned by JS at the letter's position and
   removed when its animation ends. Edge-triggered forward only. */
.inscr-dust {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.inscr-dust i {
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  margin: -0.25em 0 0 -0.25em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 210, 200, 0.75), rgba(214, 210, 200, 0) 70%);
  filter: blur(1px);
  animation: inscr-puff 0.65s ease-out forwards;
}

@keyframes inscr-puff {
  from { transform: scale(0.4) translate(0, 0); opacity: 0.9; }
  to   { transform: scale(2.6) translate(0.3em, -0.5em); opacity: 0; }
}

/* ── the ledger ────────────────────────────────────────────────────────────
   Mono-type entries at the lower left: the name and place of the memorial
   currently being carved; the final beat is the closing line. JS swaps text
   and toggles .show. */
.inscr-ledger {
  position: absolute;
  left: 8vw;
  bottom: 9vh;
  max-width: 52ch;
  pointer-events: none;
}

.inscr-ledger .il-line {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  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;
}

.inscr-ledger.show .il-line {
  opacity: 1;
  transform: translateY(0);
}

/* ── reduced motion ────────────────────────────────────────────────────────
   JS renders the final state (fully carved, weathered, closing line shown)
   and never ticks; the lichen drift and any stray dust are stilled too. */
@media (prefers-reduced-motion: reduce) {
  .inscr-line .lichen {
    animation: none;
  }

  .inscr-dust i {
    animation: none;
    opacity: 0;
  }

  .inscr-ledger .il-line {
    transition: none;
  }
}

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

  .inscr-lines {
    width: 94vw;
    gap: clamp(8px, 2vh, 16px);
  }

  .inscr-line {
    font-size: clamp(10px, 2.85vw, 14px);
    letter-spacing: 0.09em;
  }

  /* The mute pill sits bottom-left on the kit; the ledger moves right of
     it and shrinks, same as the other trails' set-pieces. */
  .inscr-ledger {
    left: 22px;
    right: 22px;
    bottom: 12vh;
    max-width: none;
  }

  .inscr-ledger .il-line {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
}