/* Dunkle Zone mit lebendem Verlauf (Grainy Gradient als Motion Graphic): drei Mint-Flächen und ein
   weißes Licht, das langsam kreist. Körnung und eine leichte Abdunklung liegen darüber. Trägt
   Karte, Menüleiste, Startseite und den Social-Raum. Aufbau: <span class="wave"> mit vier <i>
   (js/components/wave.js). Größe und Weichheit setzt die Fläche über --wave-size und --wave-blur,
   die Rundung über --zone-radius. */

/* Lage ohne Gewicht (:where), damit Karte (sticky) und Menü (fixed) ihre Lage behalten */
:where(.dark-zone) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.dark-zone {
  --wave-size: 120%;
  --wave-blur: 34px;
  background: var(--mint-ground);
  color: var(--color-on-dark);
  /* clip-path schneidet auch weichgezeichnete Flächen sauber an der Rundung ab */
  clip-path: inset(0 round var(--zone-radius, 0));
}

/* Abdunklung und Körnung über den Flächen, unter dem Inhalt */
.dark-zone::before,
.dark-zone::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: '';
  pointer-events: none;
}

.dark-zone::before {
  background: var(--mint-deep);
  opacity: var(--flow-scrim);
}

.dark-zone::after {
  background-image: var(--grain-image);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

:where(.dark-zone > :not(.wave)) {
  position: relative;
  z-index: 2;
}

.wave {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.wave i {
  position: absolute;
  width: var(--wave-size);
  aspect-ratio: 1;
  border-radius: 46% 54% 58% 42% / 44% 46% 54% 56%;
  filter: blur(var(--wave-blur));
  opacity: var(--flow-opacity);
  will-change: transform;
}

.wave i:nth-child(1) {
  top: -40%;
  left: -40%;
  background: var(--mint);
  animation: flow-a 11s ease-in-out infinite alternate;
}

.wave i:nth-child(2) {
  top: 30%;
  left: 20%;
  background: var(--mint-light);
  animation: flow-b 14s ease-in-out infinite alternate;
}

.wave i:nth-child(3) {
  top: 50%;
  left: -50%;
  background: color-mix(in srgb, var(--mint-deep) 60%, var(--mint));
  animation: flow-c 17s ease-in-out infinite alternate;
}

/* Weißes Licht, das langsam kreist */
.wave i:nth-child(4) {
  top: -10%;
  left: 40%;
  width: calc(var(--wave-size) * 0.55);
  background: var(--mint-white);
  opacity: var(--flow-light-opacity);
  animation: flow-light 19s linear infinite;
}

@keyframes flow-a {
  to {
    transform: translate(38%, 18%) rotate(140deg) scale(1.15);
  }
}

@keyframes flow-b {
  to {
    transform: translate(-45%, -30%) rotate(-120deg) scale(0.9);
  }
}

@keyframes flow-c {
  to {
    transform: translate(50%, -35%) rotate(90deg) scale(1.2);
  }
}

@keyframes flow-light {
  from {
    transform: rotate(0deg) translateX(35%) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(35%) rotate(-360deg);
  }
}

/* Getönter Verlauf: Flächen mit .tinted nehmen einen Farbton auf (--tint, per JavaScript gesetzt,
   zum Beispiel die Farbe eines Kunden oder Fotos) und gleiten weich dorthin */
@property --tint {
  syntax: '<color>';
  inherits: true;
  initial-value: #9fd6b4;
}

.tinted {
  transition: --tint 1.6s var(--ease-in-out);
}

.tinted .wave i:nth-child(1) {
  background: color-mix(in srgb, var(--tint) 55%, var(--mint));
}

.tinted .wave i:nth-child(2) {
  background: var(--tint);
}

/* Dünne helle Schrift bleibt lesbar, auch wenn das Licht dahinter durchzieht */
.dark-zone :is(p, a, button, span, li) {
  text-shadow: var(--halo-on-dark);
}

.dark-zone :focus-visible {
  outline-color: var(--color-on-dark);
}

/* Bewegung reduzieren: der Verlauf steht */
:root[data-motion='still'] .wave i {
  animation: none;
}

/* Schwarz-Weiß-Modus (N1 Chrom, still): harte Kanten wie Metall, der Verlauf steht, kein
   wanderndes Licht (im Entwurf wurde es zum dunklen Schatten). Statt der Markenfarbe beim Zeigen
   etwas mehr Kontrast (unten). */
:root[data-theme='mono'] .wave {
  filter: contrast(1.9);
}

:root[data-theme='mono'] .wave i {
  --wave-blur: 26px;
  animation-play-state: paused;
}

:root[data-theme='mono'] .wave i:nth-child(4) {
  display: none;
}

:root[data-theme='mono'] .zone-slate {
  --mint-deep: #a9a9a9;
  --mint: #c6c6c6;
  --mint-light: #eeeeee;
  --mint-white: #ffffff;
  --halo-on-dark: none;
  --mint-ground: linear-gradient(160deg, #d2d2d2, #9e9e9e);
}

/* Statt der Markenfarbe: Schwarz im Modus "weiches Licht" vertieft die Schatten (mehr Kontrast);
   animiert wird nur die Deckkraft der Fläche, nicht der Filter des Verlaufs */
:root[data-theme='mono'] .stage__tint {
  background-color: #000;
  mix-blend-mode: soft-light;
}

:root[data-theme='mono'] .stage.is-tinted > .stage__tint {
  opacity: 0.55;
}

/* Andere Töne für eigene Seiten (Runde 20): dieselbe Bewegung, andere Palette. --mint-ground muss
   mit, weil es aus den Farben am :root berechnet ist. */
.zone-slate {
  --mint-deep: #3d4b56;
  --mint: #8a9eac;
  --mint-light: #c6d3dc;
  --mint-white: #f5f8fa;
  --flow-scrim: 0.3;
  --halo-on-dark: 0 0 0.6rem rgb(61 75 86 / 0.5);
  --mint-ground: linear-gradient(
    160deg,
    var(--mint-deep),
    color-mix(in srgb, var(--mint-deep) 65%, var(--mint))
  );
}