/* ===========================================================================
   Ladeanzeige der Umschlag-Bühne.

   Der Umschlag wartet ohnehin auf seine Bilder (invitation-hero.js), aber bis
   sie da waren, stand er sichtbar herum und das Goldfutter ploppte auf der
   angehobenen Lasche nach. Hier steht nur, was für die Wartezeit dazukommt:
   der Umschlag bleibt unsichtbar, an seiner Stelle dreht ein Ring auf dem
   grünen Muster der Bühne.

   Eigene Datei, weil invitation-hero.css an der 300-Zeilen-Grenze steht.
   =========================================================================== */

.einladung-v2 {
  /* Obergrenze fürs Warten auf die Bilder. invitation-hero.js liest sie mit
     derselben Funktion wie --start-delay: ein hängender Download darf den
     Ring nicht endlos drehen lassen. */
  --load-timeout: 10s;
}

/* `visibility`, nicht `display`: die Animationen des Umschlags müssen
   existieren und laufen können. `display: none` nähme ihm den Kasten, und
   `measureHero` in tests/e2e/einladungskarte.spec.ts misst genau den. */
.einladung-v2:not(.is-ready) .v2__umschlag {
  visibility: hidden;
}

.v2__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.einladung-v2.is-ready .v2__loading {
  display: none;
}

/* Der Ring hängt am Pseudo-Element und nicht am Kasten selbst: die Regel
   `.einladung-v2:not(.is-playing) *` (invitation-hero.css) pausiert jede
   Animation auf einem ELEMENT der Bühne — und solange der Ring dreht, ist
   `is-playing` per Definition noch nicht gesetzt. Ein Pseudo-Element trifft
   der Selektor nicht, deshalb läuft er, während alles andere stillsteht.

   Die Verzögerung von 300 ms ist der ganze Flackerschutz: Bei schneller
   Leitung sind die Bilder vorher da, `is-ready` blendet den Ring aus, und er
   war nie zu sehen. Ein Zeitgeber im Skript täte dasselbe und liefe gegen
   diesen hier. */
.v2__loading::before {
  content: '';
  /* 72 px und ein 5-px-Rand: Die erste Fassung war 40 px stark und lief mit
     einem Rand aus 30 % Weiß — auf der 1512 px breiten Bühne war sie beim
     Ansehen schlicht zu übersehen, und eine Ladeanzeige, die niemand
     bemerkt, tut nichts. Die Restfläche bleibt bei 35 %, damit der Ring als
     Ring lesbar ist und nicht als geschlossener Kreis. */
  width: 72px;
  height: 72px;
  border: 5px solid rgb(255 255 255 / 35%);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation:
    v2-loading-appear 0s linear 300ms forwards,
    v2-spin 1s linear infinite;
}

@keyframes v2-loading-appear {
  to {
    opacity: 1;
  }
}

@keyframes v2-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Bei reduzierter Bewegung bleibt der Ring stehen — sichtbar, aber ohne
   Drehung. Das Warten selbst bleibt: die Bilder brauchen dieselbe Zeit. */
@media (prefers-reduced-motion: reduce) {
  .v2__loading::before {
    animation: v2-loading-appear 0s linear 300ms forwards;
  }
}