/* ==================== log_loader.css ==================== */

#preloader1 {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(53, 216, 255, 0.14),
      transparent 25%
    ),
    radial-gradient(
      circle at 18% 12%,
      rgba(11, 143, 194, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 82% 84%,
      rgba(53, 216, 255, 0.08),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #000000 0%,
      #020712 35%,
      #071b3a 68%,
      #000000 100%
    );
}

/* ضباب أزرق خفيف بالخلفية */
#preloader1::before {
  content: "";
  position: absolute;
  inset: -20%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(53, 216, 255, 0.12),
      transparent 42%
    );

  filter: blur(22px);
  animation: dragonMist 4s ease-in-out infinite;
  pointer-events: none;
}

/* لمعة تتحرك بالخلفية */
#preloader1::after {
  content: "";
  position: absolute;
  width: 150%;
  height: 45%;
  left: -25%;
  top: 28%;

  background:
    linear-gradient(
      100deg,
      transparent 25%,
      rgba(53, 216, 255, 0.04) 42%,
      rgba(53, 216, 255, 0.18) 50%,
      rgba(53, 216, 255, 0.04) 58%,
      transparent 75%
    );

  transform: rotate(-8deg);
  filter: blur(10px);
  animation: dragonLightSweep 3.5s linear infinite;
  pointer-events: none;
}

/* ==================== الحاوية ==================== */

.loader1-container {
  position: relative;

  width: 154px;
  height: 154px;

  display: flex;
  align-items: center;
  justify-content: center;

  isolation: isolate;
}

/* ==================== عين التنين ==================== */

.loader1-container::before {
  content: "";
  position: absolute;

  width: 146px;
  height: 82px;

  border-radius: 58% 42% 58% 42% / 65% 65% 35% 35%;

  background:
    radial-gradient(
      ellipse at center,
      #eaffff 0 7%,
      #35d6ff 8% 15%,
      #0b8fc2 16% 27%,
      #071b3a 28% 48%,
      #02040a 49% 100%
    );

  border: 1px solid rgba(53, 216, 255, 0.50);

  box-shadow:
    0 0 18px rgba(53, 216, 255, 0.42),
    0 0 42px rgba(53, 216, 255, 0.22),
    inset 0 0 20px rgba(53, 216, 255, 0.28);

  transform: rotate(-4deg);
  animation: dragonEyePulse 2.1s ease-in-out infinite;
  z-index: 0;
}

/* بؤبؤ عين التنين */
.loader1-container::after {
  content: "";
  position: absolute;

  width: 12px;
  height: 58px;

  border-radius: 55%;

  background:
    linear-gradient(
      180deg,
      transparent,
      #02040a 15%,
      #000000 50%,
      #02040a 85%,
      transparent
    );

  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.95),
    0 0 16px rgba(53, 216, 255, 0.45);

  transform: rotate(-4deg);
  animation: dragonPupil 2.1s ease-in-out infinite;
  z-index: 1;
}

/* ==================== الحلقة الدوارة ==================== */

.spinner1 {
  position: absolute;
  inset: 0;
  z-index: 2;

  border-radius: 50%;

  animation: dragonSpin 2.4s linear infinite;
}

.spinner1::before {
  content: "";
  position: absolute;
  inset: 4px;

  border-radius: 50%;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 35deg,
      rgba(53, 216, 255, 0.16) 62deg,
      #35d6ff 88deg,
      #dffcff 102deg,
      #35d6ff 116deg,
      rgba(53, 216, 255, 0.16) 142deg,
      transparent 170deg,
      transparent 360deg
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 5px),
      #000 calc(100% - 4px)
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 5px),
      #000 calc(100% - 4px)
    );

  filter:
    drop-shadow(0 0 7px rgba(53, 216, 255, 0.85))
    drop-shadow(0 0 16px rgba(53, 216, 255, 0.38));
}

/* حلقة داخلية مع شكل حراشف */
.spinner1::after {
  content: "";
  position: absolute;
  inset: 16px;

  border-radius: 50%;

  border:
    1px solid rgba(53, 216, 255, 0.28);

  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(53, 216, 255, 0.13) 0deg 7deg,
      transparent 7deg 18deg
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 3px),
      #000 calc(100% - 2px)
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 3px),
      #000 calc(100% - 2px)
    );

  animation: dragonSpinReverse 4s linear infinite;
  opacity: 0.9;
}

/* ==================== اللوغو ==================== */

.loader1-logo {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 72px;
  height: 72px;

  padding: 3px;

  object-fit: contain;
  object-position: center;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(0, 0, 0, 0.62),
      rgba(7, 27, 58, 0.50)
    );

  border:
    1px solid rgba(53, 216, 255, 0.58);

  box-shadow:
    0 0 0 4px rgba(53, 216, 255, 0.08),
    0 0 22px rgba(53, 216, 255, 0.52),
    0 0 48px rgba(53, 216, 255, 0.20),
    inset 0 0 16px rgba(53, 216, 255, 0.10);

  transform: translate(-50%, -50%);
  animation: dragonLogoFloat 2.2s ease-in-out infinite;

  z-index: 4;
}

/* ==================== الحركات ==================== */

@keyframes dragonSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes dragonSpinReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes dragonEyePulse {
  0%,
  100% {
    transform: rotate(-4deg) scale(0.96);
    opacity: 0.72;

    box-shadow:
      0 0 14px rgba(53, 216, 255, 0.32),
      0 0 34px rgba(53, 216, 255, 0.16),
      inset 0 0 16px rgba(53, 216, 255, 0.20);
  }

  50% {
    transform: rotate(-4deg) scale(1.04);
    opacity: 1;

    box-shadow:
      0 0 24px rgba(53, 216, 255, 0.62),
      0 0 55px rgba(53, 216, 255, 0.28),
      inset 0 0 24px rgba(53, 216, 255, 0.36);
  }
}

@keyframes dragonPupil {
  0%,
  100% {
    transform: rotate(-4deg) scaleY(0.82);
  }

  50% {
    transform: rotate(-4deg) scaleY(1.08);
  }
}

@keyframes dragonLogoFloat {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  50% {
    transform:
      translate(-50%, -56%)
      scale(1.035);
  }
}

@keyframes dragonMist {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.55;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes dragonLightSweep {
  0% {
    transform:
      translateX(-55%)
      rotate(-8deg);
    opacity: 0;
  }

  25% {
    opacity: 0.75;
  }

  65% {
    opacity: 0.35;
  }

  100% {
    transform:
      translateX(55%)
      rotate(-8deg);
    opacity: 0;
  }
}

/* ==================== موبايل ==================== */

@media (max-width: 480px) {
  .loader1-container {
    width: 138px;
    height: 138px;
  }

  .loader1-container::before {
    width: 132px;
    height: 74px;
  }

  .loader1-container::after {
    width: 10px;
    height: 52px;
  }

  .loader1-logo {
    width: 64px;
    height: 64px;
    border-radius: 19px;
  }

  .spinner1::after {
    inset: 15px;
  }
}

/* احترام إعداد تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .spinner1,
  .spinner1::after,
  .loader1-logo,
  .loader1-container::before,
  .loader1-container::after,
  #preloader1::before,
  #preloader1::after {
    animation-duration: 5s;
  }
}