.map-card .route-replay {
  position: absolute;
  z-index: 1000;
  bottom: 56px;
  left: 18px;
  border: 1px solid var(--hair-strong);
  border-radius: 3px;
  padding: 9px 12px;
  background: var(--bg-elev);
  color: var(--ink);
  font: 500 11px var(--ff-mono);
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  transition: border-color .2s, transform .2s;
}
.map-card .route-replay:hover:not(:disabled) { border-color: var(--orange); transform: translateY(-2px); }
.map-card .route-replay:disabled { cursor: default; opacity: .8; }
.map-card .route-replay:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.map-card .route-head { fill: var(--orange); stroke: #fff; stroke-width: 1.5px; pointer-events: none; filter: drop-shadow(0 0 4px var(--orange)); }

/* Transparent, local warmth behind the hero; content stays on its existing canvas. */
.hero { position: relative; isolation: isolate; }
.hero-atmosphere {
  position: absolute; inset: 0; max-height: 620px;
  z-index: -1; overflow: hidden; pointer-events: none;
  transform: translate(var(--hero-pointer-x, 0px), var(--hero-pointer-y, 0px));
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.hero-glow {
  position: absolute; left: -8%; top: -8%; width: 78%; height: 110%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--orange) 22%, transparent), transparent 70%);
  opacity: .55;
  animation: heroGlowDrift 18s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero-glow-secondary {
  left: 16%; top: 8%; width: 52%; height: 90%;
  opacity: .3; animation-duration: 25s; animation-direction: alternate-reverse;
}
[data-theme="dark"] .hero-glow { opacity: .8; }
[data-theme="dark"] .hero-glow-secondary { opacity: .4; }
.hero-atmosphere.is-running .hero-glow { animation-play-state: running; }
@keyframes heroGlowDrift {
  from { transform: translate(-3%, -2%) scale(.96); }
  to { transform: translate(7%, 4%) scale(1.04); }
}

/* Quick feedback on controls, with the same focus treatment throughout. */
.page :is(.btn, .theme-toggle, .race-tab, .seg-prs-toggle, .route-replay, .runlead-badge, .shoe-ticker-toggle) {
  transition: color .18s, background-color .18s, border-color .18s,
    transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
}
.page :is(.btn, .theme-toggle, .race-tab, .seg-prs-toggle, .route-replay, .runlead-badge, .shoe-ticker-toggle):focus-visible {
  outline: 2px solid var(--orange); outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .page :is(.btn, .theme-toggle, .race-tab, .seg-prs-toggle, .route-replay, .runlead-badge, .shoe-ticker-toggle):hover:not(:disabled) {
    transform: translateY(-2px);
  }
}
.page :is(.btn, .theme-toggle, .race-tab, .seg-prs-toggle, .route-replay, .runlead-badge, .shoe-ticker-toggle):active:not(:disabled) {
  transform: translateY(1px) scale(.97); transition-duration: .08s;
}
:is(.foot .links a, .journal p a, .quick-facts a) {
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat; background-position: left bottom;
  background-size: 0 1px;
  transition: color .18s, background-size .22s cubic-bezier(.22,1,.36,1);
}
:is(.foot .links a, .journal p a, .quick-facts a):is(:hover, :focus-visible) { background-size: 100% 1px; }
:is(.foot .links a, .journal p a, .quick-facts a):focus-visible {
  outline: 2px solid var(--orange); outline-offset: 4px;
}

/* Matching groups loop cleanly, fading into the map's existing surface. */
.shoe-ticker-wrap {
  min-width: 0;
  mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.shoe-ticker-wrap:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.shoe-ticker-wrap:focus-within,
.shoe-ticker-wrap:not(:has(.scrolling)) { mask-image: none; overflow-x: auto; }
.shoe-ticker { gap: 0; width: max-content; }
.shoe-ticker-group { display: inline-flex; align-items: center; gap: 24px; padding-right: 24px; }
.shoe-ticker.scrolling { animation-play-state: paused; }
.shoe-ticker.scrolling.is-running { animation-play-state: running; }
.shoe-ticker-toggle {
  flex-shrink: 0; min-width: 64px; min-height: 32px; padding: 6px 8px;
  border: 1px solid var(--hair-strong); border-radius: 999px;
  background: transparent; color: var(--muted);
  font: 10px var(--ff-mono); text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer;
}
.shoe-ticker-toggle:hover { color: var(--orange); border-color: var(--orange); }
.shoe-ticker-toggle[hidden] { display: none; }

/* The annual goal grows once when the bar itself is visible, then catches the light. */
.goal-bar .fill {
  transform-origin: left center; overflow: hidden;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.goal-bar.goal-ready:not(.goal-seen) .fill { transform: scaleX(0); }
.goal-bar.goal-seen .fill { transform: scaleX(1); }
.goal-bar.goal-sweep .fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.45) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: goalSweep 1.3s .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes goalSweep { to { transform: translateX(100%); } }

/* Theme snapshots reveal the new palette from the toggle in either direction. */
.theme-reveal body, .theme-reveal body::before,
.theme-reveal body *, .theme-reveal body *::before, .theme-reveal body *::after {
  transition: none !important;
}
.theme-reveal::view-transition-group(root) { animation: none; }
.theme-reveal::view-transition-image-pair(root) { isolation: auto; }
.theme-reveal::view-transition-old(root),
.theme-reveal::view-transition-new(root) { mix-blend-mode: normal; }
.theme-reveal::view-transition-old(root) { animation: none; z-index: 1; }
.theme-reveal::view-transition-new(root) {
  z-index: 2;
  animation: themeReveal .65s cubic-bezier(.22,1,.36,1) both;
}
@keyframes themeReveal {
  from { clip-path: circle(0px at var(--theme-x) var(--theme-y)); }
  to { clip-path: circle(var(--theme-radius) at var(--theme-x) var(--theme-y)); }
}
/* Older browsers blend their existing colors without a snapshot. */
.theme-fade body, .theme-fade body::before,
.theme-fade body *, .theme-fade body *::before, .theme-fade body *::after {
  transition: background-color .22s ease, color .22s ease, border-color .22s ease,
    fill .22s ease, stroke .22s ease !important;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .runs { perspective: 1000px; }
  .run.run-reactive {
    isolation: isolate;
    translate: 0 0;
    rotate: 0deg;
    transition: background .2s, opacity .6s, transform .6s,
      translate .3s cubic-bezier(.22,1,.36,1), rotate .3s ease-out, box-shadow .3s;
    transition-delay: 0s;
  }
  .run.run-reactive::after {
    content: "";
    position: absolute; inset: 0;
    z-index: -1; pointer-events: none;
    background: radial-gradient(circle 220px at var(--run-light-x, 50%) var(--run-light-y, 50%),
      color-mix(in srgb, var(--orange) 17%, transparent), transparent 75%);
    opacity: 0;
    transition: opacity .3s;
  }
  .run.run-reactive.run-pointer-active {
    z-index: 2;
    translate: 0 -3px;
    rotate: var(--run-axis-x, 1) var(--run-axis-y, 0) 0 var(--run-angle, 0deg);
    box-shadow: 0 10px 24px rgba(0,0,0,.12), inset 0 0 0 1px var(--orange-wash);
  }
  .run.run-reactive.run-pointer-active::after { opacity: 1; }
}

@media (max-width: 600px) {
  .map-card .route-replay { left: 12px; bottom: 54px; }
  .shoe-ticker-toggle { min-height: 40px; }
  .map-shoe-bar { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere { transform: none; transition: none; }
  .hero-glow { animation: none; }
  .map-card .route-replay { transition: none; }
  .theme-reveal::view-transition-new(root) { animation: none; }
  .theme-fade body, .theme-fade body::before,
  .theme-fade body *, .theme-fade body *::before, .theme-fade body *::after { transition: none !important; }
  .page :is(.btn, .theme-toggle, .race-tab, .seg-prs-toggle, .route-replay, .runlead-badge, .shoe-ticker-toggle),
  :is(.foot .links a, .journal p a, .quick-facts a), .btn .arrow { transition: none; }
  .page :is(.btn, .theme-toggle, .race-tab, .seg-prs-toggle, .route-replay, .runlead-badge, .shoe-ticker-toggle):is(:hover, :active):not(:disabled),
  .btn:hover .arrow { transform: none; }
  .shoe-ticker-wrap { mask-image: none; overflow-x: auto; }
  .shoe-ticker.scrolling { animation: none; transform: none; }
  .shoe-ticker-group[aria-hidden="true"] { display: none; }
  .shoe-ticker-toggle { display: none; }
  .goal-bar .fill { transition: none; }
  .goal-bar.goal-ready .fill { transform: none; }
  .goal-bar.goal-sweep .fill::after { animation: none; display: none; }
}