/* ==========================================================================
   Lumora motion system
   One set of durations/easings for every effect. JS reads the same values
   (see animations.js → Motion.ease / Motion.dur).
   ========================================================================== */
:root {
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 640ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);       /* expo-ish, default */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* gentle overshoot for pops */
}

/* ---- Scroll reveal (driven by IntersectionObserver in animations.js) ---- */
[data-reveal] { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
[data-reveal="fade-up"] { transform: translate3d(0, 32px, 0); }
[data-reveal="fade-down"] { transform: translate3d(0, -24px, 0); }
[data-reveal="slide-left"] { transform: translate3d(48px, 0, 0); }
[data-reveal="slide-right"] { transform: translate3d(-48px, 0, 0); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="zoom-out"] { transform: scale(1.08); }
[data-reveal].is-visible { opacity: 1; transform: none; }
/* No-JS safety: show everything */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---- Page transitions ---- */
.page-shell { animation: pageIn var(--dur-slow) var(--ease-out) both; }
body.is-leaving .page-shell { animation: pageOut var(--dur) var(--ease-in-out) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pageOut { to { opacity: 0; transform: translateY(-6px); } }

/* ---- Keyframes ---- */
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes badgeBounce { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.45); } 55% { transform: scale(.88); } 75% { transform: scale(1.1); } }
@keyframes heartBeat { 0% { transform: scale(1); } 25% { transform: scale(1.35); } 50% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes burstParticle { 0% { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-26px) scale(0); opacity: 0; } }
@keyframes swatchPop { 0% { transform: scale(.85); } 60% { transform: scale(1.14); } 100% { transform: scale(1.08); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 10px rgb(var(--c-gold) / .7); } 50% { box-shadow: 0 0 20px rgb(var(--c-ember) / .9); } }
@keyframes loaderSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pulseRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes toastBar { from { width: 100%; } to { width: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drawCheck { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes slideOut { to { opacity: 0; transform: translateX(60px); height: 0; padding: 0; margin: 0; } }
@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgb(var(--c-success) / .5); } 100% { box-shadow: 0 0 0 14px rgb(var(--c-success) / 0); } }
@keyframes confettiFall { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; } 100% { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); opacity: 0; } }
@keyframes floatIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- Utility animation classes ---- */
.anim-shake { animation: shake .5s var(--ease-in-out); }
.anim-pop { animation: pop .5s var(--ease-spring) both; }
.anim-bounce { animation: badgeBounce .6s var(--ease-out); }
.anim-heart { animation: heartBeat .5s var(--ease-out); }
.anim-float { animation: float 5s ease-in-out infinite; }
.anim-spin { animation: spin .8s linear infinite; }
.anim-pulse-success { animation: pulseGlow .8s var(--ease-out) 2; }
.anim-float-in { animation: floatIn var(--dur-slow) var(--ease-out) both; }
.removing { animation: slideOut .45s var(--ease-in-out) forwards; overflow: hidden; }

/* Stagger helper: children animate in with incremental delays */
.stagger > * { animation: floatIn var(--dur-slow) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }   .stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; } .stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; } .stagger > *:nth-child(6) { animation-delay: 250ms; }
.stagger > *:nth-child(7) { animation-delay: 300ms; } .stagger > *:nth-child(8) { animation-delay: 350ms; }
.stagger > *:nth-child(9) { animation-delay: 400ms; } .stagger > *:nth-child(n+10) { animation-delay: 450ms; }

/* Animated check mark (form success, order success fallback) */
.check-anim circle { stroke-dasharray: 160; stroke-dashoffset: 160; animation: drawCheck .7s var(--ease-out) forwards; }
.check-anim path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: drawCheck .45s .5s var(--ease-out) forwards; }

/* Ripple (spawned by animations.js on .btn clicks) */
.ripple-dot { position: absolute; border-radius: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; background: rgb(255 255 255 / .35); transform: scale(0); animation: ripple .65s var(--ease-out); pointer-events: none; z-index: -1; }
.btn-outline .ripple-dot, .btn-ghost .ripple-dot { background: rgb(var(--c-ink) / .15); }

/* Heart burst particles */
.burst-particle { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 99px; pointer-events: none; animation: burstParticle .6s var(--ease-out) forwards; }

/* Fly-to-cart clone */
.fly-clone { position: fixed; z-index: 300; pointer-events: none; border-radius: 16px; object-fit: cover; box-shadow: var(--shadow-lg); }

/* Confetti */
.confetti-piece { position: fixed; z-index: 300; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; animation: confettiFall 1.2s var(--ease-out) forwards; }

/* Number roll: digits slide vertically when values change */
.roll { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---- Reduced motion: keep fades, drop movement and loops ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
  .hero-slide .hero-bg { inset: 0 !important; transform: none !important; }
}