/* ══════════════════════════ preloader.css ══════════════════════════
   Lade-Maske vor allem anderen im Body (Markup in index.html, Mechanik in
   js/preloader.js). Deckt die volle Fläche ab, während im Hintergrund
   Schriften und das Hero-Foto laden. Sichtbar bleibt nur "Hallo" in
   wechselnden Sprachen, schnell durchgeblättert. Sobald geladen und eine
   Mindestzeit vorbei ist, hebt sich die Maske wie ein Vorhang nach oben
   weg (clip-path) und gibt #home für seine eigene Einblendung frei
   (hero.css, #home.is-ready).

   Ohne JS bleibt die Maske versteckt (<noscript> in index.html direkt
   dahinter). Die Seite ist dann von Anfang an ganz normal bedienbar,
   kein Fehlerzustand.

   Farben bewusst identisch zur dunklen Hero-Box (--hero-bg/--hero-text):
   der Übergang von der Maske zum Hero darunter soll nahtlos wirken,
   nicht wie ein Farbwechsel mitten in der Animation.

   Der Vorhang bekommt beim Öffnen zusätzlich einen minimalen Zoom
   (transform:scale). Pures clip-path wirkte flach, wie ein hartes
   Abschneiden statt einer Bewegung nach vorne/durch die Maske hindurch. */

.preloader{
  position:fixed;inset:0;
  /* Deutlich über allem anderen: Navbar liegt bei 100, der Skip-Link
     (global.css) bei 200. Die Maske muss buchstäblich alles verdecken,
     solange geladen wird. */
  z-index:500;
  display:flex;align-items:center;justify-content:center;
  background:var(--hero-bg);
  clip-path:inset(0);
  transform:scale(1);
  transition:clip-path .9s var(--morph), transform .9s var(--morph);
}

/* Von js/preloader.js gesetzt, sobald geladen und Mindestzeit vorbei sind.
   Die Maske "hebt" sich von unten weg wie ein Vorhang, statt einfach zu
   verschwinden. pointer-events:none erst hier: während die Maske noch
   voll steht, soll sie Klicks auf die (noch nicht bereite) Seite
   dahinter blockieren; sobald sie sich öffnet, darf sie den bereits
   freigelegten Teil der Seite nicht mehr blockieren. */
.preloader.is-leaving{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.035);
  pointer-events:none;
}

.preloader-word{
  margin:0;
  font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(32px,7vw,88px);font-weight:600;letter-spacing:-.02em;
  color:var(--hero-text);
  opacity:1;
  transform:translateY(0);
  /* Kurze eigene Transition statt der globalen (global.css setzt bei
     reduzierter Bewegung ohnehin .01ms). Die Dauer muss exakt zur
     Umschalt-Verzögerung in js/preloader.js passen (dort als FADE_MS
     benannt), sonst läuft der Wortwechsel dem Wechsel des Textinhalts
     sichtbar hinterher oder voraus. */
  transition:opacity 90ms var(--settle), transform 90ms var(--settle);
}
/* Von js/preloader.js zwischen zwei Wörtern kurz gesetzt: raus mit einem
   kleinen Hub nach unten, wieder rein von dort. Das fühlt sich dadurch nach
   einem WortWECHSEL an statt nach einem blossen Blinken. */
.preloader-word.is-swapping{
  opacity:0;
  transform:translateY(10px);
}

/* Das letzte Wort ("Hallo", siehe js/preloader.js) blendet schnell UND
   eigenständig aus, sobald sich der Vorhang zu öffnen beginnt. Sonst
   sässe der Text noch da, während ihn die clip-path-Kante von unten mitten
   durchschneidet, sobald sie die vertikale Mitte erreicht. */
.preloader.is-leaving .preloader-word{
  transition:opacity .2s ease;
  opacity:0;
}

/* Sperrt den Seiten-Scroll, solange die Maske steht: dasselbe Muster
   wie html.menu-open in global.css. */
html.is-loading{overflow:hidden}