@media (prefers-reduced-motion: no-preference) {
  html[data-ball-intro] .slot, html[data-ball-intro] .bio .wd { animation: none; }
  html:is([data-ball-intro="waiting"], [data-ball-intro="running"]) :is(#nav, .bio, #work, #foot) { opacity: 0; }
  html[data-ball-intro="waiting"] #ball { opacity: 0; }
  html[data-ball-intro] #ball { transition: opacity 160ms ease-out; }
  html:is([data-ball-intro="waiting"], [data-ball-intro="running"]) #panel:not(.is-open) { animation: none; }
  html[data-ball-intro="done"] :is(#nav, #work, #foot) { animation: ball-intro-fade 350ms cubic-bezier(0.23, 1, 0.32, 1) both; }
  html[data-ball-intro="done"] .bio { animation: ball-intro-copy 500ms cubic-bezier(0.23, 1, 0.32, 1) both; }
  html[data-ball-intro="done"] .bio.b { animation-delay: 50ms; }
  html[data-ball-intro="done"] .bio.c { animation-delay: 100ms; }
  @keyframes ball-intro-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ball-intro-copy {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}