/* ==========================================================================
   KVK LOADING SCREEN SYSTEM v3.9.395 (loading_screen.css)
   Cinzel Watermark (9%) + Orbital Halo Ring (6px Saffron Arc) +
   Smooth Continuous Flow + Centered Logo + Shimmer Sweep Waves.
   - Web Panels: Original full size (156px ring, 96px logo, clamp(140px,28vw,320px) watermark)
   - Android/Mobile: Responsive tuned (136px ring, 74px logo, clamp(160px,38vw,360px) bigger watermark)
   - Zero white box, zero broken alt outline, 100% transparent card backing.
   ========================================================================== */

/* Preconnect & Google Font Cinzel */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@900&display=swap');

#kvkSplashOverlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2147483647 !important;
  background-color: #FFF8E7 !important;
  background: #FFF8E7 !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  contain: strict !important;
  will-change: opacity !important;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#kvkSplashOverlay.kvk-splash-fade-out {
  opacity: 0 !important;
  pointer-events: none !important;
}

#kvkSplashOverlay.kvk-splash-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 1. Background Watermark: Exact Dead Center, Cinzel Font */
.kvk-watermark {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate3d(-50%, -50%, 0) !important;
  font-family: 'Cinzel', serif, Georgia !important;
  font-size: clamp(140px, 28vw, 320px) !important;
  font-weight: 950 !important;
  color: rgba(234, 88, 12, 0.09) !important;
  letter-spacing: clamp(10px, 2.5vw, 24px) !important;
  margin-right: calc(-1 * clamp(10px, 2.5vw, 24px)) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  contain: layout paint !important;
}

/* 2. Main Hero Stage */
.splash-hero-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  contain: layout size !important;
}

/* Orbital Container: 156px on Web Panels - Exact 50% Dead Center */
.orbital-container {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate3d(-50%, -50%, 0) !important;
  width: 156px !important;
  height: 156px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  z-index: 10 !important;
  contain: layout paint !important;
  will-change: transform !important;
}

/* Outer Spinning Orbital Ring: 6px Bold Halo on #FFF8E7 - 100% GPU Compositor Accelerated */
.orbital-ring {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  border: 6px solid #ffedd5 !important;
  border-top-color: #FF6B00 !important;
  border-right-color: #ea580c !important;
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.28) !important;
  will-change: transform !important;
  contain: strict !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  animation: ringSmoothSync 1.1s linear infinite !important;
}

/* Subtle Outer Glow Halo (Pure GPU accelerated, no dashed CPU rasterizing) */
.orbital-container::before {
  content: '' !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 107, 0, 0.32) !important;
  box-shadow: 0 0 12px rgba(255, 107, 0, 0.18) !important;
  will-change: transform, opacity !important;
  contain: strict !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  animation: pulseOrbit 2.4s ease-in-out infinite !important;
}

@keyframes pulseOrbit {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes ringSmoothSync {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 3. Floating App Logo: 96px on Web (Pehle Jaisa), Pure Transparent (No White Box) */
.logo-core {
  position: relative !important;
  width: 96px !important;
  height: 96px !important;
  border-radius: 20px !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  z-index: 5 !important;
  border: none !important;
  box-shadow: none !important;
  contain: layout paint !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  animation: logoSmoothSync 1.1s ease-in-out infinite !important;
}

.logo-core img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: transparent !important;
  text-indent: -9999px !important;
  font-size: 0 !important;
  border-radius: 20px !important;
  opacity: 1 !important;
}

@keyframes logoSmoothSync {
  0%, 100% { transform: translate3d(0, 0, 0) scale3d(0.97, 0.97, 1); }
  50% { transform: translate3d(0, -2px, 0) scale3d(1.05, 1.05, 1); }
}

/* 4. Loading Wave Strip: Anchored strictly below orbital ring (50% + 94px) */
.loading-wave-strip {
  position: absolute !important;
  top: calc(50% + 94px) !important;
  left: 50% !important;
  transform: translate3d(-50%, 0, 0) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 2.5px !important;
  color: #7c2d12 !important;
  height: 32px !important;
  white-space: nowrap !important;
  z-index: 10 !important;
  contain: layout !important;
  will-change: transform !important;
}

.wave-char {
  display: inline-block !important;
  color: #ea580c !important;
  will-change: transform, opacity !important;
  contain: layout style !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  animation: charWave 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important;
}

@keyframes charWave {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.4;
  }
  50% {
    transform: translate3d(0, -9px, 0);
    opacity: 1;
  }
}

@keyframes charShimmer {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.4;
  }
  50% {
    transform: translate3d(0, -9px, 0);
    opacity: 1;
  }
}

.wave-char:nth-child(1) { animation-delay: 0.00s !important; }
.wave-char:nth-child(2) { animation-delay: 0.08s !important; }
.wave-char:nth-child(3) { animation-delay: 0.16s !important; }
.wave-char:nth-child(4) { animation-delay: 0.24s !important; }
.wave-char:nth-child(5) { animation-delay: 0.32s !important; }
.wave-char:nth-child(6) { animation-delay: 0.40s !important; }
.wave-char:nth-child(7) { animation-delay: 0.48s !important; }
.wave-char:nth-child(8) { animation-delay: 0.56s !important; }
.wave-char:nth-child(9) { animation-delay: 0.64s !important; }
.wave-char:nth-child(10) { animation-delay: 0.72s !important; }

/* Subtitle Tagline: Anchored at 50% + 128px */
.brand-tag {
  position: absolute !important;
  top: calc(50% + 128px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  color: #b45309 !important;
  text-transform: uppercase !important;
  opacity: 0.88 !important;
  white-space: nowrap !important;
  z-index: 10 !important;
}

/* ==========================================================================
   5. ANDROID APPS & MOBILE PORTRAIT TUNING (Screens <= 768px)
   - Watermark bada size: clamp(160px, 38vw, 360px)
   - Logo thoda chota: 74px inside 136px ring (sleek & spacious)
   - Zero white box: 100% transparent backing
   ========================================================================== */
@media (max-width: 768px) {
  .kvk-watermark {
    font-size: clamp(160px, 38vw, 360px) !important;
    letter-spacing: clamp(12px, 3.2vw, 26px) !important;
    margin-right: calc(-1 * clamp(12px, 3.2vw, 26px)) !important;
  }
  .orbital-container {
    width: 136px !important;
    height: 136px !important;
  }
  .logo-core {
    width: 74px !important;
    height: 74px !important;
    border-radius: 16px !important;
  }
  .logo-core img {
    border-radius: 16px !important;
  }
  .loading-wave-strip {
    top: calc(50% + 82px) !important;
    font-size: 16px !important;
  }
  .brand-tag {
    top: calc(50% + 112px) !important;
    font-size: 11px !important;
  }
}