/* Life Natural Water — logo preloader */
html.is-loading {
   overflow: hidden;
}

html.is-loading body {
   overflow: hidden;
}

#preloader,
#preloader.water-preloader {
   position: fixed;
   inset: 0;
   z-index: 9999999;
   display: flex !important;
   align-items: center;
   justify-content: center;
   opacity: 1 !important;
   visibility: visible !important;
   pointer-events: auto;
   transition: opacity 0.55s ease, visibility 0.55s ease;
   background:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(95, 208, 255, 0.5), transparent 60%),
      radial-gradient(ellipse 60% 40% at 100% 100%, rgba(118, 171, 66, 0.18), transparent 55%),
      linear-gradient(165deg, #0a3a66 0%, #1d8bd9 45%, #5fd0ff 100%);
   overflow: hidden;
}

#preloader::before {
   content: "";
   position: absolute;
   inset: -20%;
   background:
      radial-gradient(circle 2px at 12% 22%, rgba(255, 255, 255, 0.4), transparent),
      radial-gradient(circle 1.5px at 78% 18%, rgba(255, 255, 255, 0.35), transparent),
      radial-gradient(circle 2.5px at 32% 78%, rgba(255, 255, 255, 0.4), transparent),
      radial-gradient(circle 1.5px at 88% 62%, rgba(255, 255, 255, 0.3), transparent),
      radial-gradient(circle 2px at 50% 92%, rgba(255, 255, 255, 0.35), transparent);
   animation: bgBubblesDrift 14s linear infinite;
   pointer-events: none;
}

html.is-loading #preloader {
   display: flex !important;
   opacity: 1 !important;
   visibility: visible !important;
}

#preloader.preloader-done,
#preloader.is-hidden {
   opacity: 0 !important;
   visibility: hidden !important;
   pointer-events: none !important;
}

.water-preloader-wrap {
   text-align: center;
   padding: 20px;
   position: relative;
   z-index: 2;
   background: transparent;
}

/* ----- Logo stage --------------------------------------------------------- */
.logo-preloader {
   margin: 0 auto 24px;
}

.logo-preloader-stage {
   position: relative;
   width: 220px;
   height: 200px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Expanding water ripples behind logo */
.logo-ripple {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 80px;
   height: 80px;
   margin: -40px 0 0 -40px;
   border-radius: 50%;
   border: 2px solid rgba(255, 255, 255, 0.55);
   opacity: 0;
   animation: logoRipple 2.4s ease-out infinite;
}

.logo-ripple.r1 { animation-delay: 0s; }
.logo-ripple.r2 { animation-delay: 0.8s; }
.logo-ripple.r3 { animation-delay: 1.6s; }

/* Soft glow pulse */
.logo-glow {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 160px;
   height: 160px;
   margin: -80px 0 0 -80px;
   border-radius: 50%;
   background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(95, 208, 255, 0.25) 35%,
      rgba(29, 139, 217, 0.1) 55%,
      transparent 70%
   );
   animation: logoGlowPulse 2.4s ease-in-out infinite;
   pointer-events: none;
}

/* Rotating orbit ring */
.logo-orbit {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 190px;
   height: 190px;
   margin: -95px 0 0 -95px;
   border-radius: 50%;
   border: 2px dashed rgba(255, 255, 255, 0.2);
   animation: logoOrbitSpin 8s linear infinite;
   pointer-events: none;
}

.logo-orbit::after {
   content: "";
   position: absolute;
   top: -4px;
   left: 50%;
   width: 10px;
   height: 10px;
   margin-left: -5px;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}

/* Logo image */
.logo-preloader-img {
   position: relative;
   z-index: 3;
   display: block;
   width: auto;
   height: auto;
   max-width: 180px;
   max-height: 136px;
   object-fit: contain;
   filter: drop-shadow(0 8px 24px rgba(6, 42, 77, 0.35))
           drop-shadow(0 0 20px rgba(255, 255, 255, 0.25));
   animation: logoFloat 2.4s ease-in-out infinite;
   transform-origin: center center;
}

/* Shine sweep over logo */
.logo-shine {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 4;
   width: 120px;
   height: 140px;
   margin: -70px 0 0 -60px;
   background: linear-gradient(
      105deg,
      transparent 40%,
      rgba(255, 255, 255, 0.15) 48%,
      rgba(255, 255, 255, 0.45) 50%,
      rgba(255, 255, 255, 0.15) 52%,
      transparent 60%
   );
   pointer-events: none;
   mix-blend-mode: overlay;
   animation: logoShine 2.4s ease-in-out infinite;
}

/* Text */
.water-preloader-text {
   margin: 0 0 14px;
   font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.28em;
   text-transform: uppercase;
   color: #fff;
   text-shadow: 0 2px 10px rgba(6, 42, 77, 0.4);
   animation: logoTextPulse 2.4s ease-in-out infinite;
}

.water-preloader-bar {
   width: 160px;
   height: 3px;
   margin: 0 auto;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.2);
   overflow: hidden;
}

.water-preloader-bar span {
   display: block;
   height: 100%;
   border-radius: 999px;
   background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.85) 50%,
      transparent
   );
   animation: barShuttle 1.5s ease-in-out infinite;
}

/* ----- Animations --------------------------------------------------------- */
@keyframes bgBubblesDrift {
   0% { transform: translateY(0); }
   100% { transform: translateY(-50px); }
}

@keyframes logoRipple {
   0% {
      transform: scale(0.5);
      opacity: 0.8;
   }
   100% {
      transform: scale(2.4);
      opacity: 0;
   }
}

@keyframes logoGlowPulse {
   0%, 100% {
      transform: scale(0.92);
      opacity: 0.6;
   }
   50% {
      transform: scale(1.08);
      opacity: 1;
   }
}

@keyframes logoOrbitSpin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

@keyframes logoFloat {
   0%, 100% {
      transform: translateY(0) scale(1);
   }
   50% {
      transform: translateY(-10px) scale(1.04);
   }
}

@keyframes logoShine {
   0% {
      transform: translateX(-80px) skewX(-12deg);
      opacity: 0;
   }
   40% {
      opacity: 1;
   }
   100% {
      transform: translateX(80px) skewX(-12deg);
      opacity: 0;
   }
}

@keyframes logoTextPulse {
   0%, 100% { opacity: 0.75; }
   50% { opacity: 1; }
}

@keyframes barShuttle {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(200%); }
}

/* Mobile */
@media (max-width: 991px) {
   body.page-water .reveal,
   body.page-life-products .reveal,
   body.page-sustainability .reveal,
   body.page-distributor .reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
   }

   .logo-preloader-stage {
      width: 190px;
      height: 170px;
   }

   .logo-preloader-img {
      max-width: 150px;
      max-height: 113px;
   }

   .logo-orbit {
      width: 165px;
      height: 165px;
      margin: -82px 0 0 -82px;
   }
}

@media (prefers-reduced-motion: reduce) {
   .logo-ripple,
   .logo-glow,
   .logo-orbit,
   .logo-preloader-img,
   .logo-shine,
   .water-preloader-text,
   .water-preloader-bar span,
   #preloader::before {
      animation: none !important;
   }

   .logo-glow {
      opacity: 0.8;
   }
}