/* Scroll-reveal system (see static/js/reveal.js). One shared pattern used
   sitewide instead of ad-hoc per-page animation, so motion stays
   consistent rather than every page inventing its own timing. Applied to
   a handful of real sections per page (hero copy, category tiles, product
   cards, section headers) -- not everything at once, which the codebase's
   own ui-ux-pro-max review flagged as a real anti-pattern (too many
   simultaneous animations reads as distracting, not polished). */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--motion-slow) var(--ease-premium), transform var(--motion-slow) var(--ease-premium);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* A second, smaller variant for tight grids (product/category cards) --
   same mechanism, less vertical travel so a 3-4 column grid doesn't look
   like it's all falling into place from too far. */
[data-reveal="scale"] {
  transform: translateY(0) scale(0.97);
}
[data-reveal="scale"].is-visible {
  transform: translateY(0) scale(1);
}

/* Reusable editorial image reveal (mobile motion overhaul, 2026-08-21) --
   a slower, opacity+scale-only reveal (no vertical travel) for large,
   full-bleed photography: the hero image, craftsmanship split image,
   collection tile photos. Deliberately not used for every image on the
   page -- small thumbnails/icons don't get this treatment. */
[data-reveal="image"] {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity var(--motion-editorial) var(--ease-premium), transform var(--motion-editorial) var(--ease-premium);
}
[data-reveal="image"].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children of a revealed group (e.g. a grid) via nth-child delay
   instead of requiring a data-reveal-delay attribute on every single
   card -- cheap, real perceived polish on a grid entrance. */
[data-reveal-group] > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: 60ms; }
[data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: 120ms; }
[data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: 180ms; }
[data-reveal-group] > [data-reveal]:nth-child(5) { transition-delay: 240ms; }
[data-reveal-group] > [data-reveal]:nth-child(6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Shared "pop" feedback (mobile motion overhaul, 2026-08-21) -- one
   reusable class/keyframe for both the header cart/wishlist count badge
   and the per-card wishlist heart, instead of two near-identical
   animations. Real gap found in the audit: nothing was listening for
   the ak:cart-changed/ak:wishlist-changed events product-card.js/cart.js
   already dispatch, so the header badge count never actually updated
   without a full page reload -- see nav.js for the listener that adds
   this class on both elements. Global reduced-motion override above
   already zeroes animation-duration. */
@keyframes ak-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.is-pulsing { animation: ak-pop var(--motion-normal) var(--ease-premium); }

/* Shared skeleton-loader utility (mobile motion overhaul, 2026-08-21),
   Phase 33 -- real gap: Quick View's real product fetch (GET
   /api/v1/products/<slug>/, genuinely takes a moment) only ever showed
   plain static "Loading..." text. One reusable bar shape + pulse, sized
   per-use via inline width/height (see quick-view.js) rather than a
   fixed set of skeleton components -- this codebase doesn't have a
   component system to generate matching shapes from, so an inline-sized
   div is the honest, simple option. Never held past the real response
   arriving -- no artificial delay anywhere this is used. */
@keyframes ak-skeleton-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* Animation only, no background -- lets it compose with an element's own
   existing background (e.g. .quick-view__media-placeholder's gradient)
   instead of overriding it. */
.ak-skeleton-pulse { animation: ak-skeleton-pulse 1.4s ease-in-out infinite; }
.ak-skeleton { background: rgba(255, 255, 255, .09); border-radius: 6px; animation: ak-skeleton-pulse 1.4s ease-in-out infinite; }
.ak-skeleton--dark { background: rgba(0, 0, 0, .08); }