/* =========================================================
   LOCK PAGE WHILE PRELOADER IS ACTIVE
========================================================= */

html.lg-loading, body.lg-loading {
  overflow: hidden !important;
}

/* =========================================================
   MAIN PRELOADER
========================================================= */

#lg-preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient( circle at 50% 42%, #0b6045 0%, #08543b 25%, #064731 52%, #043b29 76%, #032d20 100% );
  z-index: 2147483647;
  opacity: 1;
  visibility: visible;
  isolation: isolate;
  transition: opacity 0.9s cubic-bezier(.4, 0, .2, 1), visibility 0.9s ease;
}

/* =========================================================
   SUBTLE BACKGROUND TEXTURE
========================================================= */

#lg-preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: linear-gradient( rgba(255, 255, 255, 0.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px );
  background-size: 60px 60px;
  mask-image: radial-gradient( circle at center, #000 0%, transparent 78% );
}

/* =========================================================
   AMBIENT BACKGROUND GLOWS
========================================================= */

.lg-preloader-ambient {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* Top Right Glow */

.lg-ambient-one {
  width: 650px;
  height: 650px;
  top: -300px;
  right: -220px;
  background: radial-gradient( circle, rgba(80, 170, 130, 0.16), transparent 68% );
  animation: lgAmbientOne 10s ease-in-out infinite alternate;
}

/* Bottom Left Glow */

.lg-ambient-two {
  width: 550px;
  height: 550px;
  bottom: -280px;
  left: -200px;
  background: radial-gradient( circle, rgba(40, 130, 92, 0.13), transparent 70% );
  animation: lgAmbientTwo 12s ease-in-out infinite alternate;
}

/* =========================================================
   CINEMATIC LIGHT SWEEP
========================================================= */

.lg-preloader-light {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 40%;
  height: 200%;
  pointer-events: none;
  opacity: 0.28;
  transform: rotate(18deg) translateX(-180%);
  background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015), transparent );
  animation: lgLightSweep 8s ease-in-out infinite;
  will-change: transform;
}

/* =========================================================
   MAIN CONTENT
========================================================= */

.lg-preloader-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
}

/* =========================================================
   LOGO STAGE
========================================================= */

.lg-logo-stage {
  position: relative;
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   SOFT GLOW BEHIND LOGO
========================================================= */

.lg-logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 260px;
  max-width: 80vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient( ellipse, rgba(103, 190, 148, 0.13) 0%, rgba(103, 190, 148, 0.05) 40%, transparent 72% );
  filter: blur(20px);
  animation: lgLogoGlow 4.5s ease-in-out infinite;
}

/* =========================================================
   COMPANY LOGO
========================================================= */

.lg-preloader-logo {
  position: relative;
  z-index: 5;
  display: block;
  width: 430px;
  max-width: 90vw;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  filter: drop-shadow( 0 15px 30px rgba(0, 0, 0, 0.18) );
  animation: lgLogoEntrance 1.4s cubic-bezier(.22, 1, .36, 1) 0.15s forwards;
  will-change: transform, opacity;
}

/* =========================================================
   PROGRESS AREA
========================================================= */

.lg-progress {
  position: relative;
  z-index: 10;
  margin-top: -55px;
  opacity: 0;
  transform: translateY(8px);
  animation: lgContentReveal 0.9s ease 0.9s forwards;
}

/* =========================================================
   PROGRESS TRACK
========================================================= */

.lg-progress-track {
  position: relative;
  width: 200px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50px;
}

/* =========================================================
   MOVING PROGRESS LIGHT
========================================================= */

.lg-progress-line {
  position: absolute;
  top: 0;
  left: -70%;
  width: 70%;
  height: 100%;
  border-radius: 50px;
  background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.35) 20%, rgba(255, 255, 255, 1) 50%, rgba(154, 220, 187, 0.80) 70%, transparent 100% );
  animation: lgProgressMove 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
  will-change: transform;
}

/* =========================================================
   PROFESSIONAL MESSAGE
========================================================= */

.lg-preloader-message {
  margin: 25px 0 0;
  padding: 0;
  max-width: 500px;
  font-family: "Space Grotesk", Inter, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transform: translateY(10px);
  animation: lgContentReveal 1s ease 1.1s forwards;
}

/* =========================================================
   SMALL LOADING STATUS
========================================================= */

.lg-loading-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 15px;
  font-family: Inter, Arial, sans-serif;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.42);
  opacity: 0;
  animation: lgSimpleFade 1s ease 1.5s forwards;
}

/* =========================================================
   LOADING DOTS
========================================================= */

.lg-loading-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lg-loading-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  animation: lgDotPulse 1.4s ease-in-out infinite;
}

.lg-loading-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.lg-loading-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

/* =========================================================
   LOGO ENTRANCE ANIMATION
========================================================= */

@keyframes lgLogoEntrance {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   PROGRESS ANIMATION
========================================================= */

@keyframes lgProgressMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(245%);
  }
}

/* =========================================================
   CONTENT REVEAL
========================================================= */

@keyframes lgContentReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   SIMPLE FADE
========================================================= */

@keyframes lgSimpleFade {
  to {
    opacity: 1;
  }
}

/* =========================================================
   LOGO GLOW
========================================================= */

@keyframes lgLogoGlow {
  0%, 100% {
    opacity: 0.40;
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* =========================================================
   AMBIENT TOP GLOW MOVEMENT
========================================================= */

@keyframes lgAmbientOne {
  from {
    transform: translate3d( 0, 0, 0 );
  }
  to {
    transform: translate3d( -70px, 60px, 0 );
  }
}

/* =========================================================
   AMBIENT BOTTOM GLOW MOVEMENT
========================================================= */

@keyframes lgAmbientTwo {
  from {
    transform: translate3d( 0, 0, 0 );
  }
  to {
    transform: translate3d( 80px, -60px, 0 );
  }
}

/* =========================================================
   LIGHT SWEEP ANIMATION
========================================================= */

@keyframes lgLightSweep {
  0% {
    transform: rotate(18deg) translateX(-180%);
  }
  45%, 100% {
    transform: rotate(18deg) translateX(450%);
  }
}

/* =========================================================
   DOT PULSE
========================================================= */

@keyframes lgDotPulse {
  0%, 100% {
    opacity: 0.25;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* =========================================================
   ELEGANT EXIT
========================================================= */

#lg-preloader.lg-preloader-exit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#lg-preloader.lg-preloader-exit .lg-preloader-inner {
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  transition: opacity 0.55s ease, transform 0.8s cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {
  .lg-preloader-inner {
    max-width: 600px;
    padding: 25px;
  }
}

@media (max-width: 768px) {
  .lg-logo-stage {
    max-width: 450px;
  }
}

@media (max-width: 768px) {
  .lg-preloader-logo {
    width: 380px;
    max-width: 88vw;
  }
}

@media (max-width: 768px) {
  .lg-progress {
    margin-top: -48px;
  }
}

@media (max-width: 768px) {
  .lg-progress-track {
    width: 180px;
  }
}

@media (max-width: 768px) {
  .lg-preloader-message {
    font-size: 12px;
    letter-spacing: 2.5px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {
  .lg-preloader-inner {
    padding: 20px;
  }
}

@media (max-width: 576px) {
  .lg-logo-stage {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .lg-preloader-logo {
    width: 320px;
    max-width: 94vw;
  }
}

@media (max-width: 576px) {
  .lg-logo-glow {
    width: 280px;
    height: 200px;
  }
}

@media (max-width: 576px) {
  .lg-progress {
    margin-top: -38px;
  }
}

@media (max-width: 576px) {
  .lg-progress-track {
    width: 150px;
  }
}

@media (max-width: 576px) {
  .lg-preloader-message {
    max-width: 300px;
    margin-top: 22px;
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: 2px;
  }
}

@media (max-width: 576px) {
  .lg-loading-status {
    margin-top: 13px;
    font-size: 6px;
    letter-spacing: 2px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {
  .lg-preloader-logo {
    width: 285px;
  }
}

@media (max-width: 380px) {
  .lg-progress {
    margin-top: -32px;
  }
}

@media (max-width: 380px) {
  .lg-preloader-message {
    max-width: 260px;
    font-size: 9px;
    letter-spacing: 1.6px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .lg-preloader-ambient, .lg-preloader-light, .lg-logo-glow, .lg-progress-line, .lg-loading-dots span {
    animation-duration: 3s;
  }
}