.home-page {
  overflow-x: clip;
}

.product-image > .erk-print-scene,
.artwork-image > .erk-print-scene {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-item > .erk-print-scene {
  width: 85px;
  height: 100px;
  flex: 0 0 85px;
  object-fit: contain;
  border-radius: 8px;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: erk-route-out 180ms ease both;
}

::view-transition-new(root) {
  animation: erk-route-in 300ms ease both;
}

body {
  animation: erk-route-in 300ms ease both;
  transition: opacity 150ms ease;
}

.erk-native-transitions body {
  animation: none;
}

html.erk-page-leaving body {
  opacity: 0;
}

@keyframes erk-route-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes erk-route-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.erk-reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 650ms ease var(--erk-reveal-delay, 0ms),
    translate 650ms cubic-bezier(.2, .7, .2, 1) var(--erk-reveal-delay, 0ms),
    transform 300ms ease, box-shadow 300ms ease;
}

.erk-reveal.erk-reveal-visible {
  opacity: 1;
  translate: 0 0;
}

.home-page .welcome-content > .erk-reveal.erk-reveal-visible {
  animation: erk-hero-reveal 800ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--erk-reveal-delay, 0ms);
  transition: none;
}

@keyframes erk-hero-reveal {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}

.home-page .welcome-content > .erk-reveal:focus-within {
  animation: none;
  opacity: 1;
  translate: 0 0;
}

.erk-collection-card.erk-reveal,
.artwork-card.erk-reveal {
  animation: none;
}

@media (max-width: 760px) {
  body > .site-header.erk-menu-ready .navigation {
    display: flex;
    grid-area: auto;
    width: auto;
    visibility: hidden;
    opacity: 0;
    translate: 0 -10px;
    scale: .98;
    transform-origin: top center;
    pointer-events: none;
    max-height: calc(100svh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: opacity 220ms ease, translate 280ms cubic-bezier(.2, .7, .2, 1), scale 280ms ease, visibility 0s 280ms;
  }

  body > .site-header.erk-menu-ready .navigation.is-open {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    scale: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  body > .site-header.erk-menu-ready .navigation a {
    opacity: 0;
    translate: 0 -5px;
    transition: opacity 180ms ease, translate 240ms ease;
  }

  body > .site-header.erk-menu-ready .navigation.is-open a {
    opacity: 1;
    translate: 0 0;
    transition-delay: calc(var(--menu-index, 0) * 45ms + 50ms);
  }

  body > .site-header .menu-toggle {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  body > .site-header .menu-toggle span {
    transition: transform 250ms ease, opacity 180ms ease;
  }

  body > .site-header .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  body > .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  body > .site-header .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .welcome-content > .erk-reveal.erk-reveal-visible {
    animation: none;
  }

  @view-transition { navigation: none; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  html.erk-page-leaving body {
    opacity: 1;
  }

  .erk-reveal,
  .erk-reveal.erk-reveal-visible {
    opacity: 1;
    translate: none;
    transition: none;
  }

  body > .site-header.erk-menu-ready .navigation,
  body > .site-header.erk-menu-ready .navigation a,
  body > .site-header .menu-toggle span {
    transition: none;
    translate: none;
    scale: none;
  }
}