@media (prefers-reduced-motion: no-preference) {
  .reveal-pending { opacity: 0; transform: translateY(22px); }
  .reveal-ready {
    transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1);
  }
  .hero > div:first-child { animation: arrive .8s ease both; }
  .window { animation: float-window 5s ease-in-out 2; }
  .button { transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }
  .button:hover { transform: translateY(-3px); box-shadow: 0 8px 22px #2859c52b; }
  .button:active { transform: translateY(0); }
  .button svg { transition: transform .22s ease; }
  .button:hover svg { transform: translate(2px,-2px); }
  .project .poster { transition: transform .35s ease, box-shadow .35s ease; }
  .project:hover .poster { transform: translateY(-5px); box-shadow: 0 14px 30px #244b8e20; }
  .process article { transition: transform .25s ease, box-shadow .25s ease; }
  .process article:hover { transform: translateY(-4px); box-shadow: 0 10px 25px #244b8e12; }
  details[open] p { animation: arrive .3s ease both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes float-window {
    0%,100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-10px) rotate(-4deg); }
  }
}