/* ============================================================
   AI Engineers Academy — shared ATMOSPHERE
   A living background "stage" keyed to the active theme (data-dir).
   Drop a <div class="stage"></div> (or let Atmosphere.mount build it)
   and the layer follows the theme. Supports a course colour tint.
   ============================================================ */

/* The surface must let the stage show through */
html.atmo-host{background:var(--bg,#06070e)}
body.atmo-host{background:transparent}

.stage{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.stage .layer{position:absolute;inset:0;opacity:0;transition:opacity 1.1s cubic-bezier(.4,.14,.2,1);will-change:opacity}
.stage .layer.on{opacity:1}
.stage .scrim{position:absolute;inset:0;background:var(--atmo-scrim,transparent);transition:background .9s ease}

/* readability scrim for working surfaces */
.stage.subtle{--atmo-scrim:rgba(7,9,16,.62)}
.stage.veil{--atmo-scrim:rgba(7,9,16,.40)}

/* L · SPARK (terminal · dir a) */
.l-spark{background:
  radial-gradient(900px 620px at 80% -2%, rgba(82,232,159,.18), transparent 56%),
  radial-gradient(760px 560px at 12% 104%, rgba(82,232,159,.09), transparent 60%),
  radial-gradient(1100px 760px at 78% -5%, #0a1512, #05080a 62%)}
.l-spark::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(820px 520px at 80% 2%, rgba(82,232,159,.13), transparent 58%),
    linear-gradient(rgba(82,232,159,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(82,232,159,.05) 1px,transparent 1px);
  background-size:100% 100%,32px 32px,32px 32px;
  -webkit-mask:radial-gradient(125% 110% at 50% 0%,#000 48%,transparent 100%);
          mask:radial-gradient(125% 110% at 50% 0%,#000 48%,transparent 100%)}
.l-spark::after{content:"";position:absolute;left:0;right:0;height:34%;top:0;
  background:linear-gradient(transparent,rgba(82,232,159,.08),transparent);
  animation:atmoSweep 7s linear infinite}

/* L · CUBES (poleret terminal · dir d) */
.l-cubes{background:
  radial-gradient(880px 600px at 24% 10%, rgba(45,212,167,.20), transparent 56%),
  radial-gradient(760px 560px at 86% 92%, rgba(91,140,255,.13), transparent 60%),
  radial-gradient(1200px 820px at 22% 0%, #0e1622, #080b12 64%)}
.l-cubes::before{content:"";position:absolute;inset:-10%;opacity:.85;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%2382a0c0'%3E%3Ccircle cx='15' cy='15' r='1.4' fill-opacity='.34'/%3E%3Ccircle cx='45' cy='45' r='1.4' fill-opacity='.34'/%3E%3Ccircle cx='45' cy='15' r='1' fill-opacity='.18'/%3E%3Ccircle cx='15' cy='45' r='1' fill-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");
  background-size:60px 60px;animation:atmoDrift 90s linear infinite}
.l-cubes::after{content:"";position:absolute;inset:0;
  background:radial-gradient(640px 480px at 26% 16%, rgba(45,212,167,.18), transparent 60%);
  animation:atmoBreathe 9s ease-in-out infinite}

/* L · AURORA (poleret · dir b) */
.l-aurora{background:
  radial-gradient(900px 640px at 16% 10%, rgba(59,99,216,.34), transparent 56%),
  radial-gradient(840px 600px at 84% 26%, rgba(110,150,255,.30), transparent 56%),
  radial-gradient(820px 620px at 50% 110%, rgba(124,92,255,.28), transparent 60%),
  radial-gradient(1200px 820px at 50% 120%, #111c3a, #080d1c 62%)}
.l-aurora .blob{position:absolute;border-radius:50%;filter:blur(55px);opacity:.4;will-change:transform}
.l-aurora .b1{width:620px;height:620px;left:-8%;top:6%;background:radial-gradient(circle,#3b63d8,transparent 66%);animation:atmoFloatA 24s ease-in-out infinite}
.l-aurora .b2{width:560px;height:560px;right:-6%;top:30%;background:radial-gradient(circle,#5b8cff,transparent 66%);animation:atmoFloatB 30s ease-in-out infinite}
.l-aurora .b3{width:480px;height:480px;left:34%;bottom:-12%;background:radial-gradient(circle,#7c5cff,transparent 66%);animation:atmoFloatA 27s ease-in-out infinite reverse}

/* L · NEON (frontier · dir c) */
.l-neon{background:
  radial-gradient(900px 640px at 10% 4%, rgba(34,211,238,.34), transparent 54%),
  radial-gradient(880px 640px at 90% 12%, rgba(168,85,247,.34), transparent 54%),
  radial-gradient(1200px 520px at 50% 118%, rgba(34,211,238,.22), transparent 60%),
  radial-gradient(1200px 900px at 50% 8%, #0b0b20, #05060e 60%)}
.l-neon .blob{position:absolute;border-radius:50%;filter:blur(58px);opacity:.4;will-change:transform}
.l-neon .n1{width:640px;height:640px;left:-10%;top:-6%;background:radial-gradient(circle,#22d3ee,transparent 64%);animation:atmoFloatB 26s ease-in-out infinite}
.l-neon .n2{width:600px;height:600px;right:-12%;top:8%;background:radial-gradient(circle,#a855f7,transparent 64%);animation:atmoFloatA 32s ease-in-out infinite}
.l-neon .horizon{position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(transparent, rgba(34,211,238,.16) 60%, rgba(168,85,247,.22));
  -webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000)}
.l-neon .stars{position:absolute;inset:0}
.l-neon .stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#cfe6ff;opacity:.5;animation:atmoTwinkle 4s ease-in-out infinite}

/* L · TINT (course colour — sits above the active theme layer) */
.l-tint{z-index:1;background:
  radial-gradient(820px 560px at 16% 6%, color-mix(in srgb, var(--atmo-tint, #5b8cff) 40%, transparent), transparent 56%),
  radial-gradient(760px 560px at 86% 14%, color-mix(in srgb, var(--atmo-tint, #5b8cff) 32%, transparent), transparent 56%),
  radial-gradient(1100px 520px at 50% 116%, color-mix(in srgb, var(--atmo-tint, #5b8cff) 24%, transparent), transparent 60%);
  transition:opacity 1s cubic-bezier(.4,.14,.2,1), background .9s ease}

@keyframes atmoSweep{0%{transform:translateY(-120%)}100%{transform:translateY(420%)}}
@keyframes atmoDrift{to{background-position:60px 60px}}
@keyframes atmoBreathe{0%,100%{opacity:.45}50%{opacity:.95}}
@keyframes atmoFloatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-5%) scale(1.12)}}
@keyframes atmoFloatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,6%) scale(1.16)}}
@keyframes atmoTwinkle{0%,100%{opacity:.18}50%{opacity:.85}}

@media(prefers-reduced-motion:reduce){
  .stage .layer,.stage .layer *{animation:none!important}
  .stage .layer{transition:opacity .3s}
}
/* Calm mode — stop all ambient motion, keep the static atmosphere */
html[data-motion="rolig"] .stage .layer,
html[data-motion="rolig"] .stage .layer *{animation:none!important}
html[data-motion="rolig"] .stage.veil{--atmo-scrim:rgba(7,9,16,.5)}
html[data-motion="rolig"] .stage.subtle{--atmo-scrim:rgba(7,9,16,.7)}