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

  :root { --motion-ease: cubic-bezier(.19, .78, .23, 1); }

  ::view-transition-old(root) { animation: .48s var(--motion-ease) both page-depart; }
  ::view-transition-new(root) { animation: .57s var(--motion-ease) both page-arrive; }

  .hero-slide { transition-duration: .66s, 0s; transition-delay: 0s, .66s; }
  .hero-slide.is-active { transition-delay: 0s; }

  .hero-slide.is-active .hero-media,
  .motion-opening :is(.billboard-media, .about-hero-frame, .recipe-hero-photo) {
    animation: .9s var(--motion-ease) backwards scene-arrive;
  }

  .hero-slide.is-active .hero-copy > *,
  .motion-opening :is(.inner-hero .wrap, .billboard-copy, .about-hero-copy, .recipe-hero-copy, .contact-intro) > * {
    animation: .6s var(--motion-ease) backwards copy-arrive;
  }
  .hero-slide.is-active .hero-copy > :nth-child(2),
  .motion-opening :is(.inner-hero .wrap, .billboard-copy, .about-hero-copy, .recipe-hero-copy, .contact-intro) > :nth-child(2) {
    animation-delay: .075s;
  }
  .hero-slide.is-active .hero-copy > :nth-child(3),
  .motion-opening :is(.inner-hero .wrap, .billboard-copy, .recipe-hero-copy, .contact-intro) > :nth-child(3) {
    animation-delay: .15s;
  }

  .hero-slide.is-active .hero-copy > :focus-visible,
  .motion-opening :is(.inner-hero .wrap, .billboard-copy, .about-hero-copy, .recipe-hero-copy, .contact-intro) > :focus-visible {
    animation: none;
  }

  [data-enter="waiting"] { opacity: 0; }
  [data-enter="shown"] { animation: .74s var(--motion-ease) backwards copy-arrive; }
  [data-enter="waiting"]:focus-within, [data-enter="shown"]:focus-within {
    opacity: 1;
    animation: none;
  }
  [data-enter="waiting"]:is(.product-image, .recipe-card-photo, figure) { opacity: 1; clip-path: inset(0 0 100%); }
  [data-enter="shown"]:is(.product-image, .recipe-card-photo, figure) { animation: .92s var(--motion-ease) backwards photo-arrive; }
  .product-card:nth-child(2) [data-enter="shown"],
  .about-photo-pair figure + figure[data-enter="shown"] { animation-delay: .09s; }
  [data-enter]:is(.product-image, .recipe-card-photo, figure):focus-within { clip-path: none; animation: none; }

  .button, .header-contact { transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .3s var(--motion-ease); }
  :is(.button, .header-contact):active { transform: translateY(1px); }
  .link-arrow { transition: transform .42s var(--motion-ease); }
  .nav-links a::after { transition: transform .38s var(--motion-ease); }

  @media (hover: hover) and (pointer: fine) {
    .nav-label > span { transition: transform .42s var(--motion-ease); }
    .nav-links a:is(:hover, :focus-visible) .nav-label > span:first-child { transform: translateY(-105%); }
    .nav-links a:is(:hover, :focus-visible) .nav-label > span:last-child { transform: translateY(0); }
    .product-image img {
      transform-origin: var(--image-x, 50%) var(--image-y, 50%);
      transition: transform .85s var(--motion-ease);
    }
    .product-card:hover .product-image img { transform: scale(1.07); }
    .recipe-card-photo img { transition: transform .85s var(--motion-ease); }
    .recipe-card-link:hover img { transform: scale(1.055); }
    :is(a, button):is(:hover, :focus-visible) > .link-arrow { transform: translateX(.2rem); }
    .back-link:is(:hover, :focus-visible) > .link-arrow { transform: translateX(-.2rem); }
  }

  @supports (animation-timeline: view()) {
    :is(.about-hero-frame, .about-craft-photo, .quality-art, .kitchen-feature-photo) {
      overflow: hidden;
      view-timeline: --editorial-image block;
    }
    :is(.about-hero-frame, .about-craft-photo, .quality-art, .kitchen-feature-photo) > img {
      animation: editorial-drift linear both;
      animation-timeline: --editorial-image;
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes page-depart {
  to { opacity: .42; transform: translateY(-1rem); }
}
@keyframes page-arrive {
  from { clip-path: inset(5% 0 0); opacity: .6; transform: translateY(.9rem); }
  to { clip-path: inset(0); opacity: 1; transform: translateY(0); }
}
@keyframes scene-arrive {
  from { clip-path: inset(0 0 0 10%); opacity: .68; }
  to { clip-path: inset(0); opacity: 1; }
}
@keyframes copy-arrive {
  from { clip-path: inset(100% 0 0); transform: translateY(1.15rem); }
  to { clip-path: inset(-.5rem); transform: translateY(0); }
}
@keyframes photo-arrive {
  from { clip-path: inset(0 0 90%); transform: translateY(.7rem); }
  to { clip-path: inset(0); transform: translateY(0); }
}
@keyframes editorial-drift {
  from { transform: translateY(-2.6%) scale(1.065); }
  to { transform: translateY(2.6%) scale(1.065); }
}