/* ==========================================================================
   Vista City — Seitenwechsel
   ---------------------------------------------------------------------------
   Der Vorhang besteht aus einem Raster kleiner Kacheln, die beim Laden
   diagonal verschwinden. Die Verzögerung je Kachel ergibt sich aus Zeile
   plus Spalte — dadurch wandert eine Welle schräg durchs Bild, statt alles
   gleichzeitig zu schalten.

   Bewusst nur diese eine Hälfte: Ein Zudecken beim Klick würde die
   Navigation um eine halbe Sekunde verzögern und die Welle zweimal
   hintereinander zeigen.

   Die Animation läuft rein über CSS. Das ist wichtig: Ein per Skript
   gesteuerter Vorhang bliebe bei einem Ladefehler stehen und würde die
   Seite verdecken. So verschwindet er in jedem Fall von allein.

   Farben folgen dem Theme — eine schwarze Fläche auf heller Seite schlägt
   beim Wechsel hart zu.
   ========================================================================== */

.veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: repeat(var(--cols, 12), 1fr);
  grid-template-rows: repeat(var(--rows, 8), 1fr);
  pointer-events: none;

  --veil-bg: var(--fade);
  --veil-ink: oklch(72% 0.004 300);
}

:root[data-theme='light'] .veil {
  --veil-bg: oklch(98.5% 0.002 300);
  --veil-ink: oklch(42% 0.012 300);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .veil {
    --veil-bg: oklch(98.5% 0.002 300);
    --veil-ink: oklch(42% 0.012 300);
  }
}

/* --- Kacheln ---------------------------------------------------------------
   Der Umriss zeichnet die Kachel einen Hauch größer als ihre Zelle. Ohne
   diesen Überstand blitzen zwischen den Kacheln Subpixel-Fugen auf, sobald
   sie skaliert werden.
   ---------------------------------------------------------------------------- */

.veil__tile {
  background: var(--veil-bg);
  outline: 1px solid var(--veil-bg);
  will-change: transform, opacity;
  animation: veil-tile-out 460ms var(--ease-out-expo) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes veil-tile-out {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(0.2); opacity: 0; }
}

/* --- Wortmarke -------------------------------------------------------------- */

.veil__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.75rem;
  justify-items: center;
  animation: veil-mark-out 340ms linear forwards;
}
.veil__mark img { width: 3rem; height: 3rem; }
.veil__mark span {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--veil-ink);
  padding-left: 0.42em;
}

@keyframes veil-mark-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Ohne Skript und bei reduzierter Bewegung: gar kein Vorhang.
   Sonst bliebe eine Fläche stehen oder es entstünde Bewegung, die
   niemand ausgelöst hat. */
.no-js .veil { display: none; }

@media (prefers-reduced-motion: reduce) {
  .veil { display: none; }
}