/* Motion shares the site's existing palette and geometry. Text and controls
   stay in place on interaction; only pictures and directional icons move. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 11px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 10px/1.2 Montserrat,sans-serif; cursor: pointer; white-space: nowrap; }
.motion-toggle-icon { display: block; width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.motion-toggle[data-paused="true"] .motion-toggle-icon { width: 0; height: 0; border: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }
.motion-toggle:disabled { cursor: default; color: var(--muted); }
.race-stage { position: relative; }
.stage-motion-rule { position: absolute; top: -4px; left: -1px; right: -1px; height: 4px; background: var(--lime); transform-origin: left center; pointer-events: none; }
.race-stage:has(.stage-motion-rule) { border-top-color: #45532b; }
@media (max-width: 760px) { header nav { gap: 10px; } .motion-toggle { padding: 8px; font-size: 9px; gap: 6px; } }
@media (max-width: 480px) { .motion-toggle { width: 44px; flex-shrink: 0; } .motion-toggle-label { display: none; } }
@media (max-width: 360px) { header { gap: 8px; } header nav { gap: 6px; } header nav .nav-cta { padding-inline: 8px; } header maps-brand .brand-lockup .company-lockup { font-size: 6px; } }
html[data-motion-paused] { scroll-behavior: auto; }
html[data-motion-paused] *, html[data-motion-paused] *::before, html[data-motion-paused] *::after { animation: none !important; transition: none !important; }
html[data-motion-paused] .campaign-sphere { transform: none !important; }

/* Retire legacy hidden reveals and autonomous loops. */
.reveal-ready, .reveal-ready.is-visible { opacity: 1; transform: none; transition: none; }
.hero-sculpture img { animation: none; }
.button:hover, nav .nav-cta:hover { transform: none; }
.button, nav .nav-cta, .hero-event-link, .arts-preview-link,
.photo-dialog button {
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.hero-event-link-arrow, .explore-link > span:last-child, .arts-preview-link > span {
  transition: transform 300ms var(--motion-ease);
}
.rsvp input, .rsvp select {
  transition: background-color 180ms ease, border-color 180ms ease;
}
.rsvp input:focus, .rsvp select:focus { background-color: var(--paper); }
.photo-dialog[open] .photo-dialog-panel { animation: photo-open 240ms var(--motion-ease); }
@keyframes photo-open {
  from { opacity: .65; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-event-link:is(:hover, :focus-visible) .hero-event-link-arrow { transform: translateY(3px); }
  .arts-preview-link:is(:hover, :focus-visible) > span { transform: translate(2px, -2px); }
  .photo-link img, .perk-image img { transition: transform 800ms var(--motion-ease); }
  .area-photo:is(:hover, :focus-visible) img,
  .gallery-thumb:is(:hover, :focus-visible) img { transform: scale(1.025); }
  .venue-photo .photo-link:focus-visible img { transform: scale(1.025); }
  .perk-image:focus-visible img { transform: scale(1.035); }
}
@media (hover: none), (pointer: coarse) {
  .venue-photo:hover img, .gallery-thumb:hover img, .perk-image:hover img,
  .button:hover span, .explore-link:hover > span:last-child,
  :is(.button, .nav-cta):is(:hover, :focus-visible) .cta-arrow { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .campaign-sphere, .hero-event-link-arrow, .explore-link > span:last-child,
  .arts-preview-link > span, .photo-link img, .perk-image img,
  .photo-dialog[open] .photo-dialog-panel { transform: none !important; animation: none !important; }
}

/* Gesture origins keep impact, swing, and underline motions attached to their subjects. */
.arts-performance .arts-title-script { transform-origin: 8% 80%; }
.race-format { overflow: clip; }
.stage-number { display: inline-block; transform-origin: center 80%; }
.rsvp h2 em { position: relative; display: inline-block; isolation: isolate; }
.rsvp-motion-underline { position: absolute; left: 0; right: 0; bottom: -.09em; height: .055em; min-height: 3px; border-radius: 100%; background: currentColor; transform: rotate(-2deg); transform-origin: left center; pointer-events: none; opacity: .65; }