/* Keep the catalog usable while the artwork and product details settle into place. */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="shop"] .shop-stage-copy {
    animation: shop-copy-arrive 480ms cubic-bezier(.16, 1, .3, 1) both;
  }

  body[data-page="shop"] .shop-stage-art {
    animation: shop-art-arrive 750ms cubic-bezier(.16, 1, .3, 1) both;
  }

  body[data-page="shop"] .shop-stage::after {
    position: absolute;
    inset: 0 0 0 28%;
    z-index: 1;
    content: "";
    pointer-events: none;
    background: linear-gradient(112deg, transparent 44%, #a18aff17 48%, #dbfbff53 50%, #8aefdb19 52%, transparent 56%);
    opacity: 0;
    animation: shop-stage-glint 760ms cubic-bezier(.2, .65, .24, 1) 70ms both;
  }

  body[data-page="shop"] .catalog-group-header {
    animation: shop-copy-arrive 420ms cubic-bezier(.16, 1, .3, 1) both;
  }

  body[data-page="shop"] .curated-card.is-visible .product-picture img {
    animation: shop-photo-arrive 540ms cubic-bezier(.16, 1, .3, 1) var(--card-delay, 0ms) backwards;
  }

  body[data-page="shop"] .filter-button[aria-pressed="true"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  body[data-page="shop"] .filter-button[aria-pressed="true"]::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    content: "";
    pointer-events: none;
    background: linear-gradient(118deg, transparent 30%, #fff8 49%, transparent 64%);
    opacity: 0;
    animation: shop-filter-glint 470ms ease-out both;
  }

  body[data-page="shop"] .product-photo-link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(116deg, transparent 30%, #d4baff13 46%, #fff6 51%, #a1ffdb12 55%, transparent 70%);
    opacity: 0;
  }

  body[data-page="shop"] .product-photo-link:focus-visible::after {
    animation: shop-filter-glint 590ms ease-out both;
  }

  body[data-page="shop"] .curated-quick:focus-visible svg {
    animation: shop-peek 360ms cubic-bezier(.16, 1, .3, 1) both;
  }

  @media (hover: hover) and (pointer: fine) {
    body[data-page="shop"] .product-photo-link:hover::after {
      animation: shop-filter-glint 590ms ease-out both;
    }

    body[data-page="shop"] .curated-quick:hover svg {
      animation: shop-peek 360ms cubic-bezier(.16, 1, .3, 1) both;
    }
  }
}

@keyframes shop-copy-arrive {
  from { opacity: .74; translate: 0 9px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes shop-art-arrive {
  from { opacity: .72; translate: 14px 0; scale: 1.035; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes shop-stage-glint {
  from { opacity: 0; translate: -65% 0; }
  25% { opacity: .9; }
  to { opacity: 0; translate: 75% 0; }
}

@keyframes shop-photo-arrive {
  from { opacity: .86; translate: 0 7px; scale: 1.027; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes shop-filter-glint {
  from { opacity: 0; translate: -100% 0; }
  35% { opacity: .84; }
  to { opacity: 0; translate: 100% 0; }
}

@keyframes shop-peek {
  0% { translate: 0 0; }
  40% { translate: 0 -2px; }
  100% { translate: 0 0; }
}