/* Behavior only: all resting geometry and content remain in the original CSS. */
@keyframes bubble-float {
  0% { transform: translate3d(-32px, calc(-20px + var(--motion-parallax, 0px)), 0) scale(1.06) rotate(-2deg); }
  50% { transform: translate3d(42px, calc(-44px + var(--motion-parallax, 0px)), 0) scale(1.1) rotate(2deg); }
  100% { transform: translate3d(-28px, calc(24px + var(--motion-parallax, 0px)), 0) scale(1.06) rotate(-1deg); }
}
.motion-bubble {
  animation: bubble-float 14s ease-in-out -3s infinite alternate;
  animation-play-state: paused;
}
.motion-bubble.is-floating { animation-play-state: running; }
.motion-paused .motion-bubble { animation-play-state: paused; }
.faq-question img, .year-arrow { transition: transform 260ms cubic-bezier(.22, 1, .36, 1); }
.year-controls button, .menu-panel a { transition: background-color 180ms ease; }
/* Individual transforms compose with the original icon rotations. */
.motion-ready a, .motion-ready button, .motion-ready summary {
  transition: translate 220ms ease, scale 220ms ease, background-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .motion-ready a:hover, .motion-ready button:enabled:hover, .motion-ready summary:hover { translate: 0 -3px; }
}
.motion-ready button:enabled:active, .motion-ready summary:active { scale: .98; }
@supports (background-color: color-mix(in srgb, #000, #fff)) {
  .motion-ready #container .page-artboard {
    background-color: color-mix(in srgb, var(--page-background), var(--accent) var(--motion-tint, 0%));
    transition: background-color 160ms linear;
  }
}
.motion-ready .year-controls button { transition: flex-grow 280ms cubic-bezier(.22, 1, .36, 1), background-color 180ms ease; }
html.motion-reduced { scroll-behavior: auto; }
.motion-reduced .motion-bubble { animation: none !important; }
.motion-reduced #container .page-artboard { transition: none; }
.motion-reduced .faq-question img, .motion-reduced .year-arrow,
.motion-reduced .year-controls button, .motion-reduced .menu-panel a { transition: none; }
.motion-reduced a, .motion-reduced button, .motion-reduced summary { translate: none !important; scale: none !important; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-bubble { animation: none !important; }
  .faq-question img, .year-arrow, .year-controls button, .menu-panel a { transition: none; }
  .motion-ready #container .page-artboard { transition: none; }
  .motion-ready a, .motion-ready button, .motion-ready summary { translate: none !important; scale: none !important; transition: none; }
}