/* ═══════════════════════════════════════════════
   AMBIENT — Premium Scene V2
   Full-screen cinematic background for welcome/auth
   ═══════════════════════════════════════════════ */

.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;

  --amb-mx: 0;
  --amb-my: 0;

  --amb-bg-0: #f9fbff;
  --amb-bg-1: #eff3ff;
  --amb-bg-2: #e6edff;

  --amb-warm: rgba(255, 136, 168, 0.34);
  --amb-cool: rgba(116, 148, 255, 0.34);
  --amb-cyan: rgba(110, 224, 255, 0.2);
  --amb-ground: rgba(168, 192, 245, 0.3);

  --amb-ribbon-warm: rgba(255, 146, 176, 0.42);
  --amb-ribbon-cool: rgba(112, 146, 255, 0.42);
  --amb-ribbon-shared: rgba(140, 180, 255, 0.3);

  --amb-vignette: rgba(24, 34, 58, 0.2);
  --amb-grain: rgba(71, 95, 150, 0.05);

  --amb-dot-main: rgba(64, 88, 138, 0.12);
  --amb-dot-soft: rgba(64, 88, 138, 0.07);
  --amb-line-main: rgba(78, 102, 162, 0.11);
  --amb-line-soft: rgba(78, 102, 162, 0.06);

  background:
    radial-gradient(130% 84% at 50% 120%, var(--amb-ground), transparent 62%),
    radial-gradient(92% 88% at 10% 8%, var(--amb-warm), transparent 72%),
    radial-gradient(88% 84% at 92% 12%, var(--amb-cool), transparent 74%),
    radial-gradient(76% 68% at 50% -12%, var(--amb-cyan), transparent 72%),
    linear-gradient(162deg, var(--amb-bg-0) 0%, var(--amb-bg-1) 50%, var(--amb-bg-2) 100%);

  transition:
    background 520ms var(--ease-out),
    filter 520ms var(--ease-out);
}

body[data-route="welcome"] .cosmos {
  filter: saturate(1.1) contrast(1.05);
}

body:not([data-route="welcome"]) .cosmos {
  --amb-warm: rgba(255, 150, 180, 0.24);
  --amb-cool: rgba(122, 154, 255, 0.24);
  --amb-cyan: rgba(126, 228, 255, 0.14);
  --amb-ground: rgba(160, 182, 230, 0.2);

  --amb-ribbon-warm: rgba(255, 146, 176, 0.3);
  --amb-ribbon-cool: rgba(112, 146, 255, 0.3);
  --amb-ribbon-shared: rgba(140, 180, 255, 0.24);

  --amb-vignette: rgba(24, 34, 58, 0.14);
  --amb-grain: rgba(71, 95, 150, 0.04);
  --amb-dot-main: rgba(64, 88, 138, 0.09);
  --amb-dot-soft: rgba(64, 88, 138, 0.055);
  --amb-line-main: rgba(78, 102, 162, 0.08);
  --amb-line-soft: rgba(78, 102, 162, 0.045);
}

.cosmos::before,
.cosmos::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.cosmos::before {
  inset: -22% -18%;
  background:
    radial-gradient(56% 42% at 14% 26%, var(--amb-ribbon-warm), transparent 72%),
    radial-gradient(56% 42% at 84% 20%, var(--amb-ribbon-cool), transparent 74%),
    radial-gradient(68% 52% at 52% 82%, var(--amb-ribbon-shared), transparent 78%);
  filter: blur(20px) saturate(1.18);
  opacity: 0.9;
  transform: translate3d(calc(var(--amb-mx) * -24px), calc(var(--amb-my) * -18px), 0);
  animation: ambRibbonDrift 24s var(--ease-in-out) infinite alternate;
}

.cosmos::after {
  inset: 0;
  background:
    radial-gradient(140% 108% at 50% -12%, color-mix(in oklab, #fff 48%, transparent), transparent 58%),
    radial-gradient(136% 110% at 50% 118%, var(--amb-vignette), transparent 62%),
    repeating-radial-gradient(circle at 0 0, var(--amb-grain) 0 1px, transparent 1px 3px);
  opacity: 0.76;
}

.stars {
  position: absolute;
  inset: 0;
}

.stars::before,
.stars::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.stars::before {
  inset: -26% -18% auto;
  height: 56%;
  background:
    linear-gradient(180deg, color-mix(in oklab, #fff 38%, transparent), transparent 76%),
    repeating-linear-gradient(
      118deg,
      transparent 0 34px,
      color-mix(in oklab, #fff 8%, transparent) 34px 35px
    );
  opacity: 0.34;
  transform: translate3d(calc(var(--amb-mx) * -9px), calc(var(--amb-my) * -6px), 0);
}

.stars::after {
  left: 12%;
  right: 12%;
  top: 24%;
  bottom: 14%;
  border-radius: 42px;
  background:
    radial-gradient(66% 54% at 50% 46%, color-mix(in oklab, #fff 24%, transparent), transparent 72%),
    radial-gradient(80% 62% at 50% 110%, color-mix(in oklab, #fff 16%, transparent), transparent 76%);
  opacity: 0.44;
  filter: blur(0.4px);
  transform: translate3d(calc(var(--amb-mx) * 10px), calc(var(--amb-my) * 8px), 0);
}

.stars-layer {
  position: absolute;
  inset: 0;
}

.stars-sm {
  background-image:
    radial-gradient(var(--amb-dot-main) 0.95px, transparent 0.95px),
    radial-gradient(var(--amb-dot-soft) 1.15px, transparent 1.15px);
  background-size: 13px 13px, 24px 24px;
  background-position: 0 0, 7px 9px;
  opacity: 0.52;
  transform: translate3d(calc(var(--amb-mx) * 6px), calc(var(--amb-my) * 4px), 0);
  animation: ambNoiseFlow 30s linear infinite;
}

.stars-md {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0 48px,
      var(--amb-line-soft) 48px 49px
    ),
    repeating-linear-gradient(
      120deg,
      transparent 0 116px,
      var(--amb-line-main) 116px 117px
    ),
    repeating-linear-gradient(
      60deg,
      transparent 0 116px,
      var(--amb-line-main) 116px 117px
    );
  opacity: 0.5;
  transform: translate3d(calc(var(--amb-mx) * 12px), calc(var(--amb-my) * 9px), 0);
  animation: ambMeshFlow 26s linear infinite;
}

.stars-lg {
  background-image:
    radial-gradient(ellipse 122% 88% at 50% 52%, transparent 40%, color-mix(in oklab, var(--amb-vignette) 84%, transparent) 100%),
    linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--amb-vignette) 66%, transparent) 100%);
  opacity: 0.82;
}

[data-theme="dark"] .cosmos {
  --amb-bg-0: #060c1a;
  --amb-bg-1: #071123;
  --amb-bg-2: #050b18;

  --amb-warm: rgba(255, 92, 142, 0.34);
  --amb-cool: rgba(78, 116, 255, 0.46);
  --amb-cyan: rgba(52, 206, 255, 0.26);
  --amb-ground: rgba(32, 54, 98, 0.42);

  --amb-ribbon-warm: rgba(255, 98, 146, 0.4);
  --amb-ribbon-cool: rgba(88, 124, 255, 0.5);
  --amb-ribbon-shared: rgba(116, 162, 255, 0.34);

  --amb-vignette: rgba(3, 6, 14, 0.66);
  --amb-grain: rgba(198, 214, 255, 0.065);

  --amb-dot-main: rgba(200, 217, 255, 0.22);
  --amb-dot-soft: rgba(200, 217, 255, 0.14);
  --amb-line-main: rgba(170, 194, 255, 0.16);
  --amb-line-soft: rgba(170, 194, 255, 0.09);

  filter: saturate(1.14) contrast(1.08);
}

[data-theme="dark"] .cosmos::after {
  opacity: 0.88;
}

[data-theme="dark"] .stars::before,
[data-theme="dark"] .stars::after {
  opacity: 0.22;
}

@keyframes ambNoiseFlow {
  from {
    background-position: 0 0, 7px 9px;
  }
  to {
    background-position: 92px 58px, 62px 96px;
  }
}

@keyframes ambMeshFlow {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 56px, 84px 146px, -86px 120px;
  }
}

@keyframes ambRibbonDrift {
  from {
    transform: translate3d(calc(var(--amb-mx) * -24px), calc(var(--amb-my) * -18px), 0) scale(1);
  }
  to {
    transform: translate3d(calc(var(--amb-mx) * -10px), calc(var(--amb-my) * -8px), 0) scale(1.04);
  }
}

@media (max-width: 980px) {
  .cosmos::before {
    inset: -24% -24%;
    opacity: 0.84;
  }

  .stars::after {
    left: 8%;
    right: 8%;
    top: 20%;
  }
}

@media (max-width: 640px) {
  .cosmos::before {
    inset: -36% -34%;
    filter: blur(24px) saturate(1.1);
    opacity: 0.78;
  }

  .stars::before {
    inset: -22% -14% auto;
    height: 52%;
    opacity: 0.26;
  }

  .stars-md {
    opacity: 0.42;
  }

  .stars-lg {
    opacity: 0.74;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cosmos::before,
  .stars-sm,
  .stars-md {
    animation: none !important;
  }

  .cosmos,
  .cosmos::before,
  .cosmos::after,
  .stars,
  .stars::before,
  .stars::after,
  .stars-layer {
    transition: none !important;
    transform: none !important;
  }
}

/* ═══════ AMBIENT TUNE V3 (WELCOME CLEAN) ═══════ */
body[data-route="welcome"] .cosmos {
  filter: saturate(1.06) contrast(1.02);
}

body[data-route="welcome"] .cosmos::before {
  inset: -30% -24%;
  opacity: 0.68;
  filter: blur(28px) saturate(1.08);
}

body[data-route="welcome"] .cosmos::after {
  opacity: 0.68;
}

body[data-route="welcome"] .stars::before {
  inset: -20% -12% auto;
  height: 48%;
  background:
    linear-gradient(180deg, color-mix(in oklab, #fff 30%, transparent), transparent 78%),
    repeating-linear-gradient(
      118deg,
      transparent 0 44px,
      color-mix(in oklab, #fff 5%, transparent) 44px 45px
    );
  opacity: 0.2;
}

body[data-route="welcome"] .stars::after {
  left: 16%;
  right: 16%;
  top: 20%;
  bottom: 18%;
  opacity: 0.32;
}

body[data-route="welcome"] .stars-sm {
  opacity: 0.34;
}

body[data-route="welcome"] .stars-md {
  opacity: 0.2;
}

body[data-route="welcome"] .stars-lg {
  opacity: 0.7;
}

body[data-route="welcome"][data-theme="dark"] .cosmos {
  filter: saturate(1.1) contrast(1.04);
}

body[data-route="welcome"][data-theme="dark"] .stars-sm {
  opacity: 0.3;
}

body[data-route="welcome"][data-theme="dark"] .stars-md {
  opacity: 0.16;
}

/* ═══════ AMBIENT TUNE V4 — PREMIUM DEPTH ═══════ */
body[data-route="welcome"] .cosmos {
  --amb-stage-left: color-mix(in oklab, var(--amb-ribbon-warm) 72%, transparent);
  --amb-stage-right: color-mix(in oklab, var(--amb-ribbon-cool) 72%, transparent);
}

body[data-route="welcome"] .cosmos::before {
  background:
    radial-gradient(54% 42% at 18% 22%, var(--amb-stage-left), transparent 72%),
    radial-gradient(54% 42% at 82% 18%, var(--amb-stage-right), transparent 74%),
    radial-gradient(62% 44% at 50% 84%, var(--amb-ribbon-shared), transparent 78%);
}

body[data-route="welcome"] .stars::after {
  background:
    radial-gradient(62% 50% at 50% 44%, color-mix(in oklab, #fff 20%, transparent), transparent 72%),
    radial-gradient(86% 64% at 50% 110%, color-mix(in oklab, #fff 16%, transparent), transparent 76%);
}

body[data-route="welcome"][data-theme="light"] .cosmos {
  --amb-bg-0: #f8fbff;
  --amb-bg-1: #eef4ff;
  --amb-bg-2: #e7efff;
  filter: saturate(1.04) contrast(1.01);
}

body[data-route="welcome"][data-theme="light"] .cosmos::before {
  opacity: 0.56;
}

body[data-route="welcome"][data-theme="light"] .stars-sm {
  opacity: 0.28;
}

body[data-route="welcome"][data-theme="light"] .stars-md {
  opacity: 0.14;
}

/* ═══════ AMBIENT TUNE V5 — SOFT HORIZON ═══════ */
body[data-route="welcome"] .cosmos {
  --amb-ground: rgba(146, 170, 226, 0.22);
}

body[data-route="welcome"][data-theme="dark"] .cosmos {
  --amb-ground: rgba(24, 40, 76, 0.3);
  --amb-vignette: rgba(4, 7, 16, 0.58);
}

body[data-route="welcome"][data-theme="dark"] .stars-lg {
  opacity: 0.64;
}