/**
 * ATSTIX Animations Stylesheet
 * Keyframes, Holographic Shaders, Sticker Rain, Flying Cart Trajectory & Bursts
 */

/* ==========================================================================
   1. FLOATING & AMBIENT KEYFRAMES
   ========================================================================== */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes float-sticker-1 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  33% {
    transform: translate3d(8px, -18px, 0) rotate(6deg);
  }
  66% {
    transform: translate3d(-10px, -8px, 0) rotate(-4deg);
  }
}

@keyframes float-sticker-2 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-6deg);
  }
  50% {
    transform: translate3d(-12px, -22px, 0) rotate(8deg);
  }
}

@keyframes float-moon {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(-10px, -18px, 0) rotate(3deg);
  }
  100% {
    transform: translate3d(12px, -8px, 0) rotate(-2deg);
  }
}

@keyframes pulse-moon-aura {
  0% {
    opacity: 0.6;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes float-planet {
  0% {
    transform: translate3d(0, 0, 0) rotate(-25deg);
  }
  50% {
    transform: translate3d(10px, -15px, 0) rotate(-20deg);
  }
  100% {
    transform: translate3d(-8px, -25px, 0) rotate(-30deg);
  }
}

@keyframes float-sticker-3 {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(4deg);
  }
  50% {
    transform: translate3d(14px, -16px, 0) rotate(-10deg);
  }
}

@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.7;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 35px rgba(236, 72, 153, 0.7));
  }
}

@keyframes load-progress {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

/* ==========================================================================
   2. STICKER RAIN ENGINE (Pluie de Stickers)
   ========================================================================== */
.sticker-rain-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  overflow: hidden;
}

.rain-sticker-item {
  position: absolute;
  top: -80px;
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
  animation-name: fall-rain;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
}

.rain-sticker-item svg {
  width: 100%;
  height: 100%;
}

@keyframes fall-rain {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rot-start, 0deg));
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--sway, 40px), calc(100vh + 120px), 0) rotate(var(--rot-end, 360deg));
    opacity: 0;
  }
}

/* ==========================================================================
   3. CLICK BURST PARTICLES
   ========================================================================== */
.burst-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  animation: burst-fly 0.65s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

@keyframes burst-fly {
  0% {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate3d(var(--tx), var(--ty), 0) rotate(var(--r)) scale(0);
    opacity: 0;
  }
}

/* ==========================================================================
   4. FLY TO CART ANIMATION
   ========================================================================== */
.fly-to-cart-item {
  position: fixed;
  width: 65px;
  height: 65px;
  pointer-events: none;
  z-index: 100005;
  filter: drop-shadow(0 10px 20px rgba(139, 92, 246, 0.7));
  animation: fly-trajectory 0.65s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

.fly-to-cart-item svg {
  width: 100%;
  height: 100%;
}

@keyframes fly-trajectory {
  0% {
    transform: translate3d(0, 0, 0) scale(1.1) rotate(0deg);
    opacity: 1;
  }
  40% {
    transform: translate3d(calc(var(--dx) * 0.4), calc(var(--dy) * 0.3 - 60px), 0) scale(1.3) rotate(-15deg);
  }
  80% {
    opacity: 0.9;
  }
  100% {
    transform: translate3d(var(--dx), var(--dy), 0) scale(0.2) rotate(360deg);
    opacity: 0;
  }
}

/* Cart Icon Shake */
@keyframes cart-shake {
  10%, 90% { transform: scale(1.2) translate3d(-1px, 0, 0); }
  20%, 80% { transform: scale(1.2) translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: scale(1.25) translate3d(-3px, 0, 0); }
  40%, 60% { transform: scale(1.2) translate3d(3px, 0, 0); }
  100% { transform: scale(1) translate3d(0, 0, 0); }
}

/* ==========================================================================
   5. REVEAL ON SCROLL
   ========================================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ==========================================================================
   6. PLAYGROUND PEEL ANIMATION
   ========================================================================== */
.peel-animation {
  animation: peel-drop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes peel-drop {
  0% {
    transform: scale(1.5) rotate(-15deg);
    opacity: 0;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.8));
  }
  100% {
    opacity: 1;
  }
}

.sticker-removing {
  animation: sticker-poof 0.25s ease-out forwards;
}

@keyframes sticker-poof {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.2) rotate(45deg); opacity: 0; }
}

/* ==========================================================================
   7. EASTER EGG: PARTY MODE
   ========================================================================== */
body.party-mode {
  animation: party-bg 4s linear infinite alternate;
}

body.party-mode .product-card,
body.party-mode .collection-card,
body.party-mode .btn-primary {
  animation: party-glow 2s linear infinite alternate;
}

@keyframes party-bg {
  0% { background-color: #0d001a; }
  33% { background-color: #001a18; }
  66% { background-color: #1a000e; }
  100% { background-color: #0d001a; }
}

@keyframes party-glow {
  0% { box-shadow: 0 0 25px #8b5cf6; }
  50% { box-shadow: 0 0 35px #ec4899; }
  100% { box-shadow: 0 0 30px #06b6d4; }
}