/* ===================== MOTION SYSTEM =====================
   Shared timing and easing for the whole storefront, so every transition
   on the site reads as one considered system rather than a pile of
   independently-guessed durations.

   This file only ever touches motion — transition, animation, transform,
   will-change. It deliberately sets no colours, type or spacing, so it can
   be dropped onto any page without shifting the existing design.
   ========================================================= */

:root {
  /* Easing. --ease-out is the workhorse for anything entering; --ease-soft
     for anything that should settle rather than arrive. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Duration ladder. Interactions are quick; content changes are slower;
     cinematic moments (the hero handover) get the long one. */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;
  --dur-cinematic: 1100ms;
}

/* ---------- page entry ----------
   A single quiet fade-and-lift on first paint, so arriving at a page feels
   composed instead of snapping into place. Applied to the page's main
   region only — never to fixed chrome like the nav, which would look like
   it was sliding out of position. */

@keyframes page-enter {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

.coll,
.cartpage,
.confirm,
.pdp {
  animation: page-enter var(--dur-slow) var(--ease-out) both;
}

/* ---------- buttons ----------
   Lift on hover, settle on press. The press state is deliberately faster
   than the hover so the button feels physically responsive. */

.btn,
.btn-order,
.confirm-btn,
.coll-pill {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft),
    opacity var(--dur-base) var(--ease-soft);
}

.btn:hover,
.btn-order:hover:not(:disabled),
.confirm-btn:hover {
  transform: translate3d(0, -2px, 0);
}

.btn:active,
.btn-order:active:not(:disabled),
.confirm-btn:active,
.coll-pill:active {
  transform: translate3d(0, 0, 0) scale(0.985);
  transition-duration: var(--dur-fast);
}

/* A disabled button should look inert — no lift, no press. */
.btn-order:disabled {
  transform: none !important;
}

/* ---------- product cards ----------
   The image scales inside a fixed frame while the card itself lifts very
   slightly. Two small movements read as more expensive than one big one. */

.product-card {
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}

.product-card__media {
  overflow: hidden;
}

.product-card__media img {
  transition: transform var(--dur-cinematic) var(--ease-out);
  will-change: transform;
}

.product-card:hover {
  transform: translate3d(0, -4px, 0);
}

.product-card:hover .product-card__media img {
  transform: scale(1.045);
}

.product-card__wishlist {
  transition:
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft);
}

.product-card__wishlist:active {
  transform: scale(0.9);
}

/* ---------- links ---------- */

.home-section__link,
.review-card__product {
  transition:
    color var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-soft);
}

.home-section__link:hover {
  transform: translate3d(3px, 0, 0);
}

/* ---------- reduced motion ----------
   Everything above is decoration over an interface that already works.
   When reduced motion is asked for, the decoration is removed outright
   rather than swapped for some other effect. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .btn-order:hover:not(:disabled),
  .confirm-btn:hover,
  .product-card:hover,
  .home-section__link:hover {
    transform: none;
  }

  .product-card:hover .product-card__media img {
    transform: none;
  }
}