/* Eintritt fuer die Startseite: E1 fuer Bilder, T2 fuer Schrift.
   Michael 24.09.2026: "Zeig mir E1 und T2 auf der Homepage."
   Diese Datei wird NUR von vorschau-eintritt.html geladen. index.html
   bleibt unberuehrt.

   E1 Klaerung  Unschaerfe 18 -> 0, Groesse 1,06 -> 1,00, 700 ms
   T2 Milchglas Unschaerfe 8 -> 0, Aufblende, 560 ms

   Alle Startwerte haengen an html.js. Faellt das Skript aus, greift keine
   einzige Regel und die Seite steht sofort vollstaendig da. */

html.js { --aus: cubic-bezier(.23,1,.32,1); }

/* ---------- Bilder ---------- */
html.js [data-ein="bild"] { overflow: hidden; }
/* Michael 24.09.2026: "Bei den Bildern einen Tick laenger."
   700 -> 900 ms, Aufblende 420 -> 520. Groesse und Unschaerfe bleiben,
   nur die Zeit waechst -- dann wirkt es ruhiger, nicht traeger. */
html.js [data-ein="bild"] > img,
html.js [data-ein="bild"] img {
  filter: blur(18px); transform: scale(1.06); opacity: .72;
  transition: filter 900ms var(--aus), transform 900ms var(--aus), opacity 520ms linear;
  will-change: filter, transform, opacity;
}
html.js [data-ein="bild"].da img { filter: blur(0); transform: scale(1); opacity: 1; }

/* ---------- Schrift ---------- */
/* Michael 24.09.2026: "Die Animationen vom Text sollen etwas besser zu
   sehen sein." Unschaerfe 8 -> 12 px, Dauer 560 -> 760 ms, dazu 8 px von
   unten. Damit sieht man, DASS etwas passiert, ohne dass Text fehlt. */
html.js [data-ein="text"] {
  opacity: 0; filter: blur(12px); transform: translate3d(0,8px,0);
  transition: opacity 520ms var(--aus), filter 760ms var(--aus), transform 760ms var(--aus);
  will-change: opacity, filter, transform;
}
html.js [data-ein="text"].da { opacity: 1; filter: blur(0); transform: none; }

/* Geschwister versetzt, 70 ms -- mehr wirkt traege */
html.js [data-ein="text"][data-v="1"] { transition-delay: 90ms; }
html.js [data-ein="text"][data-v="2"] { transition-delay: 180ms; }
html.js [data-ein="text"][data-v="3"] { transition-delay: 270ms; }

/* Nichts davon im Kopf, im Buchungsbalken, im Chat oder in der Tafel --
   dort waere Bewegung stoerend, nicht schoen. */
html.js .kopf [data-ein], html.js .klebeleiste [data-ein],
html.js .gc-fenster [data-ein], html.js .gbt-tafel [data-ein] {
  opacity: 1 !important; filter: none !important; transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-ein] , html.js [data-ein] img {
    opacity: 1 !important; filter: none !important; transform: none !important;
    transition: none !important;
  }
}