/* SVG timeline geometry and interactions. */
.timeline-board {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  overflow: hidden;
  --card-left: 200px;
}

.timeline-svg {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  max-width: 100%;
  max-height: none;
  --band-w: 22px;
  --war-w: 16px;
  --label-size: 10.5px;
  --pill-size: 11px;
  --mark-size: 9.5px;
}

.band-group {
  opacity: 1;
  transition: opacity 650ms cubic-bezier(.22, .61, .36, 1);
}

.band-halo,
.band-halo-soft {
  fill: none;
  stroke: var(--paper);
  stroke-width: calc(var(--w, var(--band-w)) + 3px);
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.band-halo-soft {
  stroke-width: calc(var(--w, var(--band-w)) + 7px);
  opacity: .35;
}

.band {
  fill: none;
  stroke: var(--band-color, var(--kind-dynasty));
  stroke-width: var(--w, var(--band-w));
  stroke-linecap: round;
  stroke-linejoin: round;
  cursor: pointer;
  pointer-events: stroke;
}

.band-sheen {
  fill: none;
  stroke: #fff9e8;
  stroke-width: 1;
  opacity: .06;
  pointer-events: none;
  transition: opacity 650ms cubic-bezier(.22, .61, .36, 1);
}

.band-group.is-hover .band-sheen { opacity: .3; }

.band-hit {
  fill: none;
  stroke: transparent;
  stroke-width: var(--hit-w, 22px);
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: pointer;
}

.timeline-svg.is-dimming .band-group:not(.is-active),
.timeline-svg.is-dimming .band-label:not(.is-active) {
  opacity: .18;
}

.band-label {
  fill: #fff4dc;
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: 0.05em;
  pointer-events: none;
  opacity: 1;
  transition: opacity 650ms cubic-bezier(.22, .61, .36, 1);
}

.band-label.thin,
.band-label.hair {
  font-size: calc(var(--label-size) - 1px);
}

.load-error {
  max-width: 560px;
  margin: 40px auto;
  padding: 24px;
  color: var(--red-deep);
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 14px;
}

.spine {
  fill: #55564b;
}

.spine-progress {
  fill: var(--gold-bright);
  transition: height 120ms linear;
}

.connector {
  stroke: var(--c, var(--line));
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.4;
}

.year-pill {
  cursor: pointer;
  pointer-events: all;
}

.pill-inner {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 450ms cubic-bezier(.22, .61, .36, 1);
}

.pill-ring {
  fill: var(--gold-bright);
  opacity: .7;
}

.pill-halo {
  fill: var(--paper);
}

.pill-body {
  fill: var(--c, var(--ink));
  stroke: transparent;
  stroke-width: 2;
  transition: stroke 450ms ease, fill 450ms ease;
}

.year-pill text {
  fill: #fff8ea;
  font-family: var(--sans);
  font-size: var(--pill-size);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.year-pill:hover .pill-inner,
.year-pill.is-active .pill-inner,
.year-pill.is-current .pill-inner {
  transform: scale(1.06);
}

.year-pill:hover .pill-body,
.year-pill.is-active .pill-body,
.year-pill.is-current .pill-body {
  stroke: var(--ink);
}

/* Card-less boundary pills (an event that only starts/ends a span) are outlined. */
.year-pill.minor .pill-body {
  fill: var(--paper);
  stroke: var(--c, var(--ink));
  stroke-width: 1.5;
}

.year-pill.minor text {
  fill: var(--c, var(--ink));
}

.year-pill.minor:hover .pill-body,
.year-pill.minor.is-active .pill-body,
.year-pill.minor.is-current .pill-body {
  fill: var(--c, var(--ink));
  stroke: var(--ink);
}

.year-pill.minor:hover text,
.year-pill.minor.is-active text,
.year-pill.minor.is-current text {
  fill: #fff8ea;
}

.connector.elbow {
  fill: none;
  stroke-linejoin: round;
}

/* "Nay" milestone: the present year closes the spine; not an entry, so not clickable. */
.year-pill.now {
  pointer-events: none;
}

.year-pill.now .pill-body {
  fill: var(--gold-bright);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.year-pill.now text {
  fill: var(--ink);
  letter-spacing: 0.08em;
}

.year-mark line {
  stroke: var(--ink-soft);
  stroke-width: 1;
  opacity: 0.7;
}

.year-mark text,
.join-year {
  fill: var(--ink-soft);
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  font-family: var(--sans);
  font-size: var(--mark-size);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.playhead {
  position: sticky;
  z-index: 5;
  top: 30vh;
  left: auto;
  width: 0;
  height: 0;
  pointer-events: none;
}

.playhead::before {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: var(--gold-bright);
  border: 2.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--paper);
  content: "";
  transform: rotate(45deg);
  transition: opacity 160ms ease, transform 160ms ease;
}

.playhead::after {
  position: absolute;
  top: 0;
  left: 10px;
  width: min(480px, 46vw);
  height: 1px;
  background: linear-gradient(90deg, var(--gold-bright), transparent 88%);
  content: "";
  opacity: 0.45;
  pointer-events: none;
}

.playhead.is-hidden::before {
  opacity: 0;
  transform: rotate(45deg) scale(0.5);
}

.playhead.is-hidden::after {
  opacity: 0.18;
}

/* Card feedback follows the same quiet fade as the selected ribbon. */
.event-row .event-card {
  transition: border-color 650ms ease, box-shadow 650ms ease, background-color 650ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .band-group, .band-label, .band-sheen, .pill-inner, .pill-body,
  .event-row .event-card { transition: none; }
}