:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-accent: #00f0ff;
  --color-deep: #4f46e5;
  --color-pink: #c084fc;
}

ai-preloader {
  --speed: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--size, 130px);
  height: var(--size, 130px);
  min-width: 20px;
  min-height: 20px;
  aspect-ratio: 1 / 1;
  container-type: size;
  vertical-align: middle;
  box-sizing: border-box;
}

.ai-loader {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  pointer-events: none;
  isolation: isolate;
  box-sizing: border-box;
}

.ai-loader * {
  box-sizing: border-box;
}

/* Onde concentriche */
.ripple {
  position: absolute;
  border-radius: 50%;
  border: max(1px, 1.15cqw) solid rgba(139, 92, 246, 0.45);
  background: transparent !important;
  outline: none;
  animation: aiPreloaderRipple calc(1.8s * var(--speed, 1)) cubic-bezier(0.1, 0.8, 0.3, 1) infinite !important;
}
.ripple:nth-child(2) { animation-delay: calc(0.6s * var(--speed, 1)) !important; }
.ripple:nth-child(3) { animation-delay: calc(1.2s * var(--speed, 1)) !important; }

/* Globo principale */
.orb-glow {
  position: absolute;
  width: 57.7cqw;
  height: 57.7cqw;
  border-radius: 50%;
  border: none;
  outline: none;
  background: conic-gradient(from 0deg, var(--color-primary), var(--color-accent), var(--color-secondary), var(--color-deep), var(--color-pink), var(--color-primary));
  filter: blur(calc(9.2cqw));
  opacity: 0.85;
  animation: 
    aiPreloaderSpin calc(1.8s * var(--speed, 1)) linear infinite !important, 
    aiPreloaderBreath calc(1.4s * var(--speed, 1)) ease-in-out infinite alternate !important;
}

/* Nucleo fluido */
.orb-liquid {
  position: absolute;
  width: 44.6cqw;
  height: 44.6cqw;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-secondary), var(--color-deep));
  filter: blur(calc(4.6cqw));
  mix-blend-mode: screen;
  animation: 
    aiPreloaderMorph calc(2.2s * var(--speed, 1)) ease-in-out infinite alternate !important, 
    aiPreloaderReverse calc(2.4s * var(--speed, 1)) linear infinite !important;
}

/* Punto luce centrale */
.orb-core-sparkle {
  position: absolute;
  width: 15.4cqw;
  height: 15.4cqw;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 11.5cqw 3cqw #ffffff, 0 0 19.2cqw 6.1cqw var(--color-accent);
  animation: aiPreloaderPulse calc(1.1s * var(--speed, 1)) ease-in-out infinite alternate !important;
}

/* Particelle */
.orbit-track {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46.1cqw;
  height: 46.1cqw;
  transform-origin: center center;
  border-radius: 50%;
  pointer-events: none;
  animation: aiPreloaderOrbitSpin calc(2.8s * var(--speed, 1)) linear infinite !important;
}

.particle {
  position: absolute;
  width: 3.8cqw;
  height: 3.8cqw;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6.1cqw 1.5cqw var(--color-accent);
}
.particle.p1 { top: 0; left: 50%; transform: translateX(-50%); }
.particle.p2 { bottom: 4.6cqw; right: 9.2cqw; opacity: 0.7; }
.particle.p3 { bottom: 9.2cqw; left: 4.6cqw; width: 3cqw; height: 3cqw; opacity: 0.5; }

/* Keyframes con namespace protetto */
@keyframes aiPreloaderOrbitSpin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes aiPreloaderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes aiPreloaderReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}
@keyframes aiPreloaderBreath {
  0% { transform: scale(0.88); }
  100% { transform: scale(1.08); }
}
@keyframes aiPreloaderMorph {
  0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  50% { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; }
  100% { border-radius: 30% 70% 60% 40% / 50% 30% 70% 50%; }
}
@keyframes aiPreloaderPulse {
  0% { transform: scale(0.7); opacity: 0.75; }
  100% { transform: scale(1.15); opacity: 1; }
}
@keyframes aiPreloaderRipple {
  0% { width: 34.6cqw; height: 34.6cqw; opacity: 0.9; }
  100% { width: 96cqw; height: 96cqw; opacity: 0; }
}