/**
 * Quantize Solutions - Preloader & Hero Reveal Stylesheet
 * Used exclusively on index.html
 */

#system-preloader {
  background-color: #f9f9f9 !important;
  z-index: 99999 !important;
}

/* 3D Liquid Keyframes */
@keyframes waveMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes bubbleRise1 {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  50% { opacity: 0.6; }
  100% { transform: translateY(-40px) scale(1.1); opacity: 0; }
}

@keyframes bubbleRise2 {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  50% { opacity: 0.7; }
  100% { transform: translateY(-55px) scale(1.2); opacity: 0; }
}

@keyframes bubbleRise3 {
  0% { transform: translateY(0) scale(0.9); opacity: 0; }
  50% { opacity: 0.5; }
  100% { transform: translateY(-35px) scale(1.0); opacity: 0; }
}

.animate-wave-move {
  animation: waveMove 3.5s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}

.animate-bubble-1 {
  animation: bubbleRise1 2.2s ease-in infinite;
}

.animate-bubble-2 {
  animation: bubbleRise2 1.8s ease-in infinite 0.4s;
}

.animate-bubble-3 {
  animation: bubbleRise3 2.6s ease-in infinite 0.9s;
}

/* Hero Text & Canvas Slide Reveal Animation (Triggered after Q Preloader finishes) */
.hero-reveal-item {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.hero-reveal-wave {
  opacity: 0;
  transform: scale(0.92) translateY(25px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.hero-reveal-active .hero-reveal-item:nth-child(1) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.08s !important;
}

.hero-reveal-active .hero-reveal-item:nth-child(2) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.22s !important;
}

.hero-reveal-active .hero-reveal-item:nth-child(3) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.36s !important;
}

.hero-reveal-active .hero-reveal-item:nth-child(4) {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: 0.50s !important;
}

.hero-reveal-active .hero-reveal-wave {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  transition-delay: 0.30s !important;
}