/* ==========================================================================
   MJL Lounge — Ambient Gaming Background
   Decorative only: no layout, no interaction, theme-aware accent glow
   ========================================================================== */

:root,
[data-theme] {
  --ambient-tr: color-mix(in srgb, var(--accent) 10%, transparent);
  --ambient-bl: color-mix(in srgb, var(--accent) 6%, transparent);
  --ambient-streak: color-mix(in srgb, var(--accent) 5%, transparent);
  --ambient-line: color-mix(in srgb, var(--accent) 7%, transparent);
  --ambient-glass: rgba(255, 255, 255, 0.022);
}

/* Base depth + corner glows (edges only — keeps center readable) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      circle at top right,
      var(--ambient-tr) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at bottom left,
      var(--ambient-bl) 0%,
      transparent 45%
    ),
    radial-gradient(
      ellipse 55% 40% at 92% 18%,
      color-mix(in srgb, var(--accent) 4%, transparent) 0%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      var(--color-bg-deep) 0%,
      var(--color-bg-primary) 48%,
      var(--color-bg-deep) 100%
    );
}

/* Glass reflection — top canopy shine, fades before content zone */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      165deg,
      transparent 0%,
      color-mix(in srgb, var(--accent) 3%, transparent) 38%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      var(--ambient-glass) 0%,
      rgba(255, 255, 255, 0.006) 12%,
      transparent 28%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.012) 50%,
      transparent 100%
    );
  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.35) 22%,
    transparent 42%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.35) 22%,
    transparent 42%
  );
}

/* Curved light streaks + blurred accent lines (viewport edges) */
html::before {
  content: '';
  position: fixed;
  inset: -8%;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  filter: blur(120px);
  will-change: auto;
  background:
    /* Soft curved streak — upper right sweep */
    radial-gradient(
      ellipse 90% 45% at 88% 6%,
      var(--ambient-streak) 0%,
      transparent 68%
    ),
    /* Soft curved streak — lower left arc */
    radial-gradient(
      ellipse 70% 50% at 6% 94%,
      color-mix(in srgb, var(--accent) 4%, transparent) 0%,
      transparent 65%
    ),
    /* Mid-edge whisper streak */
    radial-gradient(
      ellipse 35% 80% at 100% 52%,
      color-mix(in srgb, var(--accent) 3%, transparent) 0%,
      transparent 58%
    );
}

/* Three blurred curved accent lines — kept at periphery */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  filter: blur(140px);
  transform: translateZ(0);
  background:
    linear-gradient(
      128deg,
      transparent 44%,
      var(--ambient-line) 50%,
      transparent 56%
    )
    78% -4% / 48vw 28vh no-repeat,
    linear-gradient(
      52deg,
      transparent 40%,
      color-mix(in srgb, var(--accent) 6%, transparent) 49%,
      transparent 58%
    )
    -6% 82% / 52vw 26vh no-repeat,
    linear-gradient(
      98deg,
      transparent 62%,
      color-mix(in srgb, var(--accent) 5%, transparent) 50%,
      transparent 38%
    )
    102% 44% / 36vw 55vh no-repeat;
}

@media (max-width: 768px) {
  html::after {
    opacity: 0.05;
    filter: blur(100px);
  }

  html::before {
    filter: blur(90px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  html::before,
  html::after {
    filter: none;
    opacity: 1;
  }

  html::after {
    opacity: 0.04;
  }
}

@media (prefers-contrast: more) {
  body::before,
  body::after,
  html::before,
  html::after {
    opacity: 0.5;
  }
}