/* One restrained motion vocabulary shared by the collection and product pages. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ui: cubic-bezier(.2, .75, .25, 1);
}

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes image-enter {
  from { opacity: .45; }
  to { opacity: 1; }
}
@keyframes detail-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-copy { animation: hero-enter 480ms var(--motion-ease) both; }
.hero-image { animation: image-enter 520ms ease-out both; }

.site-header {
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.site-header.is-scrolled {
  background: #faf9f6f8;
  border-color: #20372d15;
  box-shadow: 0 8px 24px #20372d0b;
}

.main-nav a, .footer-links a {
  position: relative;
  transition: color 190ms ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 230ms var(--motion-ui);
}
.main-nav a:focus-visible::after { transform: scaleX(1); }

.button, .filter, .setup-trigger, .icon-button, .save-button,
.zoom-controls button, .colour-option, .size-select, .type-select {
  transition: background-color 200ms var(--motion-ui),
    color 200ms var(--motion-ui), border-color 200ms var(--motion-ui),
    box-shadow 220ms var(--motion-ui), transform 220ms var(--motion-ease);
}
.button:active, .filter:active, .setup-trigger:active,
.icon-button:active, .save-button:active, .zoom-controls button:active {
  transform: scale(.975);
}
.button.secondary:hover { background: var(--surface); }
.button.light:hover { background: #e5edc6; }
.save-button svg, .save-product svg, .setup-trigger svg {
  transition: transform 220ms var(--motion-ease), fill 220ms ease;
}
.save-button[aria-pressed="true"] svg,
.save-product[aria-pressed="true"] svg { transform: scale(1.1); }
.colour-option:has(input:checked) { transition-duration: 180ms; }
.size-select:focus-visible, .type-select:focus-visible { border-color: var(--ink); }
.zoom-controls button:disabled { transform: none; }

.card-image-link { transition: box-shadow 300ms var(--motion-ease); }
.product-art { transition: transform 420ms var(--motion-ease); }
.product-card { transition: transform 300ms var(--motion-ease); }
.photo-stage { transition: transform 300ms var(--motion-ease); }

.toast {
  transform: translate(-50%, 8px);
  transition: opacity 220ms var(--motion-ui), transform 220ms var(--motion-ease);
}
.toast.visible { transform: translate(-50%, 0); }

.setup-dialog {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 240ms var(--motion-ui), transform 240ms var(--motion-ease),
    display 240ms allow-discrete, overlay 240ms allow-discrete;
}
.setup-dialog[open] { opacity: 1; transform: none; }
.setup-dialog::backdrop {
  background: transparent;
  backdrop-filter: blur(5px);
  transition: background-color 240ms ease,
    display 240ms allow-discrete, overlay 240ms allow-discrete;
}
.setup-dialog[open]::backdrop {
  background: #13291e55;
}
@starting-style {
  .setup-dialog[open] { opacity: 0; transform: translateX(12px); }
  .setup-dialog[open]::backdrop { background: transparent; }
}

details[open] > p { animation: detail-enter 260ms var(--motion-ui) both; }

@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover { color: var(--ink); text-decoration: none; }
  .main-nav a:hover::after { transform: scaleX(1); }
  .product-card:hover { transform: translateY(-3px); }
  .product-card:hover .card-image-link,
  .product-card:focus-within .card-image-link { box-shadow: 0 14px 32px #20372d16; }
  .product-card:hover .product-art { transform: scale(1.025); }
  .button:hover { transform: translateY(-2px); }
  .button:active { transform: scale(.985); }
  .colour-option:hover, .zoom-controls button:not(:disabled):hover,
  .setup-trigger:hover { box-shadow: 0 5px 14px #20372d12; }
}

@media (hover: none) {
  .button:hover { background: var(--ink); }
  .button.secondary:hover { background: transparent; }
  .button.light:hover { background: var(--accent); }
  .filter:not([aria-pressed="true"]):hover { background: transparent; }
  .save-button:not([aria-pressed="true"]):hover { background: #faf9f6eb; }
}

@media (max-width: 700px) {
  html.motion-menu-ready .main-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 220ms var(--motion-ui), transform 220ms var(--motion-ease),
      visibility 220ms;
  }
  html.motion-menu-ready .main-nav.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .main-nav a::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .hero-copy, .hero-image, .setup-dialog, .setup-dialog[open],
  .toast.visible { opacity: 1; }
  .setup-dialog { transform: none; }
  .toast { transform: translate(-50%, 0); }
  html.motion-menu-ready .main-nav { transform: none; }
}