/* One interaction rhythm for every clickable control on the public website. */
:root { --control-speed: 180ms; --control-ease: cubic-bezier(.2,.75,.25,1); }
.button,
.text-link,
.footer-link,
.language-selector select,
.map-motion-toggle,
.corridor-overview-select,
.service-autoplay-toggle,
.service-slide-choices button,
.service-carousel .service-arrow,
.rate-console .console-link,
.rate-console .route-swap,
.menu-toggle {
  transition-property: transform, background-color, border-color, color, box-shadow, opacity;
  transition-duration: var(--control-speed);
  transition-timing-function: var(--control-ease);
}

/* The two pause controls are one component in two locations. */
.map-motion-toggle,
.service-autoplay-toggle {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #4b5745;
  border-radius: 2px;
  background: #111612;
  color: #d1d9ca;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover,
  .text-link:hover,
  .footer-link:hover,
  .language-selector select:not(:disabled):hover,
  .map-motion-toggle:not(:disabled):hover,
  .corridor-overview-select:not(:disabled):hover,
  .service-autoplay-toggle:not(:disabled):hover,
  .service-slide-choices button:not(:disabled):hover,
  .rate-console .console-link:not(:disabled):hover,
  .rate-console .route-swap:not(:disabled):hover,
  .menu-toggle:not(:disabled):hover {
    transform: translateY(-2px);
  }
  .map-motion-toggle:not(:disabled):hover,
  .service-autoplay-toggle:not(:disabled):hover {
    background: #242c20;
    border-color: var(--signal);
    color: var(--signal);
    box-shadow: 0 7px 18px rgba(0,0,0,.16);
  }
  .text-link:hover { color: var(--ink); border-color: var(--ink); }
  .footer-link:hover { color: #587a00; border-color: #587a00; }
  .site-footer .footer-link:hover { color: var(--signal); border-color: var(--signal); }
  .language-selector select:not(:disabled):hover {
    border-color: #728560;
    background-color: rgba(199,255,56,.08);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
  }
  .service-slide-choices button:not(:disabled):hover { color: var(--white); }
  .service-carousel .service-arrow:not(:disabled):hover {
    transform: translateY(calc(-50% - 2px));
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
  }
}

.button:not(:disabled):active,
.text-link:active,
.footer-link:active,
.language-selector select:not(:disabled):active,
.map-motion-toggle:not(:disabled):active,
.corridor-overview-select:not(:disabled):active,
.service-autoplay-toggle:not(:disabled):active,
.service-slide-choices button:not(:disabled):active,
.rate-console .console-link:not(:disabled):active,
.rate-console .route-swap:not(:disabled):active,
.menu-toggle:not(:disabled):active { transform: translateY(0); }

.button:focus-visible,
.text-link:focus-visible,
.footer-link:focus-visible,
.language-selector select:focus-visible,
.map-motion-toggle:focus-visible,
.corridor-overview-select:focus-visible,
.service-autoplay-toggle:focus-visible,
.service-slide-choices button:focus-visible,
.service-carousel .service-arrow:focus-visible,
.rate-console button:focus-visible,
.menu-toggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

button:disabled, .button[aria-disabled="true"] { transform: none; box-shadow: none; }

@media (max-width: 820px) and (hover: hover) and (pointer: fine) {
  .service-carousel .service-arrow:not(:disabled):hover { transform: translateY(-2px); }
}
@media (max-width: 600px) and (hover: hover) and (pointer: fine) {
  .rate-console .route-swap:not(:disabled):hover { transform: rotate(90deg) translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .button, .text-link, .footer-link, .language-selector select,
  .map-motion-toggle, .corridor-overview-select, .service-autoplay-toggle,
  .service-slide-choices button, .service-carousel .service-arrow,
  .rate-console .console-link, .rate-console .route-swap, .menu-toggle { transition: none; }
  .button:hover, .text-link:hover, .footer-link:hover, .language-selector select:hover,
  .map-motion-toggle:hover, .corridor-overview-select:hover, .service-autoplay-toggle:hover,
  .service-slide-choices button:hover, .service-carousel .service-arrow:hover,
  .rate-console .console-link:hover, .rate-console .route-swap:hover, .menu-toggle:hover { transform: none !important; }
}