/* Small, user-driven responses complement the larger entrance choreography.
   Only decoration moves: labels, hit areas, and keyboard outlines stay put. */
.hero-event-link,
.race-stage {
  position: relative;
}

.hero-event-link::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--lime);
  pointer-events: none;
  clip-path: inset(0);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero-arts-link::after { background: var(--ink); }

.station-icon svg { transform-origin: center 70%; }
.arts-row-mark { transform-origin: center 70%; }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion-paused]) .hero-event-link::after {
    transition: transform 500ms var(--motion-ease);
  }
  :root:not([data-motion-paused]) .station-icon svg {
    transition: transform 480ms var(--motion-ease);
  }
  :root:not([data-motion-paused]) .arts-row-mark {
    transition: transform 580ms var(--motion-ease);
  }
  :root:not([data-motion-paused]) :is(.photo-link, .perk-image) img {
    transition: transform 850ms var(--motion-ease);
  }
  :root:not([data-motion-paused]) :is(.cta-arrow, .arts-rsvp > span,
    .button > span, .arts-preview-link > span) {
    transition: transform 380ms var(--motion-ease);
  }

  /* Keyboard receives the same directional cues, including on touch laptops. */
  :root:not([data-motion-paused]) .hero-event-link:focus-visible::after {
    transform: scaleX(1);
  }
  :root:not([data-motion-paused]) :is(.photo-link, .perk-image):focus-visible img {
    transform: scale(1.035);
  }
  :root:not([data-motion-paused]) :is(.button:not(:disabled), .nav-cta):focus-visible .cta-arrow,
  :root:not([data-motion-paused]) :is(.button:not(:disabled), .arts-rsvp, .arts-preview-link):focus-visible > span {
    transform: translate(4px, -4px);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root:not([data-motion-paused]) .hero-event-link:hover::after {
    transform: scaleX(1);
  }
  :root:not([data-motion-paused]) .station-list li:hover .station-icon svg {
    transform: translateY(-3px) rotate(-3deg) scale(1.055);
  }
  :root:not([data-motion-paused]) .station-list li:nth-child(even):hover .station-icon svg {
    transform: translateY(-3px) rotate(3deg) scale(1.055);
  }
  :root:not([data-motion-paused]) .arts-schedule li:hover .arts-row-mark {
    transform: rotate(35deg) scale(1.1);
  }
  :root:not([data-motion-paused]) .arts-schedule li:nth-child(even):hover .arts-row-mark {
    transform: translateX(3px) rotate(-9deg);
  }
  :root:not([data-motion-paused]) :is(.photo-link, .perk-image):hover img {
    transform: scale(1.035);
  }
  :root:not([data-motion-paused]) :is(.button:not(:disabled), .nav-cta):hover .cta-arrow,
  :root:not([data-motion-paused]) :is(.button:not(:disabled), .arts-rsvp, .arts-preview-link):hover > span {
    transform: translate(4px, -4px);
  }
}

/* Reset older hover rules as well, so pausing is immediate and predictable. */
:root[data-motion-paused] :is(.station-icon svg, .arts-row-mark,
  .photo-link img, .perk-image img, .cta-arrow, .arts-rsvp > span,
  .button > span, .arts-preview-link > span, .hero-event-link-arrow,
  .explore-link > span:last-child) {
  transform: none !important;
  transition: none !important;
}
:root[data-motion-paused] .hero-event-link::after {
  transition: none !important;
  transform: scale(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .station-icon svg, .arts-row-mark, .arts-rsvp > span, .button > span {
    transform: none !important;
    transition: none !important;
  }
  .hero-event-link::after { display: none; }
}