/* Page preloader — theme navy #233058 (no black / no rear glow) */
:root {
  --pl-accent: #ee3d25;
  --pl-navy: #233058;
  --pl-bg: #12182e;
}

#preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 90% 70% at 50% 40%, #1a2a52 0%, #0c1224 68%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

#preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/footer-bg.svg) center center;
  background-size: 0.52083vw;
  z-index: 1;
  pointer-events: none;
  opacity: 0.14;
}

/* Rear glow removed — keep empty shell for JS markup */
#preloader .loader-glow {
  display: block !important;
  position: absolute;
  width: min(52vw, 440px);
  height: min(52vw, 440px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #d5e2ff 0%, #a9c0f4 64%, rgba(150, 176, 230, 0.55) 80%, rgba(18, 28, 58, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Hide old spinning circle */
#preloader .loader-ring {
  display: none !important;
}

/* Split lock — navy half drops from above, red half rises from below */
.loader-square {
  width: min(42vw, 320px);
  height: min(42vw, 320px);
  position: relative;
  overflow: visible;
  background: none;
  z-index: 9;
  transform-origin: center center;
  animation: pl-lock-settle 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.loader-square::before,
.loader-square::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: url(../img/Icon.png) center center no-repeat;
  background-size: 118% auto;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 1px rgba(236, 242, 255, 0.95)) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}

/* Navy flame */
.loader-square::before {
  clip-path: polygon(62.4% -1.6%, 62.4% 1.1%, 61.9% 3.9%, 60.5% 6.7%, 58.7% 9.4%, 56.4% 12.2%, 53.2% 14.9%, 49.9% 17.7%, 46.7% 20.5%, 43.5% 23.2%, 39.8% 26%, 36.6% 28.8%, 33.4% 31.5%, 30.6% 34.3%, 28.8% 37%, 26.9% 39.8%, 25.5% 42.6%, 24.6% 45.3%, 24.2% 48.1%, 23.7% 50.9%, 23.7% 53.6%, 23.7% 56.4%, 24.2% 59.2%, 24.6% 61.9%, 25.1% 64.7%, 26% 67.4%, 27.4% 70.2%, 28.8% 73%, 30.1% 75.7%, 32.4% 78.5%, 34.7% 81.3%, 35.7% 81.3%, 35.2% 78.5%, 35.7% 75.7%, 36.1% 73%, 37% 70.2%, 38.4% 67.4%, 40.3% 64.7%, 42.6% 61.9%, 44.9% 59.2%, 48.1% 56.4%, 51.3% 53.6%, 55% 50.9%, 58.7% 48.1%, 62.4% 45.3%, 65.6% 42.6%, 68.4% 39.8%, 70.7% 37%, 72.5% 34.3%, 73.9% 31.5%, 75.3% 28.8%, 75.7% 26%, 76.2% 23.2%, 76.7% 20.5%, 76.2% 17.7%, 75.7% 14.9%, 75.3% 12.2%, 73.9% 9.4%, 72.5% 6.7%, 70.2% 3.9%, 67.4% 1.1%, 63.8% -1.6%);
  animation: pl-half-navy 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Red flame */
.loader-square::after {
  clip-path: polygon(73.9% 38.9%, 71.6% 41.7%, 69.3% 44.4%, 66.1% 47.2%, 62.8% 49.9%, 59.2% 52.7%, 55.5% 55.5%, 51.8% 58.2%, 48.6% 61%, 46.3% 63.8%, 44% 66.5%, 42.1% 69.3%, 41.2% 72%, 40.7% 74.8%, 40.3% 77.6%, 40.3% 80.3%, 40.7% 83.1%, 41.2% 85.9%, 42.6% 88.6%, 43.5% 91.4%, 45.3% 94.1%, 47.2% 96.9%, 49% 99.7%, 49.9% 99.7%, 49.9% 96.9%, 50.4% 94.1%, 51.3% 91.4%, 52.2% 88.6%, 54.1% 85.9%, 56.4% 83.1%, 59.6% 80.3%, 63.3% 77.6%, 66.5% 74.8%, 69.3% 72%, 71.1% 69.3%, 72.5% 66.5%, 73.9% 63.8%, 74.8% 61%, 75.3% 58.2%, 75.7% 55.5%, 75.7% 52.7%, 75.7% 49.9%, 75.7% 47.2%, 75.3% 44.4%, 74.3% 41.7%, 73.9% 38.9%);
  animation: pl-half-red 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

/* Progress bar removed */
#preloader .loader-bar {
  display: none !important;
}

/* Orbiting dots (no circle stroke) */
#preloader .loader-glow::before,
#preloader .loader-glow::after {
  content: none;
  display: none !important;
}

#preloader .loader-glow::after {
  width: 5px;
  height: 5px;
  margin: -2.5px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
  animation-duration: 2.4s;
  animation-direction: reverse;
  animation-delay: -0.6s;
  opacity: 0.9;
}

@keyframes pl-aura {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes pl-half-navy {
  0% {
    transform: translate3d(-4%, -22%, 0);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes pl-half-red {
  0% {
    transform: translate3d(5%, 22%, 0);
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes pl-lock-settle {
  0% {
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pl-pulse {
  0%,
  100% {
    transform: scale(0.85);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.75;
  }
}

@keyframes pl-orbit {
  0% {
    transform: rotate(0deg) translateX(min(28vw, 200px)) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(min(28vw, 200px)) rotate(-360deg);
  }
}

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

#preloader.preloader-exit {
  transition: none;
}
#preloader.preloader-exit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pl-accent);
  z-index: 20;
  transform-origin: bottom;
  animation: pl-curtain 0.55s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  pointer-events: none;
}
@keyframes pl-curtain {
  0% {
    transform: scaleY(0);
  }
  45% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

#preloader.preloader-enter .loader-square {
  animation: pl-lock-settle 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@media (max-width: 700px) {
  .loader-square {
    width: min(58vw, 240px);
    height: min(58vw, 240px);
  }
  #preloader .loader-glow {
    width: min(78vw, 340px);
    height: min(78vw, 340px);
  }
  @keyframes pl-orbit {
    0% {
      transform: rotate(0deg) translateX(min(36vw, 150px)) rotate(0deg);
    }
    100% {
      transform: rotate(360deg) translateX(min(36vw, 150px)) rotate(-360deg);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #preloader .loader-glow,
  #preloader .loader-glow::before,
  #preloader .loader-glow::after,
  .loader-square,
  .loader-square::before,
  .loader-square::after {
    animation: none !important;
  }
  .loader-square,
  .loader-square::before,
  .loader-square::after {
    opacity: 1;
    transform: none;
  }
  .loader-square {
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.28));
  }
}