/* ============================================
   FULL PAGE SNOW & ICE PARTICLES
   ============================================ */

/* Full Page Particle Container */
#full-page-particles {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 99999 !important;
  overflow: hidden !important;
}

/* Snow Animation - Realistic falling with gravity and wind */
@keyframes snowFloat {
  0% {
    transform: translateY(-50px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  3% {
    opacity: 0.6;
  }
  8% {
    opacity: 1;
    transform: translateY(5vh) translateX(2px) rotate(45deg);
  }
  20% {
    transform: translateY(15vh) translateX(5px) rotate(90deg);
  }
  35% {
    transform: translateY(30vh) translateX(-3px) rotate(135deg);
  }
  50% {
    transform: translateY(50vh) translateX(8px) rotate(180deg);
  }
  65% {
    transform: translateY(70vh) translateX(-5px) rotate(225deg);
  }
  80% {
    transform: translateY(85vh) translateX(12px) rotate(270deg);
  }
  95% {
    opacity: 1;
    transform: translateY(95vh) translateX(15px) rotate(315deg);
  }
  100% {
    transform: translateY(calc(100vh + 50px)) translateX(20px) rotate(360deg);
    opacity: 0;
  }
}

/* Ice Animation - Faster falling with more drift and rotation */
@keyframes iceFloat {
  0% {
    transform: translateY(-50px) translateX(0) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  2% {
    opacity: 0.5;
  }
  5% {
    opacity: 1;
    transform: translateY(3vh) translateX(-2px) rotate(60deg) scale(0.9);
  }
  15% {
    transform: translateY(12vh) translateX(8px) rotate(120deg) scale(1);
  }
  30% {
    transform: translateY(30vh) translateX(-10px) rotate(180deg) scale(1.05);
  }
  45% {
    transform: translateY(50vh) translateX(15px) rotate(240deg) scale(1.1);
  }
  60% {
    transform: translateY(70vh) translateX(-8px) rotate(300deg) scale(1.05);
  }
  75% {
    transform: translateY(85vh) translateX(12px) rotate(330deg) scale(1);
  }
  90% {
    opacity: 0.8;
    transform: translateY(95vh) translateX(-15px) rotate(350deg) scale(0.95);
  }
  100% {
    transform: translateY(calc(100vh + 50px)) translateX(-20px) rotate(360deg) scale(0.8);
    opacity: 0;
  }
}

/* Webkit fallbacks - Simplified but smooth */
@-webkit-keyframes snowFloat {
  0% {
    -webkit-transform: translateY(-50px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(50vh) translateX(8px) rotate(180deg);
  }
  100% {
    -webkit-transform: translateY(calc(100vh + 50px)) translateX(20px) rotate(360deg);
    opacity: 0;
  }
}

@-webkit-keyframes iceFloat {
  0% {
    -webkit-transform: translateY(-50px) translateX(0) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(50vh) translateX(15px) rotate(240deg) scale(1.1);
  }
  100% {
    -webkit-transform: translateY(calc(100vh + 50px)) translateX(-20px) rotate(360deg) scale(0.8);
    opacity: 0;
  }
}

/* Mobile optimization - Smaller particles, reduced effects */
@media (max-width: 768px) {
  #full-page-particles {
    height: 100vh !important;
    height: -webkit-fill-available !important;
  }
  
  /* Scale down all particles on mobile with hardware acceleration */
  #full-page-particles > div {
    transform-origin: center center;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* Reduce glow intensity on mobile for better performance */
  #full-page-particles > div {
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.6), 
                0 0 6px rgba(255, 255, 255, 0.3) !important;
  }
  
  /* Smooth, natural snow animation optimized for mobile */
  @keyframes snowFloat {
    0% {
      transform: translateY(-40px) translateX(0) rotate(0deg);
      opacity: 0;
    }
    2% {
      opacity: 0.3;
      transform: translateY(-20px) translateX(0.5px) rotate(15deg);
    }
    5% {
      opacity: 0.6;
      transform: translateY(2vh) translateX(1px) rotate(30deg);
    }
    10% {
      opacity: 0.85;
      transform: translateY(6vh) translateX(1.5px) rotate(50deg);
    }
    20% {
      opacity: 1;
      transform: translateY(15vh) translateX(2px) rotate(80deg);
    }
    30% {
      transform: translateY(25vh) translateX(1px) rotate(110deg);
    }
    40% {
      transform: translateY(38vh) translateX(-0.5px) rotate(140deg);
    }
    50% {
      transform: translateY(52vh) translateX(2.5px) rotate(170deg);
    }
    60% {
      transform: translateY(65vh) translateX(-1px) rotate(200deg);
    }
    70% {
      transform: translateY(78vh) translateX(3px) rotate(230deg);
    }
    80% {
      transform: translateY(88vh) translateX(-1.5px) rotate(260deg);
    }
    90% {
      opacity: 1;
      transform: translateY(94vh) translateX(4px) rotate(290deg);
    }
    95% {
      opacity: 0.9;
      transform: translateY(97vh) translateX(5px) rotate(320deg);
    }
    100% {
      transform: translateY(calc(100vh + 40px)) translateX(6px) rotate(360deg);
      opacity: 0;
    }
  }
  
  /* Smooth, faster ice animation for mobile */
  @keyframes iceFloat {
    0% {
      transform: translateY(-40px) translateX(0) rotate(0deg) scale(0.85);
      opacity: 0;
    }
    1% {
      opacity: 0.2;
      transform: translateY(-25px) translateX(-0.5px) rotate(20deg) scale(0.87);
    }
    3% {
      opacity: 0.5;
      transform: translateY(-10px) translateX(-1px) rotate(40deg) scale(0.9);
    }
    6% {
      opacity: 0.75;
      transform: translateY(2vh) translateX(-1.5px) rotate(65deg) scale(0.93);
    }
    12% {
      opacity: 1;
      transform: translateY(8vh) translateX(1px) rotate(100deg) scale(0.97);
    }
    25% {
      transform: translateY(22vh) translateX(-2px) rotate(150deg) scale(1.02);
    }
    40% {
      transform: translateY(42vh) translateX(3px) rotate(200deg) scale(1.08);
    }
    55% {
      transform: translateY(62vh) translateX(-1.5px) rotate(250deg) scale(1.1);
    }
    70% {
      transform: translateY(78vh) translateX(2.5px) rotate(290deg) scale(1.08);
    }
    85% {
      opacity: 0.9;
      transform: translateY(90vh) translateX(-2px) rotate(320deg) scale(1.02);
    }
    93% {
      opacity: 0.7;
      transform: translateY(96vh) translateX(-3px) rotate(345deg) scale(0.95);
    }
    100% {
      transform: translateY(calc(100vh + 40px)) translateX(-4px) rotate(360deg) scale(0.85);
      opacity: 0;
    }
  }
  
  /* Use smoother easing for mobile */
  #full-page-particles > div {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}