/* ==========================================================================
   Vista City — Seitenwechsel
   ---------------------------------------------------------------------------
   Der Vorhang besteht aus einem Raster kleiner Kacheln, die diagonal
   durchlaufen: beim Verlassen bauen sie sich von links oben auf, beim Laden
   verschwinden sie in derselben Richtung weiter. Die Verzögerung je Kachel
   ergibt sich aus Zeile plus Spalte — dadurch wandert eine Welle schräg
   durchs Bild, statt alles gleichzeitig zu schalten.

   Der Weg hinaus läuft als reine CSS-Animation. 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 — ein schwarzer Vorhang 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);
  transform: scale(1);
  will-change: transform, opacity;
  /* Ausgangslage beim Laden: Kachel deckt und verschwindet gleich. */
  animation: veil-tile-out 460ms var(--ease-out-expo) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

/* Eintritt: Kacheln bauen sich auf und decken zu. */
.veil.is-leaving { pointer-events: all; }
.veil.is-leaving .veil__tile {
  animation: veil-tile-in 420ms var(--ease-snap) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}

@keyframes veil-tile-in {
  from { transform: scale(0.2); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@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;
  opacity: 0;
  animation: veil-mark-out 340ms linear forwards;
}
.veil.is-leaving .veil__mark {
  animation: veil-mark-in 460ms var(--ease-out-expo) 200ms 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-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes veil-mark-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --- Laufbalken ------------------------------------------------------------- */

.veil__bar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.veil.is-leaving .veil__bar {
  opacity: 1;
  animation: veil-bar 900ms var(--ease-out-expo) forwards;
}
@keyframes veil-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 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; }
}