/* Motion only. Component geometry, surfaces and states belong to site.css. */
.reading-progress { transform: scaleX(0); transform-origin: left; }
@property --nav-beam-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
/* The requested perimeter accent paints only this small control on a six-second cycle. */
.motion-on .nav-cta.is-visible { animation: nav-perimeter 6s linear infinite; }
@keyframes nav-perimeter { to { --nav-beam-angle: 360deg; } }
.model-word { transform-origin: 50% 100%; }
.programme-action .icon { transition: transform 180ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .motion-on .programme-action:hover .icon { transform: translate(2px, -2px); }
  .motion-on .programme-action[data-segment]:hover .icon { transform: translateY(2px); }
}

.button, .programme, .programme-action, .text-link, .route, .motion-toggle,
.menu-toggle, #main-nav a, .film-controls a, .film-controls button,
.interest-choices label > span, summary {
  transition: color var(--duration-ui, 180ms) var(--ease),
    background-color var(--duration-ui, 180ms) var(--ease),
    border-color var(--duration-ui, 180ms) var(--ease);
}
summary > span { transition: transform var(--duration-ui, 180ms) var(--ease); }
details[open] summary > span { transform: rotate(45deg); }

#signup-form[aria-busy="true"] .button-icon .icon { animation: request-pending 800ms linear infinite; }
@keyframes request-pending { to { transform: rotate(360deg); } }

.page-hidden *, .page-hidden *::before, .page-hidden *::after { animation-play-state: paused !important; }
html:not(.motion-on) { scroll-behavior: auto; }
html:not(.motion-on) *, html:not(.motion-on) *::before, html:not(.motion-on) *::after {
  transition: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}