:root {
  --cs-eagle-gold: #ffc400;
  --cs-eagle-gold-soft: rgba(255, 196, 0, 0.44);
  --cs-eagle-bg: #030303;
}

html.cs-eagle-is-loading,
html.cs-eagle-is-loading body {
  overflow: hidden !important;
}

.cs-eagle-preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 196, 0, 0.09), transparent 29rem),
    var(--cs-eagle-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.cs-eagle-preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    115deg,
    transparent 0,
    transparent 110px,
    rgba(255, 255, 255, 0.012) 111px,
    transparent 112px
  );
}

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

.cs-eagle-preloader__stage {
  position: relative;
  width: min(72vw, 330px);
  display: grid;
  justify-items: center;
  isolation: isolate;
}

.cs-eagle-preloader__halo {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 112%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 10deg,
    transparent 0 27%,
    rgba(255, 196, 0, 0.12) 34%,
    var(--cs-eagle-gold) 48%,
    rgba(255, 196, 0, 0.12) 61%,
    transparent 68% 100%
  );
  filter: blur(0.3px) drop-shadow(0 0 14px var(--cs-eagle-gold-soft));
  opacity: 0.72;
  transform: translate(-50%, -50%);
  animation: cs-eagle-halo-spin 2.4s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65% 68%, transparent 69%);
  mask: radial-gradient(circle, transparent 64%, #000 65% 68%, transparent 69%);
}

.cs-eagle-preloader__logo-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 22%;
  animation: cs-eagle-float 2.2s ease-in-out infinite;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.65));
}

.cs-eagle-preloader__logo {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.cs-eagle-preloader__shine {
  position: absolute;
  inset: -45% auto -45% -55%;
  width: 27%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.04),
    transparent
  );
  transform: rotate(18deg);
  animation: cs-eagle-shine 2.6s ease-in-out infinite 0.3s;
  mix-blend-mode: screen;
}

.cs-eagle-preloader__line {
  position: relative;
  width: 44%;
  height: 3px;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 18px rgba(255, 196, 0, 0.08);
}

.cs-eagle-preloader__line span {
  position: absolute;
  inset: 0 auto 0 -58%;
  width: 58%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #ffe071 28%, var(--cs-eagle-gold));
  box-shadow: 0 0 12px rgba(255, 196, 0, 0.75);
  animation: cs-eagle-line 1.25s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes cs-eagle-halo-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes cs-eagle-float {
  0%, 100% { transform: translateY(0) scale(0.985); }
  50% { transform: translateY(-8px) scale(1); }
}

@keyframes cs-eagle-shine {
  0%, 18% { left: -55%; opacity: 0; }
  32% { opacity: 0.9; }
  58%, 100% { left: 130%; opacity: 0; }
}

@keyframes cs-eagle-line {
  0% { left: -58%; }
  100% { left: 100%; }
}

@media (max-width: 480px) {
  .cs-eagle-preloader__stage {
    width: min(76vw, 280px);
  }

  .cs-eagle-preloader__line {
    margin-top: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-eagle-preloader__halo,
  .cs-eagle-preloader__logo-wrap,
  .cs-eagle-preloader__shine,
  .cs-eagle-preloader__line span {
    animation-duration: 3.6s;
  }

  .cs-eagle-preloader__logo-wrap {
    animation-name: none;
  }
}