:root{
  /* Faster so it clearly moves on all devices */
  --ax-cloud-speed: 10s;
}

/*
  Cloud motion helper.
  Kept separate because some deployments were missing motion when this file
  was absent (caching / partial uploads).
*/

.shader-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.shader-bg::before{
  content: "";
  position: absolute;
  /* Oversize the layer so translation/rotation never shows edges */
  inset: -25%;
  background:
    radial-gradient(60% 50% at 20% 30%, rgba(125,240,255,0.22), transparent 60%),
    radial-gradient(55% 45% at 70% 25%, rgba(155,120,255,0.22), transparent 60%),
    radial-gradient(55% 55% at 60% 75%, rgba(255,155,235,0.18), transparent 60%);
  /* More cloud-like and visible motion */
  filter: blur(48px) saturate(1.15);
  opacity: .95;
  transform: translate3d(0,0,0);
  animation: axCloudBgShift var(--ax-cloud-speed) ease-in-out infinite;
}

/* Subtle grain that also drifts, makes motion obvious even when the WebGL
   canvas is static or fails to render. */
.shader-bg::after{
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(40% 35% at 30% 30%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(45% 40% at 70% 60%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(35% 30% at 55% 20%, rgba(255,255,255,0.05), transparent 60%);
  filter: blur(60px);
  opacity: .55;
  mix-blend-mode: overlay;
  animation: axCloudBgDrift calc(var(--ax-cloud-speed) * 1.6) linear infinite;
}

.shader-bg canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Let the CSS cloud layers show through even if WebGL is static */
  opacity: .75;
}

@keyframes axCloudBgShift{
  0%   { transform: translate3d(-12%, -8%, 0) scale(1.10) rotate(-2.0deg); filter: blur(70px) saturate(1.20) hue-rotate(-8deg); }
  50%  { transform: translate3d( 4%,   8%, 0) scale(1.13) rotate(1.6deg);  filter: blur(70px) saturate(1.25) hue-rotate(6deg); }
  100% { transform: translate3d( 14%, -10%, 0) scale(1.11) rotate(-1.0deg); filter: blur(70px) saturate(1.20) hue-rotate(-4deg); }
}

@keyframes axCloudBgDrift{
  0%   { transform: translate3d(-3%, 0%, 0) rotate(0deg); }
  100% { transform: translate3d( 3%, -2%, 0) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce){
  .shader-bg::before,
  .shader-bg::after{ animation: none; }
}