.crystalized-ball {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* === hubParticle1: 2D/CSS fallback orb (WebGL2 missing or reduced-motion) === */
.crystal-bg .crystal-fallback-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.crystal-bg .crystal-fallback-canvas {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  background: transparent !important;
}

/* Match hubSplit1 / hubLusion desktop ball placement */
body.view-home .crystal-bg .crystal-fallback-layer {
  transform: translateY(-7vh) scale(1);
  transform-origin: 50% 42%;
}

.crystal-orb-fallback {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(62vmin, 520px);
  height: min(62vmin, 520px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.crystal-orb-fallback .orb-core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(200, 180, 255, 0.55), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(148, 120, 255, 0.45), rgba(80, 60, 160, 0.12) 55%, transparent 70%);
  box-shadow:
    0 0 60px rgba(148, 120, 255, 0.35),
    0 0 120px rgba(110, 90, 220, 0.2),
    inset 0 0 40px rgba(255, 255, 255, 0.08);
  display: block;
}
.crystal-orb-fallback.is-light .orb-core {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.7), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(142, 184, 232, 0.55), rgba(120, 160, 210, 0.15) 55%, transparent 70%);
  box-shadow:
    0 0 60px rgba(142, 184, 232, 0.4),
    0 0 120px rgba(160, 190, 230, 0.25),
    inset 0 0 40px rgba(255, 255, 255, 0.2);
}
.crystal-orb-fallback .orb-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(180, 160, 255, 0.22);
  display: block;
  box-shadow: 0 0 24px rgba(148, 120, 255, 0.12);
}
.crystal-orb-fallback .orb-ring.r2 {
  inset: 0%;
  border-color: rgba(148, 120, 255, 0.12);
  opacity: 0.7;
}
.crystal-orb-fallback .orb-dust {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(220, 200, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 70% 25%, rgba(200, 180, 255, 0.75), transparent),
    radial-gradient(1.2px 1.2px at 40% 70%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.4px 1.4px at 80% 60%, rgba(170, 150, 255, 0.8), transparent),
    radial-gradient(1.2px 1.2px at 30% 80%, rgba(200, 190, 255, 0.65), transparent),
    radial-gradient(1.3px 1.3px at 55% 40%, rgba(255, 255, 255, 0.55), transparent);
  display: block;
  opacity: 0.85;
  animation: crystalOrbSpin 28s linear infinite;
}
.crystal-orb-fallback:not(.is-static) .orb-core {
  animation: crystalOrbPulse 4.5s ease-in-out infinite;
}
.crystal-orb-fallback:not(.is-static) .orb-ring.r1 {
  animation: crystalOrbSpin 40s linear infinite;
}
.crystal-orb-fallback:not(.is-static) .orb-ring.r2 {
  animation: crystalOrbSpin 55s linear infinite reverse;
}
.crystal-fallback-layer.is-paused .crystal-orb-fallback,
.crystal-orb-fallback.is-static {
  animation: none !important;
}
.crystal-fallback-layer.is-paused .orb-dust,
.crystal-fallback-layer.is-paused .orb-core,
.crystal-fallback-layer.is-paused .orb-ring,
.crystal-orb-fallback.is-static .orb-dust,
.crystal-orb-fallback.is-static .orb-core,
.crystal-orb-fallback.is-static .orb-ring {
  animation: none !important;
}

@keyframes crystalOrbSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes crystalOrbPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.92; }
}

/* Override styles.css RM hide — keep a static orb so hub is never blank */
@media (prefers-reduced-motion: reduce) {
  .crystal-bg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .crystal-bg.crystal-mode-static .crystal-orb-fallback .orb-dust,
  .crystal-bg.crystal-mode-static .crystal-orb-fallback .orb-core,
  .crystal-bg.crystal-mode-static .crystal-orb-fallback .orb-ring {
    animation: none !important;
  }
}

/* Preserve hubMobile4: lift fallback clear of project cards on mobile */
@media (max-width: 768px) {
  body.mobile.view-home .crystal-bg .crystal-fallback-layer {
    transform: translateY(-18vh) scale(0.92);
    transform-origin: 50% 35%;
  }
}