/**
 * CDCloud — Preloader
 * Cinematic: geometric core → spin → disintegrate into particles → fade.
 * Dark, deep blue, electric cyan, subtle purple. No libs, no canvas, no GIF.
 */

/* Full-viewport overlay, above all content */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
}

/* Phase 4: overlay fades out at end (starts at 2.8s, duration 0.4s) */
.preloader.preloader-out {
  animation: preloader-overlay-out 0.5s ease-out forwards;
}

@keyframes preloader-overlay-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Dark background */
.preloader-bg {
  position: absolute;
  inset: 0;
  background: #050814;
  z-index: 0;
}

/* Subtle gradient for depth */
.preloader-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 50% at 50% 50%,
    rgba(37, 99, 235, 0.08),
    transparent 60%
  );
  z-index: 0;
}

/* Centered container for core + particles */
.preloader-inner {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
}

/* ——— Phase 1–3: Geometric core (hexagon), rotate → spin faster → disintegrate ——— */
.preloader-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  border-radius: 50%;
  border: 2px solid rgba(6, 182, 212, 0.9);
  box-shadow:
    0 0 30px rgba(6, 182, 212, 0.5),
    0 0 60px rgba(6, 182, 212, 0.2),
    inset 0 0 20px rgba(6, 182, 212, 0.15);
  background: rgba(6, 182, 212, 0.06);
  animation: preloader-core 2.2s ease-in-out forwards;
}

/* Hexagon variant: uncomment to use hexagon instead of circle */
.preloader-core.is-hexagon {
  border-radius: 0;
  border: none;
  background: rgba(6, 182, 212, 0.2);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Phase 1: slow rotate. Phase 2: faster spin. Phase 3: scale down and fade (disintegrate). */
@keyframes preloader-core {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  35% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  55% {
    transform: rotate(720deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  72% {
    transform: rotate(950deg) scale(0.6);
    opacity: 0.7;
    filter: blur(1px);
  }
  100% {
    transform: rotate(1100deg) scale(0);
    opacity: 0;
    filter: blur(4px);
  }
}

/* Particles container: centered so particles scatter from center */
.preloader-particles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
}

/* Single particle: small dot, uses --tx/--ty from JS for scatter direction */
.preloader-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  background: rgba(6, 182, 212, 0.95);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.8);
  opacity: 0;
  animation: preloader-particle 2s ease-out forwards;
  pointer-events: none;
}

/* Stagger particle start slightly for organic feel (delay set per particle in JS) */
.preloader-particle:nth-child(odd) {
  background: rgba(139, 92, 246, 0.7);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

/* Phase 3–4: appear when core disintegrates, scatter along --tx/--ty, then fade and blur */
@keyframes preloader-particle {
  0%, 55% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
    filter: blur(0);
  }
  65% {
    opacity: 0.9;
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(1);
    filter: blur(0);
  }
  85% {
    opacity: 0.6;
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.1);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.3);
    filter: blur(8px);
  }
}

/* Reduce motion: shorten animation and skip fancy effects */
@media (prefers-reduced-motion: reduce) {
  .preloader-core {
    animation-duration: 1s;
  }
  .preloader-particle {
    animation-duration: 0.8s;
  }
  .preloader.preloader-out {
    animation-duration: 0.3s;
  }
}