/* =====================================================================
 * LISI Harmonia Layer (2026-05-14)
 * ---------------------------------------------------------------------
 * Drei subtile Effekte, die das Surfgefuehl natuerlicher machen:
 *  1. Atmender Hintergrund (Home + Subpage), 80s sehr langsamer Loop.
 *  2. Smooth-Scroll fuer Anker-Links (NICHT global, damit route-bezogene
 *     scrollTo(0,0) hart bleiben).
 *  3. Bild-Fade-In: alle <img> faden beim Decode 0->1 in 400ms ein.
 *
 * Alle Effekte respektieren prefers-reduced-motion und sind so leise,
 * dass sie wirken, ohne aufzufallen.
 * =================================================================== */

/* ----- 1. ATMENDER HINTERGRUND ------------------------------------- */
/* Sehr leichter, langsamer Helligkeits-Drift. ±2% Brightness ueber 80s.
   Auf body, damit data-route-Wechsel ohne Reset weiterlaeuft. */
@keyframes lisiBreath {
  0%   { filter: brightness(1.000) }
  50%  { filter: brightness(1.020) }
  100% { filter: brightness(1.000) }
}
@keyframes lisiBreathDark {
  0%   { filter: brightness(1.000) }
  50%  { filter: brightness(1.060) }
  100% { filter: brightness(1.000) }
}
/* WICHTIG: Filter auf body wuerde alle Kinder durchfaerben (incl. Bilder).
   Stattdessen einen unsichtbaren ::before-Layer mit gradient-shift. */
html:not(.lisi-booting) body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 30% 20%, rgba(255, 244, 220, .06) 0%, transparent 60%),
    radial-gradient(1000px 700px at 70% 80%, rgba(180, 200, 170, .05) 0%, transparent 65%);
  animation: lisiBreathBG 80s ease-in-out infinite;
}
html[data-route="home"]:not(.lisi-booting) body::before {
  background:
    radial-gradient(1400px 900px at 30% 25%, rgba(255, 220, 160, .045) 0%, transparent 60%),
    radial-gradient(1100px 800px at 70% 80%, rgba(120, 180, 130, .035) 0%, transparent 65%);
}
@keyframes lisiBreathBG {
  0%   { transform: translate3d(0, 0, 0)        scale(1.00); opacity: .85; }
  50%  { transform: translate3d(0.5%, -0.8%, 0) scale(1.03); opacity: 1.00; }
  100% { transform: translate3d(0, 0, 0)        scale(1.00); opacity: .85; }
}

/* ----- 2. SMOOTH-SCROLL fuer Anker-Links --------------------------- */
/* Nur wenn ein Klick-Trigger via :target oder Hash-Wechsel ein Anker
   adressiert, soll ein sanfter Scroll stattfinden. Da CSS allein nicht
   reicht (scrollIntoView wird oft per JS getriggert), setzen wir die
   Defaults via JS (harmonia.js) und erlauben hier nur das CSS-Hook. */
html.lisi-smooth-scroll { scroll-behavior: smooth; }

/* ----- 3. BILD-FADE-IN beim Decode --------------------------------- */
/* Alle <img>, die als nicht-decoded ausgezeichnet sind, starten unsichtbar
   und faden ueber 400ms ein, sobald das Browser-Image dekodiert ist.
   Das Auszeichnen passiert in harmonia.js: data-harmonia="fade" + class
   "is-loaded" nach load/decode. */
img[data-harmonia="fade"] {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
img[data-harmonia="fade"].is-loaded { opacity: 1; }
/* Hinweis: Tree-Hero-Bilder (Home before/after) sind im harmonia.js per
   class-Check vom Marker ausgenommen \u2014 sie kriegen also nie
   data-harmonia="fade" und werden vom Selektor oben gar nicht matched.
   Damit bleibt die Morph-Steuerung aus tree.css unangetastet. */

/* ----- Reduced Motion respektieren --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.lisi-booting) body::before { animation: none; opacity: 0; }
  html.lisi-smooth-scroll { scroll-behavior: auto; }
  img[data-harmonia="fade"] { opacity: 1; transition: none; }
}