:root {
  --motion-micro: 120ms;
  --motion-nav: 210ms;
  --motion-data: 560ms;
  --motion-event: 1100ms;
  --ease-byke: cubic-bezier(.16, .75, .2, 1);
}
button, .btn, summary { touch-action: manipulation; }
button, .btn { transition: transform var(--motion-micro) var(--ease-byke), background var(--motion-micro), color var(--motion-micro), border-color var(--motion-micro); }
button:active:not(:disabled), .btn:active { transform: translateY(2px) scale(.985); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--txt); outline-offset: 3px; }
[role='button']:focus-visible { outline: 2px solid var(--txt); outline-offset: 3px; }
header.top { animation: byke-arrive 640ms var(--ease-byke); }
@keyframes byke-arrive { from { transform: translateY(8px); } to { transform: none; } }
.view.active { animation: byke-nav var(--motion-nav) var(--ease-byke); }
@keyframes byke-nav { from { opacity: .5; transform: translateX(var(--nav-offset, 16px)); } to { opacity: 1; transform: none; } }
nav.tabs::before { content: ''; position: absolute; left: 0; top: -1px; width: 20%; height: 3px; background: var(--accent); transform: translateX(calc(var(--active-tab, 0) * 100%)); transition: transform var(--motion-nav) var(--ease-byke); }
nav.tabs button.active::after { display: none; }
.cockpit-progress span, .stimulus-bar span { transition: width var(--motion-data) var(--ease-byke); }
header.top h1 { position: relative; }
header.top h1::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 22px; background: var(--accent); opacity: 0; }
body[data-living-state='training'] header.top h1::after { opacity: 1; animation: byke-pulse var(--motion-event) var(--ease-byke) 1; }
body[data-event] header.top h1::after { animation: byke-strike var(--motion-event) var(--ease-byke); }
@keyframes byke-pulse { 0%,100% { transform: scaleX(1); } 45% { transform: scaleX(2); } }
@keyframes byke-strike { from { opacity: 1; width: 0; } 55% { opacity: 1; width: 100%; } to { opacity: 0; width: 100%; } }
.recovery-breath { height: 3px; background: currentColor; opacity: .22; transform-origin: left; margin: 24px 0 6px; animation: byke-breathe 5s ease-in-out 2; }
@keyframes byke-breathe { 0%,100% { transform: scaleX(.5); opacity: .16; } 50% { transform: scaleX(.85); opacity: .3; } }
.chart-history { stroke-dasharray: 1; stroke-dashoffset: 0; animation: byke-draw var(--motion-data) var(--ease-byke); }
@keyframes byke-draw { from { stroke-dashoffset: 1; } }
.future { border-style: dashed !important; }
.past { color: var(--muted); }
.present { color: var(--accent); }
body[data-living-state='low'] .readiness-choices button.active { background: var(--txt); color: var(--bg); }
body[data-living-state='low'] .readiness-choices button.active span { color: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  button:active:not(:disabled), .btn:active { transform: none; }
  .recovery-breath { transform: none; }
}