/*
  animations.css — scroll-reveal + micro-interactions.
  Paired with assets/js/animations.js (IntersectionObserver, no library).
  Reduced-motion is respected globally in base.css.
*/

/* Scroll reveal: element starts hidden/offset, JS adds .is-visible when it
   enters the viewport (see assets/js/animations.js) */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Stagger children of a [data-reveal-group] using --i custom property,
   set automatically by animations.js */
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* Count-up numbers (stat blocks) */
[data-count] { font-variant-numeric: tabular-nums; }

/* Card hover lift, reused across product/category/testimonial cards */
.hover-lift { transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease); }
.hover-lift:hover { transform: translateY(-6px); }

/* Button ripple-free press feedback */
.press-scale:active { transform: scale(.97); }

/* Page-load entrance for hero */
.hero-content > * { animation: hero-in .8s var(--ease) both; }
.hero-content > *:nth-child(1) { animation-delay: .05s; }
.hero-content > *:nth-child(2) { animation-delay: .15s; }
.hero-content > *:nth-child(3) { animation-delay: .25s; }
.hero-content > *:nth-child(4) { animation-delay: .35s; }
.hero-content > *:nth-child(5) { animation-delay: .45s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hero-content > * { animation: none; } }

/* Add-to-cart flourish */
@keyframes fly-to-cart {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--end-x, 0px), var(--end-y, -40px)) scale(.15); opacity: 0; }
}
.fly-clone { position: fixed; z-index: 4000; pointer-events: none; border-radius: 8px; overflow: hidden; animation: fly-to-cart .55s var(--ease) forwards; }

/* Skeleton / shimmer already in components.css */

/* Page transition fade-in (applied to <main> on load) */
.page-fade-in { animation: page-fade .5s var(--ease) both; }
@keyframes page-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }