@media screen and (prefers-reduced-motion: no-preference) {
  .study-active .hero-copy { animation: none; }
  .study-word.study-pending { opacity: .45; }
  .study-word.study-entered {
    animation: study-word-in 340ms ease-out var(--study-delay) both;
  }

  :focus-visible .study-word { opacity: 1; animation: none; }

  .study-card-photo.study-pending { clip-path: inset(0 88% 0 0); }
  .study-card-photo.study-entered {
    animation: study-photo-in 720ms cubic-bezier(.25, .55, .3, 1) var(--study-delay) both;
  }

  .study-active .hero-photo { overflow: hidden; }
  .page-hero.study-page-hero { background-image: none; }
  .study-page-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: inherit;
    background-size: inherit;
    pointer-events: none;
  }
  .study-hero-photo.study-pending { opacity: .55; }
  .study-hero-photo.study-entered {
    animation: study-hero-in 680ms cubic-bezier(.25, .55, .3, 1) both;
  }

  @keyframes study-word-in {
    from { opacity: .45; }
    to { opacity: 1; }
  }

  @keyframes study-photo-in {
    from { clip-path: inset(0 88% 0 0); }
    to { clip-path: inset(0); }
  }

  @keyframes study-hero-in {
    from { opacity: .55; transform: scale(1.045); }
    to { opacity: 1; transform: none; }
  }
}