/* Honey Trail · the honey line rail.
   Colours come from tokens.css only. CSS animates transform and opacity only.
   Sizes mirror GEO in js/honey.js (desktop / under 720px). */

.rail {
  --rail-hex-h: 22px;
  --rail-hex-w: 19px;          /* pointy-top hex: w = h x 0.866 */
  --rail-hit: 32px;
  --rail-home: 28px;
  --rail-home-top: 12px;
  --rail-spout-w: 26px;
  --rail-bee-w: 22px;
  --rail-bee-h: 18.8px;
  --rail-glow: 0;
  --rail-hex-clip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: var(--rail-w);
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  font-family: var(--font-display);
}

/* soft scrim so the line reads over a bright sky as well as the night */
.rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--canvas) 46%, transparent) 0%,
    color-mix(in oklab, var(--canvas) 22%, transparent) 65%,
    transparent 100%);
}

.rail a {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.rail a:focus { outline: none; }
.rail a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* ---- honey canvas ---- */
.rail__honey {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- home mark ---- */
.rail__home {
  position: absolute;
  top: var(--rail-home-top);
  left: 50%;
  z-index: 3;
  display: block;
  width: var(--rail-home);
  height: var(--rail-home);
  margin-left: calc(var(--rail-home) / -2);
  border-radius: 50%;
}
.rail__home svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-hex {
  fill: color-mix(in oklab, var(--canvas) 55%, transparent);
  stroke: var(--honey);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.hm-s1 { stop-color: var(--honey); }
.hm-s2 { stop-color: var(--honey-deep); }
.hm-glint { fill: var(--wax); opacity: .75; }
.hm-drop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .4s var(--ease-honey);
}
.rail__home:hover .hm-drop,
.rail__home:focus-visible .hm-drop { transform: scale(1.08, 1.12); }

/* ---- comb spout (injected by honey.js, positioned by transform) ---- */
.rail__spout {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: var(--rail-spout-w);
  height: calc(var(--rail-spout-w) * .4);
  margin-left: calc(var(--rail-spout-w) / -2);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--canvas) 55%);
  mask-image: linear-gradient(180deg, transparent 0%, var(--canvas) 55%);
}
.rail__spout svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* pale wax walls, amber honey in the cells */
.hs-s1 { stop-color: var(--wax); }
.hs-s2 { stop-color: var(--honey); }
.hs-cells { fill: var(--honey-deep); }
.hs-walls {
  fill: none;
  stroke: var(--honey-deep);
  stroke-width: 1.1;
  stroke-linejoin: round;
}

/* ---- set cells ---- */
.rail__sets {
  position: absolute;
  inset: 72px 0 28px;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rail__sets li { position: relative; height: 0; }
.rail.is-mounted .rail__sets { display: block; inset: 0; }
.rail.is-mounted .rail__sets li { position: absolute; top: 0; left: 0; width: 100%; }

.rail__sets a {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--rail-hit);
  height: var(--rail-hit);
  margin: calc(var(--rail-hit) / -2) 0 0 calc(var(--rail-hit) / -2);
  border-radius: 50%;
}

/* warm bloom behind a filled cell, driven by the page glow */
.rail__sets li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--honey) 60%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
}
.rail__sets li.is-filled::before { opacity: calc(var(--rail-glow) * .9); }

.rail__hex {
  position: relative;
  display: block;
  width: var(--rail-hex-w);
  height: var(--rail-hex-h);
  clip-path: var(--rail-hex-clip);
  background: color-mix(in oklab, var(--honey) 46%, transparent);
  transition: transform .35s var(--ease-honey);
}
/* the brighter wall of a filled cell, faded in */
.rail__hex::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--honey-deep);
  opacity: 0;
  transition: opacity .5s;
}
/* empty cell interior */
.rail__hex::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: 1;
  clip-path: var(--rail-hex-clip);
  background: color-mix(in oklab, var(--canvas) 80%, transparent);
}
.rail__well {
  position: absolute;
  inset: 1.5px;
  z-index: 2;
  overflow: hidden;
  clip-path: var(--rail-hex-clip);
}
.rail__fill {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, transparent 0 26%, color-mix(in oklab, var(--wax) 55%, transparent) 33%, transparent 41%),
    linear-gradient(180deg, var(--honey) 0%, var(--honey-deep) 62%, var(--honey-dark) 100%);
  border-top: 1px solid color-mix(in oklab, var(--wax) 80%, transparent);
  transform: translate3d(0, 102%, 0);
  transition: transform .6s var(--ease-honey);
}
.rail__cap {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 36% at 40% 17%, color-mix(in oklab, var(--ink) 70%, transparent), transparent 70%),
    linear-gradient(180deg, var(--wax) 0%, color-mix(in oklab, var(--wax) 88%, transparent) 34%, color-mix(in oklab, var(--wax) 0%, transparent) 56%);
  opacity: 0;
  transform: translate3d(0, -2px, 0);
  transition: opacity .45s ease-out, transform .45s var(--ease-honey);
}
.rail__sets li.is-filled .rail__hex::after { opacity: 1; }
.rail__sets li.is-filled .rail__fill { transform: none; }
.rail__sets li.is-capped .rail__cap { opacity: 1; transform: none; }

@media (hover: hover) {
  .rail__sets a:hover .rail__hex { transform: scale(1.1); }
}

/* ---- labels ---- */
.rail__label {
  position: absolute;
  top: 50%;
  left: calc(100% + 13px);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 560;
  font-stretch: 88%;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  transform: translate3d(-6px, -50%, 0);
  transition: opacity .35s ease-out, transform .35s var(--ease-honey);
  pointer-events: none;
}
.rail__sets a[aria-current="step"] .rail__label { opacity: .62; transform: translate3d(0, -50%, 0); }
.rail__sets a:focus-visible .rail__label { opacity: 1; transform: translate3d(0, -50%, 0); }
@media (hover: hover) {
  .rail__sets a:hover .rail__label { opacity: 1; transform: translate3d(0, -50%, 0); }
}

/* ---- bee ---- */
.rail__bee {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: var(--rail-bee-w);
  height: var(--rail-bee-h);
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 0 1.5px color-mix(in oklab, var(--honey) 45%, transparent));
}
.rail__bee svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hb-s1 { stop-color: var(--wax); }
.hb-s2 { stop-color: var(--honey); }
.hb-s3 { stop-color: var(--honey-deep); }
.hb-body { stroke: var(--accent-ink); stroke-width: .9; }
.hb-stripes { fill: var(--accent-ink); }
.hb-gloss { fill: var(--wax); opacity: .55; }
.hb-head { fill: var(--honey-dark); stroke: var(--accent-ink); stroke-width: .9; }
.hb-eye { fill: var(--ink); }
.hb-sting { fill: var(--accent-ink); }
.hb-ant { fill: none; stroke: var(--honey-dark); stroke-width: 1; stroke-linecap: round; }
.hb-wing {
  fill: color-mix(in oklab, var(--ink) 34%, transparent);
  stroke: color-mix(in oklab, var(--ink) 88%, transparent);
  stroke-width: .75;
}
.hb-wings,
.hb-wing-back {
  transform-box: fill-box;
  transform-origin: 88% 94%;   /* the wing root, at the thorax */
  transition: transform .3s var(--ease-honey), opacity .3s;
}
/* still: wings fold back flat along the body */
.hb-wings { transform: rotate(-38deg) scale(.92); }
.hb-wing-back { transform: rotate(-30deg) scale(.9); opacity: .7; }
.rail__bee.is-flying .hb-wings { transform: none; animation: hb-buzz 64ms linear infinite alternate; }
.rail__bee.is-flying .hb-wing-back { transform: none; opacity: .8; animation: hb-buzz 64ms linear -32ms infinite alternate; }
@keyframes hb-buzz {
  from { transform: rotate(14deg) scale(1, 1); }
  to   { transform: rotate(-22deg) scale(.9, .7); }
}

/* ---- before honey.js mounts (or with no canvas context): a plain line ---- */
.rail:not(.is-mounted)::after,
.rail.is-static::after {
  content: "";
  position: absolute;
  top: 50px;
  bottom: 28px;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--honey), var(--honey-deep));
  opacity: .7;
}
.rail:not(.is-mounted) .rail__bee,
.rail:not(.is-mounted) .rail__honey,
.rail.is-static .rail__honey { display: none; }

/* ---- narrow screens ---- */
@media (max-width: 720px) {
  .rail {
    --rail-hex-h: 14px;
    --rail-hex-w: 12.1px;
    --rail-hit: 28px;
    --rail-home: 20px;
    --rail-home-top: 8px;
    --rail-spout-w: 16px;
    --rail-bee-w: 14px;
    --rail-bee-h: 12px;
  }
  .rail__sets { inset: 54px 0 20px; }
  .rail:not(.is-mounted)::after,
  .rail.is-static::after { top: 37px; bottom: 20px; }
  .rail__hex::before,
  .rail__well { inset: 1.2px; }
  .hm-hex { stroke-width: 1.9; }
  /* labels only on focus, on a small plate */
  .rail__label {
    left: calc(100% + 4px);
    padding: 4px 8px 4px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);

  }
  .rail__sets a[aria-current="step"] .rail__label { opacity: 0; transform: translate3d(-6px, -50%, 0); }
  .rail__sets a:focus .rail__label { opacity: 1; transform: translate3d(0, -50%, 0); }
}
@media (max-width: 720px) and (hover: hover) {
  .rail__sets a:hover .rail__label { opacity: 0; }
  .rail__sets a:focus .rail__label { opacity: 1; }
}

/* ---- reduced motion ---- */
.rail.is-reduced *,
.rail.is-reduced *::before,
.rail.is-reduced *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rail *,
  .rail *::before,
  .rail *::after { transition: none !important; animation: none !important; }
}