/* assets/shader-hero.css */

/* Make sure hero can host an absolute canvas */
.hero.hero--fullscreen{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
}

/* Cloud background layer */
.shader-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/*
  Always-on CSS cloud drift (so the hero never looks "dead" even if WebGL fails,
  JS is blocked, or the shader can't compile on a device).
*/
.shader-bg{
  background: radial-gradient(1200px 700px at 30% 40%, rgba(221,255,248,.55), rgba(221,255,248,0) 60%),
              radial-gradient(1000px 600px at 75% 55%, rgba(221,221,255,.55), rgba(221,221,255,0) 62%),
              radial-gradient(900px 520px at 55% 20%, rgba(255,221,249,.35), rgba(255,221,249,0) 60%),
              linear-gradient(120deg, rgba(230,245,255,.65), rgba(235,225,255,.65));
  background-size: 140% 140%;
  animation: axCloudDrift 18s ease-in-out infinite alternate;
}

.shader-bg::before,
.shader-bg::after{
  content:"";
  position:absolute;
  inset:-15%;
  background:
    radial-gradient(900px 520px at 20% 35%, rgba(180,240,255,.28), rgba(180,240,255,0) 60%),
    radial-gradient(820px 480px at 80% 35%, rgba(200,180,255,.26), rgba(200,180,255,0) 60%),
    radial-gradient(760px 420px at 55% 75%, rgba(255,190,235,.20), rgba(255,190,235,0) 60%);
  filter: blur(24px);
  transform: translate3d(0,0,0);
  opacity: .85;
  z-index: 0;
}

.shader-bg::before{ animation: axCloudLayer1 22s ease-in-out infinite alternate; }
.shader-bg::after { animation: axCloudLayer2 28s ease-in-out infinite alternate; opacity:.55; }

@keyframes axCloudDrift{
  0%{ background-position: 30% 40%; }
  100%{ background-position: 70% 60%; }
}
@keyframes axCloudLayer1{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1.02); }
  100%{ transform: translate3d(3%, 2%, 0) scale(1.05); }
}
@keyframes axCloudLayer2{
  0%{ transform: translate3d(2%, 2%, 0) scale(1.06); }
  100%{ transform: translate3d(-3%, -1%, 0) scale(1.08); }
}

/* IMPORTANT: canvas must be sized by CSS AND positioned */
#ax-shader-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Keep WebGL as the base, but allow the CSS cloud layers to be visible too */
  opacity: .55;
  z-index: 1;
}

/* Ensure hero content is above */
.hero .container,
.hero-grid{
  position: relative;
  z-index: 2;
}

/* Soft readability veil */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(255,255,255,.60), rgba(255,255,255,0) 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 65%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
}