/* ============================================================
   SHOP — page-specific styling and entrance motion.
   Loads only on /shop/, after page.css, so nothing here touches
   the other content pages.
   ============================================================ */

/* Small, muted line, e.g. the checkout note under the buy button. */
.fine {
  font-size: var(--text-sm);
  opacity: 0.7;
  margin-top: var(--space-sm);
}

/* Pull the copy in tighter around the product image — roughly half
   the previous gap on each side (was 1.5rem above / 2.5rem below).
   The heading's own bottom margin is trimmed too, since it otherwise
   sets the gap above the image (adjacent margins collapse to the
   larger of the two). */
.product-image {
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}
.page-main h2:has(+ .product-image) {
  margin-bottom: 0.75rem;
}

/* ------------------------------------------------------------
   ENTRANCE MOTION
   Elements marked [data-rise] fade upward in sequence on load, so
   the page assembles itself rather than snapping in all at once.

   Guarded by prefers-reduced-motion: if a visitor has asked for
   less motion, none of this applies and everything simply shows —
   content is never hidden behind an animation.

   >>> Tune the feel here: the DURATION on [data-rise], and the
       per-step DELAYS further down. <<<
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {

  [data-rise] {
    opacity: 0;
    transform: translateY(20px);
    /* 'both' holds the start frame during the delay and the end
       frame afterwards, so there's no flash before or after. */
    animation: shop-rise 0.7s var(--ease-out) both;
  }

  /* The product image rises AND settles from a slight zoom, so it
     "appears" a touch differently from the text around it. */
  .product-image[data-rise] {
    animation-name: shop-rise-image;
  }

  /* Stagger — small increments so the whole sequence lands quickly. */
  [data-rise="1"] { animation-delay: 0.05s; }
  [data-rise="2"] { animation-delay: 0.14s; }
  [data-rise="3"] { animation-delay: 0.24s; }
  [data-rise="4"] { animation-delay: 0.36s; }
  [data-rise="5"] { animation-delay: 0.46s; }
  [data-rise="6"] { animation-delay: 0.58s; }
  [data-rise="7"] { animation-delay: 0.66s; }
  [data-rise="8"] { animation-delay: 0.74s; }
}

@keyframes shop-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shop-rise-image {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}