/* =============================================================
   ANIMATIONS.CSS — Keyframes, transitions, micro-interactions
   ============================================================= */

@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.96); } }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pop { 0% { transform: scale(1);} 40% { transform: scale(1.35);} 100% { transform: scale(1);} }
@keyframes heartBeat { 0%{transform:scale(1)} 25%{transform:scale(1.3)} 50%{transform:scale(.95)} 100%{transform:scale(1)} }
@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-12px);} }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@keyframes confettiFall { to { transform: translateY(105vh) rotate(720deg); opacity: .9; } }
@keyframes checkDraw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes ringScale { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes flyToCart { 0%{ transform: translate(0,0) scale(1); opacity:1;} 70%{ opacity:.85;} 100%{ transform: var(--fly-end) scale(.2); opacity:0; } }

/* utility animation classes */
.anim-fade { animation: fadeIn var(--t-slow) var(--ease) both; }
.anim-up { animation: fadeUp var(--t-slow) var(--ease-out) both; }
.anim-down { animation: fadeDown var(--t-slow) var(--ease-out) both; }
.anim-scale { animation: scaleIn var(--t-slow) var(--ease-spring) both; }
.anim-slide { animation: slideRight var(--t-slow) var(--ease-out) both; }
.anim-float { animation: float 4s ease-in-out infinite; }
.anim-pulse { animation: pulse 1.6s ease-in-out infinite; }
.spin { animation: spin .8s linear infinite; }

/* reveal on scroll (toggled by JS IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }

/* stagger children */
.stagger > * { opacity: 0; transform: translateY(24px); }
.stagger.in > * { animation: fadeUp .6s var(--ease-out) forwards; }
.stagger.in > *:nth-child(1){animation-delay:.04s}
.stagger.in > *:nth-child(2){animation-delay:.10s}
.stagger.in > *:nth-child(3){animation-delay:.16s}
.stagger.in > *:nth-child(4){animation-delay:.22s}
.stagger.in > *:nth-child(5){animation-delay:.28s}
.stagger.in > *:nth-child(6){animation-delay:.34s}
.stagger.in > *:nth-child(7){animation-delay:.40s}
.stagger.in > *:nth-child(8){animation-delay:.46s}

/* page transition */
.page-enter { animation: fadeUp .5s var(--ease-out) both; }

/* heart burst */
.heart-burst { animation: heartBeat .6s var(--ease-spring); }

/* spinner */
.spinner { width: 38px; height: 38px; border: 3px solid var(--c-primary-lighter); border-top-color: var(--c-primary); border-radius: 50%; animation: spin .8s linear infinite; }

/* flying image clone */
.fly-clone { position: fixed; z-index: var(--z-max); border-radius: var(--r-md); object-fit: cover; pointer-events: none; box-shadow: var(--sh-lg); animation: flyToCart .8s var(--ease-in) forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}