/* ========== CHRISTMAS PARTICLE EFFECT - Remove after Christmas ========== */
/* 
 * To remove: Comment out or delete the import line in views/index.ejs
 * This file can be deleted after Christmas season
 */

/* Particle container - positioned behind header but above content */
.christmas-particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 40; /* Below header (z-index: 50), above content */
  pointer-events: none; /* Don't interfere with user interactions */
  overflow: hidden;
}

/* Individual particle styling */
.christmas-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  pointer-events: none;
  
  /* Glow effect - more visible */
  box-shadow: 
    0 0 6px rgba(255, 255, 255, 1.0),
    0 0 12px rgba(255, 255, 255, 0.6),
    0 0 18px rgba(255, 255, 255, 0.4);
  
  /* Blurry, soft appearance */
  filter: blur(1.5px);
  
  /* Will be animated via JavaScript */
  will-change: transform, opacity;
}

/* Light playing effect - subtle pulsing glow */
@keyframes particleGlow {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
    box-shadow: 
      0 0 5px rgba(255, 255, 255, 0.7),
      0 0 10px rgba(255, 255, 255, 0.4),
      0 0 15px rgba(255, 255, 255, 0.2);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
    box-shadow: 
      0 0 7px rgba(255, 255, 255, 1.0),
      0 0 14px rgba(255, 255, 255, 0.6),
      0 0 20px rgba(255, 255, 255, 0.4);
  }
}

/* Gentle drift animation - will be applied via JavaScript transforms */
/* This is a fallback for browsers that don't support JS transforms well */
.christmas-particle.drifting {
  animation: particleGlow 4s ease-in-out infinite;
}

/* Ensure particles don't appear above header */
.header {
  position: relative;
  z-index: 50;
}

/* ========== END CHRISTMAS PARTICLE EFFECT ========== */