/* Motion is progressive enhancement; the illustration and navigation work without it. */
@media (prefers-reduced-motion: no-preference) {
  /* Move the small colored pieces independently while retaining the main structure. */
  .hero-visual.motion-ready svg path:nth-of-type(7) {
    animation: home-piece-gold 5.6s ease-in-out infinite;
  }
  .hero-visual.motion-ready svg path:nth-of-type(8) {
    animation: home-piece-teal 6.4s ease-in-out infinite;
  }
  .hero-visual.motion-ready svg circle:nth-of-type(2) {
    transform-box: fill-box;
    transform-origin: center;
    animation: home-orbit 8s ease-in-out infinite;
  }
  @keyframes home-piece-gold {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-18px, -12px); }
  }
  @keyframes home-piece-teal {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(16px, 12px); }
  }
  @keyframes home-orbit {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(18deg); }
  }

  .hero-visual.motion-ready { padding-bottom: 38px; }
  .hero-visual.motion-ready .visual-note { bottom: 62px; }
  .hero-visual.motion-ready .visual-index { bottom: 53px; }
  /* Include the same pseudo-classes as the animation rules: pause must win the cascade. */
  .hero-visual.motion-ready.is-motion-paused svg,
  .hero-visual.motion-ready.is-motion-paused svg path:nth-of-type(7),
  .hero-visual.motion-ready.is-motion-paused svg path:nth-of-type(8),
  .hero-visual.motion-ready.is-motion-paused svg circle:nth-of-type(2) { animation-play-state: paused; }
  .motion-toggle:not([hidden]) {
    position: absolute; right: 0; bottom: 0; border: 1px solid #b8acbf;
    border-radius: 3px; padding: 5px 10px; background: #fbfaf7;
    color: #4b176b; font-size: 11px; line-height: 1.4;
  }
  .motion-toggle:hover { background: #eee7f4; }
  header nav a { position: relative; transition: color 220ms ease; }
  header nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -5px;
    height: 2px; background: currentColor; transform: scaleX(0);
    transform-origin: left; transition: transform 220ms ease;
  }
  header nav a:hover::after, header nav a:focus-visible::after { transform: scaleX(1); }
  .nav-cta { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; }
  .nav-cta .arrow { transition: transform 220ms ease; }
  .nav-cta:hover .arrow, .nav-cta:focus-visible .arrow { transform: translateX(4px); }
  @media (max-width: 760px) {
    header nav.open { animation: home-menu-enter 260ms ease-out both; }
    header nav a::after { bottom: 2px; transform-origin: left; }
    @keyframes home-menu-enter {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
  }
}

@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none !important; } }