/* Stationary frames keep links, captions and controls in normal flow.
   Individual translate composes with the existing reveal/hover transform. */
.t-about figure img { object-position: center 18%; }
@keyframes photo-depth {
  from { translate: 0 -5%; }
  to { translate: 0 5%; }
}
@keyframes film-depth-forward {
  from { translate: 0 -12px; }
  to { translate: 0 12px; }
}
@keyframes film-depth-backward {
  from { translate: 0 10px; }
  to { translate: 0 -10px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.taste .t-depth-frame{position:relative;overflow:hidden;view-timeline:--shared-depth block}
    body.taste .t-depth-frame>img:is(img,.taste-still){position:absolute;inset:-10% 0 auto;height:120%;width:100%;object-fit:cover;animation:photo-depth linear both;animation-timeline:--shared-depth;animation-range:entry 0% exit 100%}
    .t-hero-image { view-timeline: --hero-depth block; }
    .t-about figure { position: relative; view-timeline: --portrait-depth block; }
    .t-hero-image img, .t-about figure img {
      position: absolute;
      inset: -10% 0 auto;
      height: 120%;
      animation: photo-depth linear both;
      animation-range: entry 0% exit 100%;
    }
    .t-hero-image img { animation-timeline: --hero-depth; }
    .t-about figure img { animation-timeline: --portrait-depth; }
    .t-bento-small-a { view-timeline: --film-depth-a block; }
    .t-bento-small-b { view-timeline: --film-depth-b block; }
    .t-bento-small-a video, .t-bento-small-b video {
      inset: -16px 0 auto;
      height: calc(100% + 32px);
      animation: film-depth-forward linear both;
      animation-range: entry 0% exit 100%;
    }
    .t-bento-small-a video { animation-timeline: --film-depth-a; }
    .t-bento-small-b video {
      animation-name: film-depth-backward;
      animation-timeline: --film-depth-b;
    }
  }
  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    /* Two photo layers only on phones, with a smaller crop and travel. */
    .t-hero-image img, .t-about figure img, body.taste .t-depth-frame>img:is(img,.taste-still) {
      inset-block-start: -5%;
      height: 110%;
      animation-name: photo-depth-mobile;
    }
  }
}
@keyframes photo-depth-mobile {
  from { translate: 0 -2.5%; }
  to { translate: 0 2.5%; }
}
@media (prefers-reduced-motion: reduce) {
  .t-hero-image img, .t-about figure img,
  .t-bento-small-a video, .t-bento-small-b video, body.taste .t-depth-frame>img:is(img,.taste-still) {
    animation: none;
    translate: none;
  }
}