/**
 * Ambient-Hintergrund (nur mit html.ambient-on — Glass + Dark).
 * Schichten: Base → animierte Orbs → Noise → Grid (statisch).
 */

#ambient-root {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

html.ambient-on #ambient-root {
  display: block;
}

/* ── 1) Base ───────────────────────────────────────── */
.ambient-bg__base {
  position: absolute;
  inset: 0;
  background-color: var(--t-bg, #08080d);
  z-index: 0;
}

html.ambient-on,
html.ambient-on body {
  background-color: var(--t-bg) !important;
  background-image: none !important;
}

/* ── 2) Weiche Orbs (radial, viele Stops → keine harten Kanten) ── */
.ambient-bg__orbs {
  position: absolute;
  inset: -12%;
  z-index: 1;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: left, top, width, height, opacity;
  transition:
    left var(--ambient-orb-duration, 14s) cubic-bezier(0.42, 0, 0.58, 1),
    top var(--ambient-orb-duration, 14s) cubic-bezier(0.42, 0, 0.58, 1),
    width var(--ambient-orb-duration, 14s) cubic-bezier(0.42, 0, 0.58, 1),
    height var(--ambient-orb-duration, 14s) cubic-bezier(0.42, 0, 0.58, 1),
    opacity var(--ambient-orb-duration, 14s) cubic-bezier(0.42, 0, 0.58, 1);
}

/* Kühles Blau — Hauptschimmer */
.ambient-orb--1 {
  left: 18%;
  top: 22%;
  width: 95vmax;
  height: 85vmax;
  opacity: 0.22;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    hsla(218, 32%, 28%, 0.42) 0%,
    hsla(220, 26%, 18%, 0.2) 22%,
    hsla(222, 20%, 12%, 0.08) 42%,
    hsla(225, 16%, 8%, 0.03) 58%,
    transparent 72%
  );
}

/* Tiefes Blau / Schatten */
.ambient-orb--2 {
  left: 88%;
  top: 78%;
  width: 110vmax;
  height: 95vmax;
  opacity: 0.35;
  background: radial-gradient(
    ellipse 48% 48% at 50% 50%,
    hsla(225, 22%, 6%, 0.55) 0%,
    hsla(222, 18%, 8%, 0.28) 26%,
    hsla(220, 14%, 9%, 0.1) 48%,
    transparent 68%
  );
}

/* Dezentes Petrol */
.ambient-orb--3 {
  left: 72%;
  top: 12%;
  width: 75vmax;
  height: 70vmax;
  opacity: 0.14;
  background: radial-gradient(
    ellipse 52% 52% at 50% 50%,
    hsla(198, 22%, 22%, 0.28) 0%,
    hsla(205, 18%, 14%, 0.12) 30%,
    hsla(210, 14%, 10%, 0.04) 52%,
    transparent 70%
  );
}

/* Anthrazit / neutraler Aufheller */
.ambient-orb--4 {
  left: 42%;
  top: 55%;
  width: 88vmax;
  height: 80vmax;
  opacity: 0.12;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    hsla(220, 12%, 24%, 0.22) 0%,
    hsla(218, 10%, 14%, 0.09) 35%,
    hsla(215, 8%, 10%, 0.03) 55%,
    transparent 72%
  );
}

@media (prefers-reduced-motion: reduce) {
  .ambient-orb {
    transition: none !important;
  }
}

/* ── 3) Monochromes Noise (Banding) ─────────────────── */
.ambient-bg__noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.032;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' fill='%23fff'/%3E%3C/svg%3E");
  background-size: min(28vw, 16em) min(28vw, 16em);
}

/* ── 4) Statisches Grid ─────────────────────────────── */
.ambient-bg__grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) min(0.08em, 0.25vw), transparent min(0.08em, 0.25vw)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) min(0.08em, 0.25vw), transparent min(0.08em, 0.25vw));
  background-size: min(12vw, 3.5em) min(12vw, 3.5em);
  background-position: center center;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 0%, transparent 78%);
}

/* Vordergrund über Ambient */
#app {
  position: relative;
  z-index: 1;
}