/**
 * Particle Animation Styles
 *
 * Pure CSS animations for gift occasion particles
 * GPU-accelerated transforms for 60fps performance
 */

/* ============================================
   Particle Container
   ============================================ */
.particle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* Below header, above background */
  overflow: hidden;
}

/* ============================================
   Base Particle Styles
   ============================================ */
.particle {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.8;
  will-change: transform, opacity;
  animation: particle-fall 10s linear infinite;
  pointer-events: none;
}

/* ============================================
   Fall Animations (Generic)
   ============================================ */
@keyframes particle-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* ============================================
   Valentine's Day Particles
   ============================================ */

/* Hearts float upward */
.particle-heart.particle-valentine {
  animation: valentine-heart-float 8s ease-in-out infinite;
}

@keyframes valentine-heart-float {
  0% {
    transform: translateY(100vh) translateX(0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(50vh) translateX(20px) scale(1);
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-50px) translateX(-20px) scale(0.8);
    opacity: 0;
  }
}

/* Chocolate pieces fall with rotation */
.particle-chocolate.particle-valentine {
  animation: valentine-chocolate-fall 10s linear infinite;
}

@keyframes valentine-chocolate-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Sparkles twinkle */
.particle-sparkle {
  animation: sparkle-twinkle 3s ease-in-out infinite;
}

@keyframes sparkle-twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* ============================================
   White Day Particles
   ============================================ */

/* Gift boxes descend elegantly */
.particle-giftbox.particle-whiteDay {
  animation: whiteday-gift-descent 12s ease-in-out infinite;
}

@keyframes whiteday-gift-descent {
  0% {
    transform: translateY(-50px) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(100vh) scale(1) rotate(180deg);
    opacity: 0;
  }
}

/* Ribbons flow like silk */
.particle-ribbon.particle-whiteDay {
  animation: whiteday-ribbon-flow 10s ease-in-out infinite;
}

@keyframes whiteday-ribbon-flow {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  50% {
    transform: translateY(50vh) translateX(30px) rotate(180deg);
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) translateX(-30px) rotate(360deg);
    opacity: 0;
  }
}

/* Diamonds sparkle premium */
.particle-diamond.particle-whiteDay {
  animation: whiteday-diamond-sparkle 4s ease-in-out infinite;
}

@keyframes whiteday-diamond-sparkle {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) rotate(180deg);
  }
}

/* ============================================
   Mother's Day Particles
   ============================================ */

/* Flowers bloom and float */
.particle-carnation.particle-mothersDay,
.particle-flower.particle-mothersDay {
  animation: mothersday-flower-float 12s ease-in-out infinite;
}

@keyframes mothersday-flower-float {
  0% {
    transform: translateY(100vh) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(50vh) scale(1) rotate(180deg);
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-50px) scale(0.8) rotate(360deg);
    opacity: 0;
  }
}

/* ============================================
   Father's Day Particles
   ============================================ */

/* Neckties fall with confidence */
.particle-necktie.particle-fathersDay {
  animation: fathersday-tie-fall 10s linear infinite;
}

@keyframes fathersday-tie-fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) translateX(20px) rotate(90deg);
    opacity: 0;
  }
}

/* Power symbols surge */
.particle-power.particle-fathersDay {
  animation: fathersday-power-surge 6s ease-in-out infinite;
}

@keyframes fathersday-power-surge {
  0% {
    transform: translateY(100vh) scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: translateY(80vh) scale(1.2);
  }
  100% {
    transform: translateY(-50px) scale(0.8);
    opacity: 0;
  }
}

/* ============================================
   Halloween Particles
   ============================================ */

/* Pumpkins bounce */
.particle-pumpkin.particle-halloween {
  animation: halloween-pumpkin-bounce 8s ease-in-out infinite;
}

@keyframes halloween-pumpkin-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-20px) scale(1.1);
  }
  50% {
    transform: translateY(0) scale(1);
  }
  75% {
    transform: translateY(-10px) scale(1.05);
  }
}

/* Ghosts float with wave motion */
.particle-ghost.particle-halloween {
  animation: halloween-ghost-float 10s ease-in-out infinite;
}

@keyframes halloween-ghost-float {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  50% {
    transform: translateY(50vh) translateX(30px);
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-50px) translateX(-30px);
    opacity: 0;
  }
}

/* Bats fly in arcs */
.particle-bat.particle-halloween {
  animation: halloween-bat-fly 12s linear infinite;
}

@keyframes halloween-bat-fly {
  0% {
    transform: translateY(0) translateX(-100px) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: translateY(25vh) translateX(50px) rotate(45deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(50vh) translateX(-50px) rotate(-45deg);
  }
  75% {
    transform: translateY(75vh) translateX(50px) rotate(45deg);
  }
  100% {
    transform: translateY(100vh) translateX(100px) rotate(90deg);
    opacity: 0;
  }
}

/* ============================================
   Christmas Particles
   ============================================ */

/* Snowflakes fall gently */
.particle-snowflake.particle-christmas {
  animation: christmas-snow-fall 14s linear infinite;
}

@keyframes christmas-snow-fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(50vh) translateX(20px) rotate(180deg);
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(100vh) translateX(-20px) rotate(360deg);
    opacity: 0;
  }
}

/* Stars twinkle rhythmically */
.particle-star.particle-christmas {
  animation: christmas-star-twinkle 3s ease-in-out infinite;
}

@keyframes christmas-star-twinkle {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.9) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
}

/* ============================================
   Birthday Particles
   ============================================ */

/* Balloons float upward */
.particle-balloon.particle-birthday {
  animation: birthday-balloon-float 10s ease-in-out infinite;
}

@keyframes birthday-balloon-float {
  0% {
    transform: translateY(100vh) translateX(0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(50vh) translateX(15px) scale(1);
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-50px) translateX(-15px) scale(0.9);
    opacity: 0;
  }
}

/* Confetti falls randomly */
.particle-confetti.particle-birthday {
  animation: birthday-confetti-fall 6s linear infinite;
}

@keyframes birthday-confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ============================================
   Burst Effect (Interaction)
   ============================================ */
.particle-burst {
  position: fixed;
  font-size: 1.2rem;
  animation: particle-burst-out 1s ease-out forwards;
}

@keyframes particle-burst-out {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(var(--burst-x) - 50%),
      calc(var(--burst-y) - 50%)
    ) scale(0.5);
    opacity: 0;
  }
}

/* ============================================
   Accessibility: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .particle,
  .particle-burst {
    animation: none !important;
    opacity: 0.3;
    position: static;
  }

  .particle-container {
    display: none;
  }
}

/* ============================================
   Mobile Optimization
   ============================================ */
@media (max-width: 768px) {
  .particle {
    font-size: 1.2rem; /* Smaller particles on mobile */
  }

  /* Reduce animation complexity on mobile */
  .particle-balloon.particle-birthday,
  .particle-heart.particle-valentine,
  .particle-flower.particle-mothersDay {
    animation-duration: 12s; /* Slower = fewer redraws */
  }
}

/* ============================================
   Performance Optimization
   ============================================ */

/* Use transform and opacity only (GPU-accelerated) */
.particle,
.particle-burst {
  transform: translate3d(0, 0, 0); /* Force GPU layer */
  backface-visibility: hidden;
}

/* Limit particle count via CSS */
.particle-container .particle:nth-child(n+31) {
  display: none; /* Max 30 particles */
}

@media (max-width: 768px) {
  .particle-container .particle:nth-child(n+16) {
    display: none; /* Max 15 particles on mobile */
  }
}