/* The hero has one route. Light travels along it; the page keeps its native cursor. */
.hero .hero-route {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}
.hero-route .route-main { stroke-width: 1; opacity: .48; }
.hero-route .route-shadow { stroke-width: 13; opacity: .035; }
.hero-route .route-secondary { opacity: .035; stroke-width: .65; }
.route-live { opacity: 0; }
.hero[data-route-ready] .route-live { opacity: 1; }
.route-completed { stroke: #f01f01; stroke-width: 1.5; }
.route-tail-glow { stroke: #f01f01; stroke-width: 12; opacity: .1; }
.route-tail { stroke: #f01f01; stroke-width: 3; opacity: .7; }
.route-tail-core { stroke: #ff6b54; stroke-width: 1.25; opacity: .9; }
.runner-halo { fill: #f01f01; fill-opacity: .075; stroke: none; }
.runner-aura { fill: #f01f01; fill-opacity: .18; stroke: none; }
.runner-edge { fill: #f01f01; stroke: #ff644e; stroke-width: 1; }
.runner-core { fill: #fff4ef; stroke: none; }
.contact-ring { stroke: #f01f01; stroke-width: .7; fill: none; }
.contact-inner { fill: #f01f01; fill-opacity: .12; stroke: #f01f01; stroke-opacity: .45; stroke-width: .7; }
.contact-core { fill: #ff9584; stroke: none; }
.hero-motion-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  min-height: 36px;
  width: fit-content;
  max-width: 100%;
}
.route-impulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 4px 9px 4px 0;
  background: none;
  color: #929292;
  font-size: 11px;
  line-height: 1.5;
  transition: color .2s;
}
.route-impulse:hover { color: #f4f4f4; }
.route-impulse:disabled { cursor: default; color: #858585; }
.impulse-symbol {
  display: grid;
  place-items: center;
  height: 20px;
  width: 20px;
  border: 1px solid #f01f0140;
  border-radius: 50%;
  flex-shrink: 0;
}
.impulse-symbol i { width: 4px; height: 4px; border-radius: 50%; background: #f01f01; }
.impulse-arrow { font-size: 16px; color: #f01f01; margin-left: 3px; }
.hero-motion-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff13;
  background: #0b0b0b;
  border-radius: 50%;
  color: #8d8d8d;
  flex-shrink: 0;
}
.hero-motion-toggle svg { width: 16px; height: 16px; }
.hero-motion-toggle:hover { border-color: #ffffff40; color: #ffffff; }
.hero-motion-toggle:disabled { cursor: default; opacity: .6; }
.motion-play-icon { display: none; }
.hero-motion-toggle[aria-pressed=false] .motion-pause-icon { display: none; }
.hero-motion-toggle[aria-pressed=false] .motion-play-icon { display: block; }
.route-hint { color: #757575; font-size: 10px; line-height: 1.5; margin-left: 6px; }
.hero[data-route-boosted] .impulse-symbol { border-color: #f01f01; background: #f01f0114; }
.hero[data-route-boosted] .route-impulse { color: #dfdfdf; }
@media(max-width:1250px) {
  .route-hint { display: none; }
}
@media(max-width:640px) {
  .hero-motion-controls { margin-top: 13px; gap: 12px; }
  .route-impulse { font-size: 11px; min-height: 44px; padding-right: 8px; }
  .hero-motion-toggle { width: 40px; height: 40px; }
  .hero .hero-grid { row-gap: 159px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-route .route-tail-glow { opacity: .05; }
}

/* A full-length, dark-to-bright history follows the route up to the moving point. */
.route-completed,.route-tail-glow,.route-tail,.route-tail-core {
  stroke: url(#route-history-gradient);
}
.hero[data-route-ready] .route-completed,
.hero[data-route-ready] .route-tail,
.hero[data-route-ready] .route-tail-core { display: none; }
.route-history path { fill: none; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: round; }

/* A fine cursor trace remains beneath real text and controls. */
.hero .hero-grid { position: relative; z-index: 2; }
.hero .hero-foot { z-index: 2; }
.hero-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
@media(prefers-reduced-motion:reduce) {
  .hero-flow { display: none; }
}
html[data-motion=off] .hero-flow { display: none; }

/* Six hollow stations belong to the curve. Their names stay quiet until a point passes. */
.route-stops { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.route-stop {
  --heat: 0;
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.stop-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  border: 1px solid #68605e;
  border-radius: 50%;
}
.stop-ring::after {
  content: '';
  position: absolute; inset: -1px;
  border: 1px solid #f01f01;
  border-radius: 50%;
  opacity: var(--heat);
  box-shadow: 0 0 0 4px #f01f0114;
}
.stop-label {
  position: absolute;
  left: 50%; top: calc(50% + 16px);
  transform: translateX(-50%);
  color: #9b9593;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  transition: color .2s;
}
.stop-label small { font-family: var(--mono); font-size: 8px; color: #73645f; margin-right: 7px; }
.route-stop.is-above .stop-label { top: auto; bottom: calc(50% + 16px); }
.route-stop.is-vertical .stop-label { top: 50%; left: calc(50% - 20px); transform: translate(-50%, -50%) rotate(-90deg); }
.route-stop:hover .stop-ring,.route-stop:focus-visible .stop-ring { border-color: #f01f01; }
.route-stop:hover .stop-label,.route-stop:focus-visible .stop-label { color: #f3ece9; }
.route-stop:disabled { cursor: default; }
@media(min-width:641px) and (max-width:1250px) {
  .hero .hero-grid { column-gap: 55px; }
}
@media(max-width:640px) {
  .stop-label { width: 104px; white-space: normal; font-size: 10px; top: calc(50% + 13px); }
  .stop-label small { display: block; position: absolute; top: -32px; width: 100%; margin: 0; font-size: 8px; }
  .stop-ring { width: 11px; height: 11px; }
  .route-stop:nth-child(5) .stop-label { width: 80px; }
}

/* Conditions sit with the promise; the gift owns the main action. */
.hero-facts { display: grid; grid-template-columns: 1fr 1fr 1.15fr; margin-top: 27px; padding-top: 21px; border-top: 1px solid #ffffff16; gap: 18px; max-width: 560px; }
.hero-facts > div + div { border-left: 1px solid #ffffff16; padding-left: 18px; }
.hero-facts strong { display: block; color: #efefef; font-size: 17px; font-weight: 550; letter-spacing: -.025em; line-height: 1.4; white-space: nowrap; }
.hero-facts strong small { font-size: 10px; font-weight: 400; color: #959595; margin-left: 4px; }
.hero-facts > div > span { display: block; color: #858585; font-size: 10px; line-height: 1.6; margin-top: 7px; }
.hero .gift-card { overflow: visible; padding-bottom: 56px; }
.hero .gift-cta { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); width: max-content; max-width: calc(100% - 44px); gap: 28px; min-height: 56px; padding: 18px 22px; justify-content: space-between; font-size: 14px; border: 1px solid #ff5939; border-radius: 8px; background: linear-gradient(115deg, #f01f01, #e51c00); box-shadow: 0 0 0 7px #0c0c0c, 0 12px 28px #00000040; }
.hero .gift-cta:hover { transform: translate(-50%, 50%); background: #ff2a0a; box-shadow: 0 0 0 7px #0c0c0c, 0 12px 28px #f01f0118; }
.hero .gift-cta:focus-visible { outline-offset: 10px; }
.hero-scroll { position: absolute; bottom: 27px; left: 0; right: 0; display: flex; justify-content: flex-end; z-index: 2; }
.hero-scroll a { display: inline-flex; align-items: center; gap: 18px; font-size: 10px; color: #858585; }
.hero-scroll a span { font-size: 23px; color: #b9b9b9; }
.hero .route-secondary { display: none; }
.stop-ring::before,.route-stop::after { content: ''; position: absolute; pointer-events: none; border: 1px solid #f04425; border-radius: 50%; }
.stop-ring::before { inset: -1px; opacity: var(--pulse-opacity, 0); transform: scale(var(--pulse-scale, 1)); }
.route-stop::after { width: 12px; height: 12px; left: 50%; top: 50%; opacity: var(--echo-opacity, 0); transform: translate(-50%, -50%) scale(var(--echo-scale, 1)); }
@media(max-width:1050px) {
  .hero-facts { gap: 12px; }
  .hero-facts > div + div { padding-left: 12px; }
  .hero-facts strong { font-size: 15px; }
}
@media(max-width:640px) {
  .hero-facts { margin-top: 25px; padding-top: 20px; gap: 10px; }
  .hero-facts > div + div { padding-left: 10px; }
  .hero-facts strong { font-size: 14px; }
  .hero-facts strong small { display: block; margin: 0; line-height: 1.3; }
  .hero-facts > div > span { font-size: 9px; }
  .hero .gift-card { padding-bottom: 51px; }
  .hero .gift-cta { width: max-content; min-height: 56px; font-size: 13px; }
  .hero-scroll { position: relative; bottom: auto; margin-top: 65px; justify-content: center; }
  .hero .hero-motion-controls { margin-top: 22px; }
}
@media(prefers-reduced-motion:reduce) {
  .stop-ring::before,.route-stop::after { display: none; }
}

.route-stop:last-child .stop-ring::after { border-color: #ffae91; background: rgb(255 126 88 / var(--finish-light, 0)); box-shadow: 0 0 18px rgb(240 31 1 / var(--finish-light, 0)), 0 0 0 5px #f01f011a; }
.route-stop:last-child .stop-ring::before,.route-stop:last-child::after { border-color: #ff805c; }
@media(min-width:641px) and (max-height:900px) {
  .hero { min-height: 0; height: 100svh; padding-top: 155px; padding-bottom: 115px; }
  .hero h1 { font-size: clamp(43px, 9.2svh, 88px); }
  .hero-copy .eyebrow { margin-bottom: 16px; }
  .hero-lead { margin-top: 18px; font-size: 14px; line-height: 1.55; }
  .hero-sub { font-size: 12px; }
  .hero-facts { margin-top: 18px; padding-top: 14px; }
  .hero-facts > div > span { margin-top: 4px; }
  .hero-motion-controls { margin-top: 12px; }
  .hero .gift-card { padding-top: 22px; padding-bottom: 46px; margin-top: 0; }
  .gift-verb { margin-top: 18px; }
  .gift-value { font-size: clamp(78px, 14svh, 125px); }
  .gift-caption { margin-top: 12px; }
  .gift-route { margin-top: 20px; }
  .gift-card > small { margin-top: 15px; }
}

@media(min-width:641px) and (max-height:900px) {
  .hero .gift-verb { margin-top: 12px; }
  .hero .gift-caption { font-size: 12px; line-height: 1.6; }
  .hero .gift-route { margin-top: 16px; }
  .hero .gift-terms { margin-top: 10px; }
  .hero .gift-card > small { font-size: 9.5px; line-height: 1.6; }
}

/* The final arrival resolves into a bright seal, then quietly clears. */
.route-finish { pointer-events: none; }
.finish-flash { fill: #ffd3ac; stroke: none; }
.finish-wave { fill: none; stroke: #ff956e; stroke-width: 1.65; }
.finish-sweep { fill: none; stroke: #ffb18a; stroke-width: 1.6; }
.finish-ray { stroke: #ff9a73; stroke-width: 1.4; stroke-linecap: round; }
.finish-seal { fill: #f01f01; stroke: #ffb998; stroke-width: 1; }
.finish-check { fill: none; stroke: #fff7ec; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.route-stop:last-child .stop-label { color: color-mix(in srgb, #fff2e9 calc(var(--finish-label, 0) * 100%), #9b9593); }
@media(prefers-reduced-motion:reduce) { .route-finish { display: none; } }

/* A small idea lights the first station; the moving task grows from there. */
.route-idea { pointer-events: none; }
.idea-halo { fill: url(#station-warm-light); stroke: none; }
.idea-bulb { fill: none; stroke: #ffdcc2; stroke-width: 2; }
.idea-filament { fill: none; stroke: #ffdcc2; stroke-width: 2; }
.idea-rays { fill: none; stroke: #ff8555; stroke-width: 1.4; }
.route-stop:first-child { --glyph-light: var(--idea-light, 0); }
@media(prefers-reduced-motion:reduce) { .route-idea { display: none; } .route-stop:first-child .stop-ring { opacity: 1; } }

/* Each intermediate station briefly reveals its own silhouette as the task passes. */
.route-stage-icon { pointer-events: none; }
.stage-icon-halo { fill: url(#station-warm-light); stroke: none; }
.stage-icon-art { fill: none; stroke: #ffdcc2; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.route-stop:not(:first-child):not(:last-child) { --glyph-light: var(--icon-light, 0); }
@media(prefers-reduced-motion:reduce) {
  .route-stage-icon { display: none; }
  .route-stop:not(:first-child):not(:last-child) .stop-ring { opacity: 1; }
}

/* Hide only the small stationary ring; its expanding waves remain independent of the icon. */
.route-stop:not(:last-child) .stop-ring { border-color: rgb(104 96 94 / calc(1 - var(--glyph-light, 0))); }
.route-stop:not(:last-child) .stop-ring::after { opacity: calc(var(--heat) * (1 - var(--glyph-light, 0))); }
@media(prefers-reduced-motion:reduce) {
  .route-stop:not(:last-child) .stop-ring { border-color: #68605e; }
}

@media(prefers-reduced-motion:reduce) { .route-icon-masked { mask: none; } }

/* Two gift steps: registration and the first task, one marker per label. */
.hero .gift-route > i { flex: 0 0 7px; }
.hero .gift-route > span { flex: 1; }