/* ============================================================================
 * cosmos.css — reusable "cosmos" background (gradient + animated blobs + stars)
 *
 * FAITHFUL 1:1 port of the ambient background from login.php.
 * Scoped under `.cosmos-root` so it does NOT depend on login.php globals.
 *
 * The starfield itself (nebula sprites + twinkling dots) is rendered by
 * cosmos.js on a Canvas2D element. This file styles:
 *   - the root container        (.cosmos-root)
 *   - the gradient base layers  (.cosmos-bg::before / ::after)
 *   - the animated blobs        (.cosmos-blob .cb1..4)
 *   - the particle canvas       (.cosmos-particles)
 *
 * NOT INCLUDED (intentionally — these belong to login.php, not the background):
 *   - the RMB lasso / selection WebGL overlay (#paintGL)
 *   - login error animations (constellation, pulse beam, devil hands, vignette)
 *   - the .tg-cosmos Telegram-auth loading spinner
 * ========================================================================== */

/* Root container the factory mounts into. The factory adds `.cosmos-root`
 * to the target and injects the layers below. The target must establish a
 * positioning + stacking context so the fixed/absolute children sit behind
 * the host page content. */
.cosmos-root {
  position: relative;
}

/* The background layer. Mirrors login.php's `.bg`:
 * fixed, full-viewport, sits behind everything, ignores pointer events. */
.cosmos-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050510;
}

/* Base radial gradient — login.php `.bg::before` (note inset:-25% to avoid
 * blur/scale edge bleed from the blobs). */
.cosmos-bg::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(ellipse 68% 68% at 50% 50%,
    #050510 28%,
    rgba(49, 46, 129, .10) 58%,
    rgba(79, 70, 229, .22) 82%,
    rgba(129, 140, 248, .28) 100%);
}

/* Top/bottom + center vignette darkening — login.php `.bg::after`. */
.cosmos-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(4, 4, 16, .82) 0%, transparent 19%),
    linear-gradient(to top,    rgba(4, 4, 16, .82) 0%, transparent 19%),
    radial-gradient(ellipse 58% 52% at 50% 50%,
      #040410 0%,
      rgba(4, 4, 16, .84) 34%,
      rgba(4, 4, 16, .30) 60%,
      transparent 78%);
}

/* Drifting colour blobs — login.php `.blob` + `.b1..b4`. */
.cosmos-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(95px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.cosmos-blob.cb1 {
  width: 60vw; height: 60vw; left: -22vw; top: -22vw;
  background: radial-gradient(circle, #312e81 0%, transparent 68%);
  opacity: .62; animation: cosmos-drift1 19s ease-in-out infinite;
}
.cosmos-blob.cb2 {
  width: 56vw; height: 56vw; right: -20vw; bottom: -22vw;
  background: radial-gradient(circle, #818cf8 0%, transparent 68%);
  opacity: .50; animation: cosmos-drift2 23s ease-in-out infinite;
}
.cosmos-blob.cb3 {
  width: 44vw; height: 44vw; right: -14vw; top: -16vw;
  background: radial-gradient(circle, #a5b4fc 0%, transparent 70%);
  opacity: .36; animation: cosmos-drift3 27s ease-in-out infinite;
}
.cosmos-blob.cb4 {
  width: 48vw; height: 48vw; left: -18vw; bottom: -18vw;
  background: radial-gradient(circle, #1e1b4b 0%, transparent 70%);
  opacity: .58; animation: cosmos-drift4 31s ease-in-out infinite;
}

@keyframes cosmos-drift1 { 0%,100% { transform: translate(0,0) scale(1); }            50% { transform: translate(7vw,5vw) scale(1.12); } }
@keyframes cosmos-drift2 { 0%,100% { transform: translate(0,0) scale(1); }            50% { transform: translate(-6vw,-5vw) scale(1.15); } }
@keyframes cosmos-drift3 { 0%,100% { transform: translate(0,0) scale(1); opacity:.34 } 50% { transform: translate(-5vw,6vw) scale(1.1); opacity:.50 } }
@keyframes cosmos-drift4 { 0%,100% { transform: translate(0,0) scale(1); opacity:.60 } 50% { transform: translate(6vw,-5vw) scale(1.12); opacity:.42 } }

/* The Canvas2D particle layer (nebula sprites + twinkling dots).
 * Mirrors login.php `#particles`. */
.cosmos-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  opacity: .75;
}

/* Pause CSS animations (blobs/gradient) when the host marks the background as
 * paused — e.g. tab hidden. Mirrors login.php `body.bg-paused`. */
.cosmos-root.cosmos-paused .cosmos-bg,
.cosmos-root.cosmos-paused .cosmos-blob {
  animation-play-state: paused;
}

/* Speed 0 ("freeze") — the time-scale knob (setSpeed) hit a dead stop.
 * cosmos.js freezes the blob drift on the compositor via Web-Animations
 * playbackRate = 0; this rule is the belt-and-suspenders fallback that also
 * covers the brief gap before the WAAPI handles resolve and browsers without
 * getAnimations(). The starfield canvas is frozen by the JS loop parking
 * itself, so only the CSS blob/gradient layers need pausing here. The class is
 * applied to the root ONLY while the rate is 0, so it never fights playbackRate
 * on a running field. */
.cosmos-root.cosmos-frozen .cosmos-bg,
.cosmos-root.cosmos-frozen .cosmos-blob {
  animation-play-state: paused;
}

/* Reduced motion: disable blob/gradient animations entirely.
 * (cosmos.js also skips the canvas render loop in this mode.) */
@media (prefers-reduced-motion: reduce) {
  .cosmos-blob,
  .cosmos-bg { animation: none !important; }
  .cosmos-blob { will-change: auto; }   /* frozen → release the promoted compositor layers (GPU memory) */
}

/* Coarse pointer (touch): hide the particle canvas and freeze the heavy blob
 * animations — preserves login.php's mobile-perf behaviour. The static
 * gradient + blobs still render, just without movement.
 * (cosmos.js also skips the canvas render loop in this mode.) */
@media (pointer: coarse) {
  .cosmos-particles { display: none !important; }
  .cosmos-blob,
  .cosmos-bg { animation: none !important; }
  .cosmos-blob { will-change: auto; }   /* frozen on touch → drop the 4 promoted blurred layers (GPU memory on low-end) */
}