/* The cosmos: the painted deep-space background behind Spencer AI.
   Used by the home page hero and by /ai (the free sign-up and the coach itself), so
   anyone who clicks through from the banner lands in the same sky they just left.

   Four layers, back to front: a painted deep-space wash (nebulae laid on like oil, with
   a grain over them), a canvas carrying the starfield and its shooting stars (drawn
   by /assets/js/cosmos.js), and a handful of worlds
   drifting in their own bubbles — the multiverse. Content sits on top. Everything moves
   slowly, and nothing moves at all for anyone who has asked their system for less motion.

   Markup:
     <div class="cosmos-paint" aria-hidden="true"></div>
     <canvas class="cosmos-canvas" aria-hidden="true"></canvas>
     <div class="cosmos-worlds" aria-hidden="true">
       <span class="world w1"></span><span class="world w2"></span>
       <span class="world w3"></span><span class="world w4"></span>
     </div>
   inside either a `.cosmos` section (the layers fill it) or a `.cosmos-sky` element
   (the layers fill the viewport and stay put behind the whole page). */

.cosmos,
.cosmos-sky{
  overflow:hidden;isolation:isolate;
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(123,63,210,0.42), transparent 70%),
    radial-gradient(55% 45% at 84% 30%, rgba(24,170,160,0.26), transparent 70%),
    radial-gradient(70% 55% at 70% 92%, rgba(214,72,150,0.24), transparent 72%),
    radial-gradient(50% 40% at 12% 88%, rgba(40,90,220,0.28), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, #120E24 0%, #07070D 70%);
}
.cosmos{position:relative;}
/* Behind the whole page: fixed to the viewport, under every bit of content. */
.cosmos-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;}

.cosmos-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;}

/* The brushwork. An SVG turbulence field, blended over the nebulae so the colour reads
   as pigment rather than a CSS gradient, plus two slow-turning swirls of paint. */
.cosmos-paint{
  position:absolute;inset:-10%;z-index:0;pointer-events:none;opacity:0.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.7 0 0 0 0 1 0 0 0 1.1 -0.2'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:600px 600px;
}
.cosmos-paint::before,.cosmos-paint::after{
  content:"";position:absolute;border-radius:50%;filter:blur(40px);mix-blend-mode:screen;
  animation:cosmos-swirl 60s linear infinite;
}
.cosmos-paint::before{
  width:55vmax;height:55vmax;left:-12%;top:-18%;
  background:conic-gradient(from 20deg, transparent, rgba(150,80,255,0.55), transparent 35%, rgba(60,220,190,0.4), transparent 70%);
}
.cosmos-paint::after{
  width:48vmax;height:48vmax;right:-14%;bottom:-22%;animation-direction:reverse;animation-duration:80s;
  background:conic-gradient(from 200deg, transparent, rgba(240,90,170,0.45), transparent 40%, rgba(201,168,76,0.4), transparent 75%);
}
@keyframes cosmos-swirl{to{transform:rotate(360deg);}}

/* The multiverse: other worlds, each painted in its own light, each in its own bubble. */
.cosmos-worlds{position:absolute;inset:0;z-index:1;pointer-events:none;}
.world{position:absolute;border-radius:50%;animation:cosmos-drift 22s ease-in-out infinite;}
.world::after{ /* the bubble each world sits inside */
  content:"";position:absolute;inset:-26%;border-radius:50%;
  border:1px solid rgba(180,220,255,0.14);
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.08), transparent 45%);
  box-shadow:inset 0 0 40px rgba(120,180,255,0.08);
}
.w1{
  width:120px;height:120px;left:7%;top:16%;
  background:radial-gradient(circle at 32% 30%, #F4D98C, #C9A84C 30%, #7A4A1E 62%, #1B0E08 100%);
  box-shadow:0 0 60px -6px rgba(201,168,76,0.55);
}
.w2{
  width:74px;height:74px;right:9%;top:13%;animation-delay:-6s;animation-duration:26s;
  background:radial-gradient(circle at 30% 30%, #B6FFE9, #2FBFA2 35%, #0F4E5C 70%, #04161C 100%);
  box-shadow:0 0 50px -6px rgba(60,220,190,0.55);
}
.w3{
  width:150px;height:150px;right:5%;bottom:12%;animation-delay:-11s;animation-duration:30s;
  background:
    radial-gradient(ellipse 60% 18% at 50% 40%, rgba(255,255,255,0.22), transparent 70%),
    radial-gradient(circle at 34% 30%, #FFC4E6, #C24C9A 34%, #4B1A63 68%, #12061C 100%);
  box-shadow:0 0 70px -8px rgba(214,72,150,0.5);
}
.w3::before{ /* a ring */
  content:"";position:absolute;left:-30%;right:-30%;top:44%;height:14%;border-radius:50%;
  border:2px solid rgba(255,210,240,0.45);transform:rotate(-16deg);
}
.w4{
  width:56px;height:56px;left:11%;bottom:18%;animation-delay:-3s;animation-duration:19s;
  background:radial-gradient(circle at 30% 30%, #CFE0FF, #5A7BEA 38%, #1E2A7A 72%, #070A22 100%);
  box-shadow:0 0 44px -6px rgba(90,123,234,0.6);
}
@keyframes cosmos-drift{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-18px,0) rotate(4deg);}
}
@media (max-width:760px){
  .w1{width:70px;height:70px;left:-4%;top:9%;}
  .w2{width:46px;height:46px;right:4%;top:7%;}
  .w3{width:90px;height:90px;right:-8%;bottom:6%;}
  .w4{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .cosmos-paint::before,.cosmos-paint::after,.world{animation:none;}
}
/* A sky behind working screens (the admin page): the same picture, held still, so tables
   scroll smoothly instead of sharing every frame with the paint and the drifting worlds. */
.still .cosmos-paint::before,.still .cosmos-paint::after,.still .world{animation:none;}
/* The admin sky: the same paint and stars as a fixed picture, with no canvas and no
   script behind it. The starfield is a tiled image (/assets/images/stars.svg) rather
   than cosmos.js's animation loop, so working screens never spend a frame on it. */
.cosmos-sky.static .cosmos-paint::before,.cosmos-sky.static .cosmos-paint::after,.cosmos-sky.static .world{animation:none;}
.cosmos-sky.static::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/images/stars.svg") 0 0/640px 640px repeat;
}
/* Anyone who has asked for less motion gets none anywhere the cosmos is used. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}