/*
 * L24 Ambient Background
 * Shared fixed liquid-glass backdrop for the public suite and app shells.
 * It is intentionally CSS-only: no extra JS, no canvas, no external assets.
 */

:root {
  --l24-ambient-bg: #0e0a14;
  --l24-ambient-bg-2: #140e1e;
  --l24-ambient-panel: rgba(26, 19, 38, 0.74);
  --l24-ambient-ink: #ece7f2;
  --l24-ambient-muted: rgba(236, 231, 245, 0.62);
  --l24-ambient-gold: #e8b84a;
  --l24-ambient-copper: #e0823c;
  --l24-ambient-lavender: #b58cff;
}

body.l24-ambient-enabled {
  min-height: 100vh;
  background: var(--l24-ambient-bg);
}

body.l24-ambient-enabled > #root,
body.l24-ambient-enabled > #overlay-root {
  position: relative;
  z-index: 1;
}

.l24-ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(181, 140, 255, 0.22), transparent 31rem),
    radial-gradient(circle at 80% 12%, rgba(232, 184, 74, 0.16), transparent 30rem),
    radial-gradient(circle at 58% 92%, rgba(224, 130, 60, 0.12), transparent 34rem),
    linear-gradient(135deg, rgba(14, 10, 20, 0.99), rgba(20, 14, 30, 0.96) 52%, rgba(14, 10, 20, 0.99));
  transform: translateZ(0);
}

.l24-ambient-bg::before,
.l24-ambient-bg::after {
  position: absolute;
  inset: -16vh -14vw;
  content: "";
  transform: translateZ(0);
  will-change: transform, opacity, background-position;
}

.l24-ambient-bg::before {
  background:
    conic-gradient(from 142deg at 42% 42%,
      rgba(255, 255, 255, 0.10),
      rgba(181, 140, 255, 0.18),
      rgba(232, 184, 74, 0.14),
      rgba(224, 130, 60, 0.10),
      rgba(255, 255, 255, 0.08),
      rgba(181, 140, 255, 0.18)),
    radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.13), transparent 22rem),
    radial-gradient(circle at 70% 64%, rgba(181, 140, 255, 0.16), transparent 27rem);
  filter: blur(34px) saturate(138%);
  opacity: 0.84;
  animation: l24AmbientDrift 18s ease-in-out infinite alternate;
}

.l24-ambient-bg::after {
  background:
    linear-gradient(108deg, transparent 0%, rgba(255, 255, 255, 0.18) 44%, transparent 72%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 11px);
  mix-blend-mode: soft-light;
  opacity: 0.44;
  animation: l24AmbientSweep 12s ease-in-out infinite;
}

body.l24-ambient-enabled::before,
body.l24-ambient-enabled::after {
  display: none;
}

body.l24-ambient-enabled .orbital-bg {
  display: none !important;
}

body.l24-ambient-enabled .app--web {
  background: transparent !important;
}

body.l24-ambient-app {
  color: var(--l24-ambient-ink);
}

body.l24-ambient-app :is(.card, .panel, .modal-sheet__surface, .screen-header, .web-hero-panel, .nodo-web-side-card, .nodo-web-cta-panel, .web-side-panel, .workspace-action-card, .workspace-metric-card) {
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

body.l24-ambient-marketing :is(section, footer, main > div)[class*="bg-white"],
body.l24-ambient-marketing :is(section, footer, main > div)[class*="bg-[#f5f5f5]"],
body.l24-ambient-marketing :is(section, footer, main > div)[class*="bg-[#F5F5F5]"] {
  background-color: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
}

html[data-suite-theme="dark"] body.l24-ambient-marketing :is(section, footer, main > div)[class*="bg-white"],
html[data-suite-theme="dark"] body.l24-ambient-marketing :is(section, footer, main > div)[class*="bg-[#f5f5f5]"],
html[data-suite-theme="dark"] body.l24-ambient-marketing :is(section, footer, main > div)[class*="bg-[#F5F5F5]"] {
  background-color: rgba(14, 10, 20, 0.72) !important;
}

@keyframes l24AmbientDrift {
  0% {
    transform: translate3d(-2vw, -1vh, 0) rotate(-2deg) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translate3d(2vw, 1vh, 0) rotate(2deg) scale(1.04);
    opacity: 0.90;
  }
  100% {
    transform: translate3d(4vw, -2vh, 0) rotate(4deg) scale(1.02);
    opacity: 0.80;
  }
}

@keyframes l24AmbientSweep {
  0% {
    transform: translate3d(-10vw, -2vh, 0) rotate(-3deg);
    opacity: 0.36;
  }
  50% {
    transform: translate3d(5vw, 2vh, 0) rotate(2deg);
    opacity: 0.50;
  }
  100% {
    transform: translate3d(12vw, -1vh, 0) rotate(4deg);
    opacity: 0.40;
  }
}

@media (max-width: 720px) {
  .l24-ambient-bg::before {
    filter: blur(24px) saturate(132%);
    opacity: 0.78;
  }

  .l24-ambient-bg::after {
    opacity: 0.34;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l24-ambient-bg::before,
  .l24-ambient-bg::after {
    animation: none;
  }
}