/* Shared with the server loader and the critical, pre-JavaScript startup layer. */
.loader-quantum-container {
  --loader-primary: var(--primary, var(--madmon-startup-primary, var(--brand-primary, var(--primary-color, #0891b2))));
  --loader-secondary: var(--secondary, var(--madmon-startup-secondary, var(--brand-secondary, var(--primary-color, #06b6d4))));
  --loader-accent: var(--accent, var(--madmon-startup-accent, var(--brand-accent, #22d3ee)));
  --loader-glow: color-mix(in srgb, var(--loader-secondary) 55%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 1rem;
  font-family: var(--body-font, system-ui, -apple-system, sans-serif);
  text-align: center;
}
.loader-quantum-container .gyro-wrapper { position: relative; display: flex; align-items: center; justify-content: center; perspective: 600px; width: min(140px, 65vw); height: 140px; flex: none; }
.loader-quantum-container .gyro-glow { position: absolute; width: 85%; height: 85%; border-radius: 50%; background: radial-gradient(circle, var(--loader-glow) 0%, transparent 70%); animation: pulseGlow 1.60s ease-in-out infinite; }
.loader-quantum-container .gyro-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; }
.loader-quantum-container .ring-1 { width: 90%; height: 90%; border-left-color: var(--loader-primary); border-right-color: var(--loader-accent); box-shadow: 0 0 14px var(--loader-glow); animation: spinGimbal1 2.40s linear infinite; }
.loader-quantum-container .ring-2 { width: 70%; height: 70%; border-top-color: var(--loader-secondary); border-bottom-color: var(--loader-accent); animation: spinGimbal2 1.92s linear infinite; }
.loader-quantum-container .ring-3 { width: 50%; height: 50%; border: 1.5px dashed var(--loader-accent); animation: spinGimbal3 1.44s linear infinite; }
.loader-quantum-container .gyro-core { position: relative; width: 25%; height: 25%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--loader-accent) 40%, var(--loader-primary) 100%); box-shadow: 0 0 18px var(--loader-primary), 0 0 30px var(--loader-accent); animation: pulseCore 0.96s ease-in-out infinite; z-index: 5; }
.loader-quantum-container .loader-label { margin: 16px 0 0; font-size: 15px; font-weight: 700; line-height: 1.8; color: var(--loader-primary); }
.loader-quantum-container--compact .gyro-wrapper { width: 110px; height: 110px; }
.loader-quantum-container--compact .loader-label { font-size: 14px; }
@keyframes spinGimbal1 { 0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg); } }
@keyframes spinGimbal2 { 0% { transform: rotateX(360deg) rotateY(0deg) rotateZ(180deg); } 100% { transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg); } }
@keyframes spinGimbal3 { 0% { transform: rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateY(360deg) rotateZ(-360deg); } }
@keyframes pulseGlow { 0%, 100% { transform: scale(.9); opacity: .4; } 50% { transform: scale(1.15); opacity: .8; } }
@keyframes pulseCore { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) {
  .loader-quantum-container .gyro-glow, .loader-quantum-container .gyro-ring, .loader-quantum-container .gyro-core { animation: none; }
  .loader-quantum-container .ring-1 { transform: rotateX(55deg) rotateY(-25deg); }
  .loader-quantum-container .ring-2 { transform: rotateX(-35deg) rotateY(55deg); }
  .loader-quantum-container .ring-3 { transform: rotateX(45deg) rotateY(20deg); }
}

/* Control-only variant: the critical startup stylesheet does not need this. */
.loader-quantum-container--inline {
  --loader-primary: currentColor;
  --loader-secondary: currentColor;
  --loader-accent: currentColor;
  display: inline-flex;
  width: 24px;
  height: 24px;
  padding: 0;
  flex: none;
  color: inherit;
  vertical-align: middle;
}
.loader-quantum-container--inline .gyro-wrapper { width: 100%; height: 100%; }
.loader-quantum-container--inline .gyro-glow { display: none; }
.loader-quantum-container--inline .gyro-core, .loader-quantum-container--inline .ring-1 { box-shadow: none; }