/*  slider.css — engraved-frontispiece × lunarpunk register-walk rail.
 *
 *  A horizontal *Jacob's Ladder laid down* — a slim engraved column
 *  with four numeraled stations marking the registers, lit from
 *  within at higher poeticism so the ascent toward the right reads
 *  as bioluminescent.
 *
 *  Composition language:
 *    Frontispiece                    Lunarpunk
 *    ---------------------------     ---------------------------
 *    Roman numerals I–IV         ×   bioluminescent thumb halo
 *    Engraved gold rule          ×   deep-ocean → gold gradient
 *    IM Fell English italic      ×   phosphorescent active glow
 *    Fleuron caps (❦) at ends    ×   warm thumb-bead with bloom
 *
 *  Footprint: rail bar runs full page width but the engraved
 *  content is centered in the middle 50%. Numerals (with ticks)
 *  hang BELOW the track, full English labels emerge ABOVE on
 *  hover/active. Most of the time only numerals show; the rail
 *  stays compact.
 *
 *  References:
 *    · Athanasius Kircher, *Mundus Subterraneus* — vertical scales,
 *      ladder-of-being, allegorical figures arranged hierarchically
 *    · Robert Fludd, *Utriusque Cosmi Historia* — Jacob's ladder,
 *      the Great Chain of Being, gold-tinted engraved plates
 *    · Lunarpunk: dark-ocean atmospheres, bioluminescent terrain,
 *      plants glowing from within based on growth stage              */

/* — Lunarpunk × frontispiece palette ——————————————————————— */
.slider-rail {
  /* Local custom-property palette so the rail reads coherently even
   * if base.css tokens shift. Cool tones at the start of the
   * journey (left), warm tones at the asymptote (right). */
  --rail-deep:    #2a4458;   /* lunarpunk deep-ocean (embodied) */
  --rail-mid:     #756e5b;   /* engraved earth/ink */
  --rail-pale:    #b3a98c;   /* gold paper */
  --rail-gold:    #c9a961;   /* engraved gold */
  --rail-glow:    #f0c468;   /* bioluminescent gold (transcend) */
  --rail-cream:   #fff7c8;   /* inner phosphorescence */
  --rail-shade:   #5a4528;   /* deep core */
  --rail-engrave: #8b6e3a;   /* engraved ring */
}

/* — Rail row — full-width row holding the centered engraved column — */

.slider-rail {
  position: relative;
  width: 100%;
  /* Tall enough to fit semantic-above + tick + register-below at readable
   * type sizes (14px semantic / 12.5px register italic). */
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* — Engraved column container —————————————————————————————
 * Wider than before to give 4 stations breathing room: each station
 * carries a two-line legend (semantic + register), and the longest
 * label "What it stands for" needs ~130px before it would crowd. */

.slider-rail > .rail-stations,
.slider-rail > #slider {
  width: 80%;
  max-width: 880px;
  min-width: 600px;
}

/* — Top + bottom (here: left + right) fleuron caps ———————————
 * Reference: 17th-century printer's-flower cornerpieces, used on
 * the painted plate's cartouche corners (see plate-painted.css).
 * Reused here as sentinels at each end of the ladder. */
.slider-rail::before,
.slider-rail::after {
  content: "❦";
  position: absolute;
  top: 50%;
  font-family: 'IM Fell English', var(--serif);
  font-size: 13px;
  line-height: 1;
  color: var(--ink-quiet);
  pointer-events: none;
  /* Phosphorescent halo strengthens with painted-opacity */
  text-shadow: 0 0 4px rgba(240, 196, 104, calc(var(--painted-opacity, 0) * 0.55));
  transition: color 320ms ease, text-shadow 320ms ease;
}
/* Position the fleurons just OUTSIDE the engraved column's edges,
 * using the same 50% / max-720px math as the column itself. */
.slider-rail::before {
  /* left fleuron: at the left edge of the engraved column, minus a
   * small offset so it sits just outside */
  left:  max(calc(50% - 440px - 18px), calc(10% - 18px));
  transform: translate(-50%, -50%) rotate(-90deg);
}
.slider-rail::after {
  right: max(calc(50% - 440px - 18px), calc(10% - 18px));
  transform: translate(50%, -50%) rotate(90deg);
}

/* — Stations layer — absolute, overlaid above the slider track ——— */

.rail-stations {
  position: absolute;
  top: 50%;
  /* width inherited from the shared rule above; center horizontally */
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  pointer-events: none;
  /* sit above the slider so station clicks reach the buttons; the
   * slider input handles drags on the track itself, between
   * stations. */
  z-index: 2;
}

/* — Each station — two-tier legend on a vertical column —————————
 * Stations are anchored at left:t·100%. Each carries a SEMANTIC name
 * (above the tick, ET Book serif) and a MORPH-REGISTER name (below,
 * italic IM Fell English). The tick straddles the slider track. The
 * semantic label is the chapter heading the slider corresponds to;
 * the register name is the cryptic frontispiece gloss. Both are
 * always visible — no hover reveal, no truncation.
 *
 * Station "embodied / How it works" at t=0 is visually de-emphasized
 * (smaller, italic both lines) — it represents the appendix, not a
 * chapter peer with II/III/IV. */
.station {
  position: absolute;
  top: 50%;
  left: calc(var(--t) * 100%);
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;

  /* Hit target wide enough for the longest semantic label; tall
   * enough to span both label lines and the tick between. */
  min-width: 130px;
  min-height: 96px;
  padding: 0;

  background: transparent;
  border: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;

  color: var(--ink-3);

  transition:
    color 240ms ease,
    transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.station:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tick — thin vertical line crossing the slider track at the station's
 * t-position. Centered vertically inside the station's hit area. */
.station-tick {
  display: block;
  width: 1px;
  height: 10px;
  flex: 0 0 10px;
  background: var(--rule);
  transition: background 240ms ease, width 240ms ease, box-shadow 240ms ease;
}

/* Semantic name — ET Book serif roman, sits ABOVE the tick. The
 * primary chapter label. Centered on the station's t-anchor. */
.station-semantic {
  position: absolute;
  bottom: calc(50% + 12px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 1.15;
  color: var(--ink-2);
  letter-spacing: 0.012em;
  white-space: nowrap;
  transition: color 240ms ease, text-shadow 320ms ease, opacity 240ms ease;
}

/* Register name — italic IM Fell English, sits BELOW the tick. The
 * cryptic frontispiece gloss. */
.station-register {
  position: absolute;
  top: calc(50% + 12px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'IM Fell English', var(--serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.15;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 240ms ease, text-shadow 320ms ease, opacity 240ms ease;
}

/* Appendix station (embodied / How it works) — visually de-emphasized:
 * smaller, italic for both lines, lower contrast. Marks the appendix
 * region rather than a chapter peer. */
.station-appendix .station-semantic {
  font-size: 12px;
  font-style: italic;
  color: var(--ink-3);
}
.station-appendix .station-register {
  font-size: 11px;
  color: var(--ink-quiet);
}

/* — Hover — engraved hover, no glow yet ——————————————————— */
.station:hover {
  color: var(--ink-2);
}
.station:hover .station-tick {
  background: var(--ink-3);
}
.station:hover .station-semantic {
  color: var(--ink);
}
.station:hover .station-register {
  color: var(--ink-2);
}

/* — Active — bioluminescent illumination —————————————————— */
.station[data-active="true"] {
  color: var(--ink);
}
.station[data-active="true"] .station-tick {
  background: var(--rail-gold);
  width: 1.5px;
  box-shadow:
    0 0 3px rgba(240, 196, 104, 0.7),
    0 0 6px rgba(240, 196, 104, 0.35);
}
.station[data-active="true"] .station-semantic {
  color: var(--ink);
  text-shadow:
    0 0 3px rgba(240, 196, 104, 0.85),
    0 0 8px rgba(240, 196, 104, 0.45);
}
.station[data-active="true"] .station-register {
  color: var(--ink-2);
  text-shadow:
    0 0 3px rgba(240, 196, 104, 0.55),
    0 0 6px rgba(240, 196, 104, 0.25);
}

/* — Native horizontal range — track + thumb ———————————————— */

#slider {
  -webkit-appearance: none;
  appearance: none;
  /* Horizontal — no writing-mode rotation. */
  display: block;
  margin: 0 auto;              /* center; width inherited from shared rule */
  /* Tall input so clicks anywhere on the rail scrub the slider — the
   * visual track is still the 1.5px hairline in the middle, but the
   * native input absorbs clicks across the full 40px band. */
  height: 40px;
  background: transparent;
  cursor: ew-resize;
  padding: 0;
  outline: none;
  position: relative;
  z-index: 1;

  /* Faint phosphorescent backwash centered on the track —
   * intensifies with --painted-opacity. */
  background:
    radial-gradient(
      ellipse 70% 16px at 50% 50%,
      rgba(240, 196, 104, calc(var(--painted-opacity, 0) * 0.10)) 0%,
      transparent 80%
    );
}

/* — Track — engraved gold rule with cybersigilist gradient ————
 * Cool deep-teal at the left (embodied earth/ocean), warm gold at
 * the right (transcendentalized sun). 1.5px tall — engraved but
 * not a bar. */
#slider::-webkit-slider-runnable-track {
  height: 1.5px;
  width: 100%;
  border-radius: 1px;
  background: linear-gradient(to right,
    var(--rail-deep)  0%,
    var(--rail-deep)  10%,
    #3a5868          22%,
    var(--rail-mid)  44%,
    var(--rail-pale) 64%,
    var(--rail-gold) 82%,
    var(--rail-glow) 100%);
}
#slider::-moz-range-track {
  height: 1.5px;
  width: 100%;
  border-radius: 1px;
  background: linear-gradient(to right,
    var(--rail-deep)  0%,
    var(--rail-deep)  10%,
    #3a5868          22%,
    var(--rail-mid)  44%,
    var(--rail-pale) 64%,
    var(--rail-gold) 82%,
    var(--rail-glow) 100%);
}

/* — Thumb — bioluminescent bead ———————————————————————————
 * A small phosphorescent gold pearl. Outer halo intensifies with
 * --painted-opacity (the page's overall painted register), so the
 * bead glows brighter as you ascend the journey. The radial
 * gradient gives it a wet/lit quality — not a flat dot, an *eye*. */
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;

  /* Layered backgrounds, cybersigilist medallion-eye:
   *   1. (top) compass-rose star drawn as inline SVG — straight-line
   *      geometry with elongated cardinal points (the brand's
   *      4-pointed cardinal mark, see /brand/icon.png). The star
   *      sits over a small dark-pupil dot so it reads as an *eye*
   *      from a distance — sigil-of-craft, all-seeing.
   *   2. (bottom) bioluminescent pearl gradient — the bead glows
   *      from within so the whole assembly reads as a lit medallion. */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1 L13 11 L23 12 L13 13 L12 23 L11 13 L1 12 L11 11 Z' fill='%23fff7c8' stroke='%23805f2a' stroke-width='0.5' opacity='0.96'/><circle cx='12' cy='12' r='1.6' fill='%23362413' opacity='0.92'/></svg>") center / 90% 90% no-repeat,
    radial-gradient(
      circle at 35% 28%,
      var(--rail-cream)   0%,
      var(--rail-glow)   28%,
      var(--rail-gold)   58%,
      #8b6e3a            82%,
      var(--rail-shade) 100%
    );
  border: 0.5px solid var(--rail-glow);

  box-shadow:
    /* Engraved gold ring tight around the bead */
    0 0 0 1px var(--rail-engrave),
    /* Sigil outer ring — faint medallion border, brand-style */
    0 0 0 2.5px rgba(240, 196, 104, calc(0.12 + var(--painted-opacity, 0) * 0.22)),
    /* Inner halo — close, intense */
    0 0 4px 0.5px rgba(240, 196, 104, calc(0.45 + var(--painted-opacity, 0) * 0.45)),
    /* Outer halo — far, soft, lifts toward transcend end */
    0 0 12px 3px rgba(240, 196, 104, calc(0.10 + var(--painted-opacity, 0) * 0.35)),
    /* Phosphorescent bloom — atmospheric, only at higher t */
    0 0 22px 6px rgba(255, 219, 130, calc(var(--painted-opacity, 0) * 0.20)),
    /* Inner shade for depth — stops it looking like a flat circle */
    inset 0 0 2px 0 rgba(60, 40, 12, 0.45);

  /* Center on the 1.5px track vertically (horizontal slider, so
   * the track's "thin" axis is vertical). */
  margin-top: -6.75px;
  cursor: ew-resize;
  transition:
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 280ms ease;
}
#slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1 L13 11 L23 12 L13 13 L12 23 L11 13 L1 12 L11 11 Z' fill='%23fff7c8' stroke='%23805f2a' stroke-width='0.5' opacity='0.96'/><circle cx='12' cy='12' r='1.6' fill='%23362413' opacity='0.92'/></svg>") center / 90% 90% no-repeat,
    radial-gradient(
      circle at 35% 28%,
      var(--rail-cream)   0%,
      var(--rail-glow)   28%,
      var(--rail-gold)   58%,
      #8b6e3a            82%,
      var(--rail-shade) 100%
    );
  border: 0.5px solid var(--rail-glow);
  box-shadow:
    0 0 0 1px var(--rail-engrave),
    0 0 0 2.5px rgba(240, 196, 104, calc(0.12 + var(--painted-opacity, 0) * 0.22)),
    0 0 4px 0.5px rgba(240, 196, 104, calc(0.45 + var(--painted-opacity, 0) * 0.45)),
    0 0 12px 3px rgba(240, 196, 104, calc(0.10 + var(--painted-opacity, 0) * 0.35)),
    0 0 22px 6px rgba(255, 219, 130, calc(var(--painted-opacity, 0) * 0.20)),
    inset 0 0 2px 0 rgba(60, 40, 12, 0.45);
  cursor: ew-resize;
  transition:
    transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 280ms ease;
}

/* Hover — bead enlarges slightly */
#slider:hover::-webkit-slider-thumb { transform: scale(1.10); }
#slider:hover::-moz-range-thumb     { transform: scale(1.10); }

/* — Focus ring — accent red doubles up the engraved gold —————— */
#slider:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 1px var(--rail-engrave),
    0 0 0 3px var(--accent),
    0 0 4px 0.5px rgba(240, 196, 104, calc(0.45 + var(--painted-opacity, 0) * 0.45)),
    0 0 12px 3px rgba(240, 196, 104, calc(0.10 + var(--painted-opacity, 0) * 0.35)),
    inset 0 0 2px 0 rgba(60, 40, 12, 0.45);
}
#slider:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 1px var(--rail-engrave),
    0 0 0 3px var(--accent),
    0 0 4px 0.5px rgba(240, 196, 104, calc(0.45 + var(--painted-opacity, 0) * 0.45)),
    0 0 12px 3px rgba(240, 196, 104, calc(0.10 + var(--painted-opacity, 0) * 0.35)),
    inset 0 0 2px 0 rgba(60, 40, 12, 0.45);
}

/* — Reduced-motion guard ——————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
  .station,
  .station-tick,
  .station-name,
  .slider-rail::before,
  .slider-rail::after,
  #slider::-webkit-slider-thumb,
  #slider::-moz-range-thumb {
    transition: none;
  }
  #slider:hover::-webkit-slider-thumb { transform: none; }
  #slider:hover::-moz-range-thumb     { transform: none; }
}