/* =====================================================
   PRELOADER — ICE SNOWFLAKE
   ندفة ثلج واضحة وقوية
===================================================== */

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

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

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(87, 220, 255, 0.22),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 12%,
      rgba(255, 255, 255, 0.16),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      #020912 0%,
      #061a2c 35%,
      #0a3d59 68%,
      #0d7089 100%
    );
}

/* ضوء جليدي خلف الندفة */
#preloader1::before {
  content: "";
  position: absolute;

  width: 360px;
  height: 360px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(80, 224, 255, 0.2),
      rgba(27, 136, 180, 0.08) 42%,
      transparent 70%
    );

  filter: blur(18px);

  animation: snowAura 2s ease-in-out infinite;
}

/* ثلج خفيف بالخلفية */
#preloader1::after {
  content: "";
  position: absolute;
  inset: -80px;

  pointer-events: none;

  background-image:
    radial-gradient(
      circle,
      rgba(239, 255, 255, 0.72) 0 1.4px,
      transparent 2px
    ),
    radial-gradient(
      circle,
      rgba(103, 229, 255, 0.42) 0 1px,
      transparent 1.7px
    );

  background-size:
    58px 58px,
    87px 87px;

  background-position:
    0 0,
    25px 35px;

  opacity: 0.34;

  animation: snowFall 7s linear infinite;
}

/* =====================================================
   حاوية الندفة
===================================================== */

.loader1-container {
  position: relative;
  z-index: 2;

  width: 250px;
  height: 250px;

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

/* =====================================================
   جسم الندفة الرئيسي
===================================================== */

.spinner1 {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 210px;
  height: 210px;

  transform: translate(-50%, -50%);

  filter:
    drop-shadow(0 0 8px rgba(232, 255, 255, 0.9))
    drop-shadow(0 0 22px rgba(72, 218, 255, 0.65));

  animation:
    snowflakeRotate 5s linear infinite,
    snowflakePulse 1.8s ease-in-out infinite;
}

/* أول 3 أذرع */
.spinner1::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 0 47%,
      rgba(238, 255, 255, 0.98) 47% 53%,
      transparent 53% 100%
    ),
    linear-gradient(
      30deg,
      transparent 0 47%,
      rgba(109, 234, 255, 0.96) 47% 53%,
      transparent 53% 100%
    ),
    linear-gradient(
      -30deg,
      transparent 0 47%,
      rgba(205, 250, 255, 0.95) 47% 53%,
      transparent 53% 100%
    );

  clip-path: polygon(
    47% 0,
    53% 0,
    53% 28%,
    62% 18%,
    67% 23%,
    53% 38%,
    53% 47%,

    100% 47%,
    100% 53%,
    72% 53%,
    82% 62%,
    77% 67%,
    62% 53%,
    53% 53%,

    76% 90%,
    71% 94%,
    57% 70%,
    55% 86%,
    48% 86%,
    50% 62%,

    24% 90%,
    29% 94%,
    43% 70%,
    45% 86%,
    52% 86%,
    50% 62%,

    0 53%,
    0 47%,
    28% 47%,
    18% 38%,
    23% 33%,
    38% 47%,
    47% 47%,

    24% 10%,
    29% 6%,
    43% 30%,
    45% 14%,
    52% 14%,
    50% 38%
  );
}

/* لمعان وتشعبات الندفة */
.spinner1::after {
  content: "";
  position: absolute;
  inset: 18px;

  background:
    linear-gradient(
      90deg,
      transparent 0 48%,
      rgba(255, 255, 255, 0.92) 48% 52%,
      transparent 52% 100%
    ),
    linear-gradient(
      30deg,
      transparent 0 48%,
      rgba(141, 240, 255, 0.82) 48% 52%,
      transparent 52% 100%
    ),
    linear-gradient(
      -30deg,
      transparent 0 48%,
      rgba(231, 255, 255, 0.84) 48% 52%,
      transparent 52% 100%
    );

  opacity: 0.72;

  animation: snowflakeFlash 1.3s ease-in-out infinite;
}

/* =====================================================
   اللوجو بالنص
===================================================== */

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

  width: 82px;
  height: 82px;

  transform: translate(-50%, -50%);

  object-fit: contain;

  border-radius: 14px;

  padding: 7px;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.32),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(211, 250, 255, 0.2),
      rgba(7, 48, 77, 0.92)
    );

  border:
    1px solid rgba(226, 255, 255, 0.9);

  box-shadow:
    0 0 0 5px rgba(84, 225, 255, 0.1),
    0 0 20px rgba(84, 225, 255, 0.66),
    inset 0 0 16px rgba(100, 232, 255, 0.2);

  animation: logoFreezePulse 1.7s ease-in-out infinite;
}

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

@keyframes snowflakeRotate {
  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@keyframes snowflakePulse {
  0%,
  100% {
    filter:
      drop-shadow(0 0 7px rgba(232, 255, 255, 0.65))
      drop-shadow(0 0 17px rgba(72, 218, 255, 0.42));
  }

  50% {
    filter:
      drop-shadow(0 0 14px rgba(255, 255, 255, 1))
      drop-shadow(0 0 32px rgba(72, 218, 255, 0.9));
  }
}

@keyframes snowflakeFlash {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.96);
  }

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

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

  50% {
    transform:
      translate(-50%, -50%)
      scale(1.05);

    box-shadow:
      0 0 0 7px rgba(84, 225, 255, 0.14),
      0 0 28px rgba(84, 225, 255, 0.92),
      inset 0 0 20px rgba(100, 232, 255, 0.32);
  }
}

@keyframes snowAura {
  0%,
  100% {
    transform: scale(0.88);
    opacity: 0.5;
  }

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

@keyframes snowFall {
  from {
    background-position:
      0 -80px,
      25px -120px;
  }

  to {
    background-position:
      25px 80px,
      0 120px;
  }
}

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

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

  .spinner1 {
    width: 172px;
    height: 172px;
  }

  .loader1-logo {
    width: 70px;
    height: 70px;
    padding: 6px;
  }

  #preloader1::before {
    width: 290px;
    height: 290px;
  }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  #preloader1::before,
  #preloader1::after,
  .spinner1,
  .spinner1::after,
  .loader1-logo {
    animation: none;
  }
}