@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html:active-view-transition-type(case-enter)::view-transition-old(root) {
    animation: none;
  }
  html:active-view-transition-type(case-enter)::view-transition-new(root) {
    animation: case-slide-in .65s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes case-slide-in {
    from { transform: translateY(100%); }
  }
  @keyframes case-image-in {
    from { clip-path: inset(100% 0 0); translate: 0 28px; }
    to { clip-path: inset(0); translate: 0 0; }
  }
  @supports (animation-timeline: view()) {
    .project-detail-page .hasel-media-grid figure,
    .project-detail-page .hasel-cover:not(.hasel-cover--lead),
    .project-detail-page .hasel-window {
      animation: case-image-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
  }
}

@media (min-width: 661px) {
  .hasel-media-grid > figure:not(.is-wide) > :is(img, video) {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

.hasel-case #project-film { margin-top: clamp(24px, 4vw, 64px); }