/* ==========================================================================
   WHALE OS — Quantum Cloud Loader (Design Spec: namethatui.com/3/loading.txt)
   Features: 4 orbital quantum particles (Red, Blue, Yellow, Green)
   ========================================================================== */

.quantum-loader-stage {
  display: flex;
  min-height: 140px;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.quantum-cloud-container {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 200px;
  height: 120px;
  align-items: center;
  justify-content: center;
}

/* Center Emblem / 3D Whale */
.quantum-loader-center-emblem {
  position: absolute;
  z-index: 20;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 28px rgba(0, 140, 255, 0.45), 0 0 50px rgba(0, 140, 255, 0.2);
  animation: quantum-emblem-pulse 3.6s ease-in-out infinite alternate;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), rgba(10,25,50,0.8));
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.quantum-loader-center-emblem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes quantum-emblem-pulse {
  0% {
    transform: scale(0.96) rotate(-2deg);
    box-shadow: 0 0 20px rgba(0, 140, 255, 0.35), 0 0 40px rgba(0, 140, 255, 0.15);
  }
  100% {
    transform: scale(1.04) rotate(2deg);
    box-shadow: 0 0 32px rgba(0, 180, 255, 0.6), 0 0 60px rgba(0, 140, 255, 0.3);
  }
}

/* RED — Fast inner particle */
.quantum-particle-red {
  position: absolute;
  z-index: 30;
  width: 18px;
  height: 18px;
  animation: quantum-red 3.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  will-change: transform, opacity;
}
.quantum-particle-red .quantum-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.85), 0 0 28px rgba(248, 113, 113, 0.4);
}
@keyframes quantum-red {
  0% { transform: translate3d(-52px, 9px, 0) scale(0.72); opacity: 0.45; }
  25% { transform: translate3d(-26px, -9px, 0) scale(0.95); opacity: 0.78; }
  50% { transform: translate3d(52px, 0, 0) scale(1.18); opacity: 1; }
  75% { transform: translate3d(26px, 9px, 0) scale(0.95); opacity: 0.78; }
  100% { transform: translate3d(-52px, 9px, 0) scale(0.72); opacity: 0.45; }
}

/* BLUE — Large outer particle */
.quantum-particle-blue {
  position: absolute;
  z-index: 10;
  width: 24px;
  height: 24px;
  animation: quantum-blue 5.6s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  will-change: transform, opacity;
}
.quantum-particle-blue .quantum-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.8), 0 0 34px rgba(96, 165, 250, 0.35);
}
@keyframes quantum-blue {
  0% { transform: translate3d(46px, -5px, 0) scale(1); opacity: 0.95; }
  25% { transform: translate3d(23px, 9px, 0) scale(0.88); opacity: 0.72; }
  50% { transform: translate3d(-46px, 4px, 0) scale(0.68); opacity: 0.42; }
  75% { transform: translate3d(-23px, -9px, 0) scale(0.88); opacity: 0.72; }
  100% { transform: translate3d(46px, -5px, 0) scale(1); opacity: 0.95; }
}

/* YELLOW — Center oscillator */
.quantum-particle-yellow {
  position: absolute;
  z-index: 40;
  width: 20px;
  height: 20px;
  animation: quantum-yellow 3.1s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  will-change: transform, opacity;
}
.quantum-particle-yellow .quantum-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #facc15;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.85), 0 0 30px rgba(250, 204, 21, 0.4);
}
@keyframes quantum-yellow {
  0% { transform: translate3d(-32px, 3px, 0) scale(0.82); opacity: 0.65; }
  20% { transform: translate3d(-20px, -7px, 0) scale(0.94); opacity: 0.82; }
  50% { transform: translate3d(32px, 0, 0) scale(1.08); opacity: 1; }
  80% { transform: translate3d(20px, 7px, 0) scale(0.94); opacity: 0.82; }
  100% { transform: translate3d(-32px, 3px, 0) scale(0.82); opacity: 0.65; }
}

/* GREEN — Slow orbital sweep */
.quantum-particle-green {
  position: absolute;
  z-index: 5;
  width: 16px;
  height: 16px;
  animation: quantum-green 6.4s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
  will-change: transform, opacity;
}
.quantum-particle-green .quantum-dot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.85), 0 0 28px rgba(74, 222, 128, 0.4);
}
@keyframes quantum-green {
  0% { transform: translate3d(72px, 8px, 0) scale(0.52); opacity: 0.25; }
  20% { transform: translate3d(48px, -6px, 0) scale(0.68); opacity: 0.45; }
  50% { transform: translate3d(0, 4px, 0) scale(1); opacity: 0.9; }
  80% { transform: translate3d(-48px, -6px, 0) scale(0.68); opacity: 0.45; }
  100% { transform: translate3d(-72px, 8px, 0) scale(0.52); opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .quantum-particle-red, .quantum-particle-blue, .quantum-particle-yellow, .quantum-particle-green, .quantum-loader-center-emblem {
    animation: none !important;
  }
}