@media screen and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  /* The sheet slides across a still page. Shared artwork travels above both sheets. */
  ::view-transition { pointer-events: none; }
  ::view-transition-group(*) {
    animation-duration: 480ms;
    animation-timing-function: cubic-bezier(.33,.02,.18,1);
  }
  ::view-transition-old(root) { animation: sheet-under 480ms ease-out both; }
  ::view-transition-new(root), ::view-transition-new(print-cover) {
    mix-blend-mode: normal;
    animation: sheet-across 480ms cubic-bezier(.56,0,.18,1) both;
  }
  :root[data-turn-back]::view-transition-new(root),
  :root[data-turn-back]::view-transition-new(print-cover) { animation-name: sheet-back; }
  ::view-transition-group(print-cover) { z-index: 1; }
  ::view-transition-group(print-mast) { z-index: 2; }
  ::view-transition-image-pair(print-cover) { overflow: clip; }
  ::view-transition-old(print-cover), ::view-transition-new(print-cover) {
    width:100%; height:100%; object-fit: cover; mix-blend-mode: normal;
  }
  ::view-transition-old(print-cover) { animation: sheet-under 480ms linear both; }
  ::view-transition-old(print-cover):only-child { animation: release-cover 180ms ease-in both; }
  .studio-case .case .case-preview { view-transition-name:none; }
  @keyframes sheet-under { from, to { opacity:1; } }
  @keyframes release-cover { from { opacity:1; } to { opacity:0; } }
  @keyframes sheet-across {
    from { clip-path: polygon(100% 0, 107% 0, 107% 100%, 107% 100%); }
    to { clip-path: polygon(-7% 0, 107% 0, 107% 100%, 0 100%); }
  }
  @keyframes sheet-back {
    from { clip-path: polygon(-7% 0, -7% 0, 0 100%, -7% 100%); }
    to { clip-path: polygon(-7% 0, 100% 0, 107% 100%, -7% 100%); }
  }

  .next-study { position:relative; }
  .next-study::before {
    content:""; position:absolute; top:-2px; left:0; right:0; height:3px;
    background:#df542f; transform:scaleX(0); transform-origin:left;
    transition:transform 320ms cubic-bezier(.2,.8,.2,1);
  }
  .next-study:is(:hover,:focus-visible)::before { transform:scaleX(1); }
  .next-study .arrow { transition:transform 220ms ease-out; }
  .next-study:is(:hover,:focus-visible) .arrow { transform:translateX(.15em); }
}