/* Hintergrundszene und Glasflächen.
   Szene: fixiert hinter allem. Drei Varianten über data-scene auf <html>:
   foto „Foto“ (Default, Hund auf der Wiese, Entwurf), blaetter „Bild“ (Aquarell aus dem Schwesterprojekt), wiese „Verlauf“ (aus Tokens gezeichnet).
   Darüber Schleier, Rauschen und Fleckung, damit Glas etwas zum Verwischen hat. */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: linear-gradient(180deg, var(--scene-sky) 0%, var(--scene-haze) 62%, var(--scene-hill-1) 100%);
}

.scene__layer,
.scene__veil,
.scene__noise,
.scene__mottle {
  position: absolute;
  inset: 0;
}

.scene__layer {
  display: none;
}

html:not([data-scene]) .scene__foto,
html[data-scene="wiese"] .scene__wiese,
html[data-scene="blaetter"] .scene__blaetter,
html[data-scene="foto"] .scene__foto {
  display: block;
}

/* Wiese: Licht oben rechts, Hügel, Pfotenspur. Alle Farben aus --scene-*. */

.scene__wiese::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto auto;
  width: 70vmax;
  height: 70vmax;
  background: radial-gradient(closest-side, var(--scene-light), transparent 72%);
  opacity: 0.95;
}

.scene__wiese::after {
  content: "";
  position: absolute;
  inset: 8% auto auto -18%;
  width: 60vmax;
  height: 46vmax;
  background: radial-gradient(closest-side, var(--scene-hill-2), transparent 72%);
  opacity: 0.55;
}

.scene__glow {
  position: absolute;
  inset: 30% -20% auto 35%;
  height: 50vmax;
  background: radial-gradient(closest-side, var(--scene-hill-1), transparent 70%);
  opacity: 0.8;
}

.scene__hills {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 78%;
}

.scene__hill--1 { fill: var(--scene-hill-1); }
.scene__hill--2 { fill: var(--scene-hill-2); }
.scene__hill--3 { fill: var(--scene-hill-3); }

.scene__trail {
  fill: var(--scene-trail);
}

/* Blätter: Aquarell-Laub, passt zu grünen Themes. In anderen Themes leicht in die Theme-Farbe gezogen. */

.scene__blaetter {
  background-image: image-set(
    url("../img/scene/blaetter.webp") type("image/webp"),
    url("../img/scene/blaetter.jpg") type("image/jpeg")
  );
  background-position: center;
  background-size: cover;
}

.scene__blaetter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scene-hill-2);
  mix-blend-mode: color;
  opacity: 0.35;
}

[data-theme="platzgruen"] .scene__blaetter::after,
html:not([data-theme]) .scene__blaetter::after {
  opacity: 0;
}

/* Foto: Hund auf der Wiese (nur Entwurf, Rechte vor Veröffentlichung klären, siehe DESIGN.md).
   Unten mittig verankert, damit Wiese und Hund bei jedem Seitenverhältnis sichtbar bleiben.
   In anderen Themes wie die Blätter leicht in die Theme-Farbe gezogen. */

.scene__foto {
  background-image: image-set(
    url("../img/scene/foto-hund-wiese.webp") type("image/webp"),
    url("../img/scene/foto-hund-wiese.jpg") type("image/jpeg")
  );
  background-position: center bottom;
  background-size: cover;
}

.scene__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scene-hill-2);
  mix-blend-mode: color;
  opacity: 0.3;
}

[data-theme="platzgruen"] .scene__foto::after,
html:not([data-theme]) .scene__foto::after {
  opacity: 0;
}

.scene__veil {
  background: var(--scene-tint);
}

.scene__noise,
.scene__mottle {
  background-repeat: repeat;
}

.scene__noise {
  background-image: url("../img/scene/rauschen.svg");
  background-size: 140px 140px;
  opacity: 0.12;
  mix-blend-mode: multiply;
}

.scene__mottle {
  background-image: url("../img/scene/fleckung.svg");
  background-size: 420px 420px;
  opacity: 0.16;
  mix-blend-mode: overlay;
}

[data-theme="daemmerung"] .scene__noise,
[data-theme="flutlicht"] .scene__noise {
  mix-blend-mode: screen;
  opacity: 0.06;
}

/* ------------------------------------------------------------------
   Glas
   ------------------------------------------------------------------ */

.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-l);
  background: var(--surface-glass);
  box-shadow: var(--glass-shadow);
  color: var(--color-text);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

/* 1-px-Verlaufskante: oben hell, unten fast weg. Über eine Maske, damit der Radius bleibt. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--glass-border-top), var(--glass-border-bottom) 55%, rgb(255 255 255 / 0.4));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Getöntes Glas in der Primärfarbe. Legt die Text-Tokens um, damit Bausteine darin nichts Eigenes brauchen. */
.glass--strong {
  --color-text: var(--on-strong-text);
  --color-text-muted: var(--on-strong-muted);
  --color-heading: var(--on-strong-text);
  --color-link: var(--on-strong-link);
  --color-link-hover: var(--on-strong-text);
  --color-accent-text: var(--on-strong-accent);
  --color-accent: var(--on-strong-accent);
  --color-focus: var(--on-strong-focus);
  --color-rule: var(--on-strong-rule);
  --surface-inset: var(--on-strong-inset);
  --color-primary: var(--on-strong-text);
  --color-primary-strong: var(--on-strong-muted);
  --color-on-primary: rgb(var(--palette-glass-strong));
  --color-primary-soft: var(--on-strong-soft);
  --color-accent-soft: var(--on-strong-soft);
  --glass-border-top: var(--on-strong-border-top);
  --glass-border-bottom: var(--on-strong-border-bottom);
  --logo-color: var(--on-strong-text);
  --logo-accent: var(--on-strong-accent);
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: var(--glass-strong-filter);
  backdrop-filter: var(--glass-strong-filter);
}

.glass--strong ::selection {
  background: var(--on-strong-text);
  color: rgb(var(--palette-glass-strong));
}

/* Innenabstand der Scheiben */
.pane {
  padding: clamp(1.25rem, 3.5vw, 2.75rem);
}

.pane--tight {
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

/* Fallbacks: deckende Flächen. Kontrast hängt dann gar nicht mehr am Hintergrund. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--surface-glass-solid);
  }

  .glass--strong {
    background: var(--surface-glass-strong-solid);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--surface-glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .glass--strong {
    background: var(--surface-glass-strong-solid);
  }

  .scene__noise,
  .scene__mottle {
    display: none;
  }
}

@media (forced-colors: active) {
  .glass {
    border: 1px solid CanvasText;
  }
}