/* Die Startanzeige besitzt eigene semantische Farben, passend zur Flutter-App.
   Sie benötigt weder externe Schriften noch Bilder und beeinflusst keine Views. */
:root {
  --loading-paper: #f7f5ef;
  --loading-text: #302c35;
  --loading-plum: #705568;
  --loading-halo: #eee7e9;
  --loading-gold: #9b7956;
  --loading-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

:root[data-loading-theme="dark"] {
  --loading-paper: #211e26;
  --loading-text: #f4eee9;
  --loading-plum: #c4a5bd;
  --loading-halo: #302a35;
  --loading-gold: #c6a27b;
}

body { margin: 0; background: var(--loading-paper); color: var(--loading-text); }

#loading {
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font: 18px/1.5 Georgia, "Times New Roman", serif;
}

.loading-illustration { display: block; width: 144px; max-width: 50vw; height: auto; }
.loading-halo { fill: var(--loading-halo); }
.loading-feather { fill: var(--loading-plum); }
.loading-ink, .loading-vein { fill: none; stroke-width: 2; stroke-linecap: round; }
.loading-ink { stroke: var(--loading-gold); }
.loading-vein { stroke: var(--loading-paper); }
#loading-message { max-width: 28em; margin: 24px 0 0; }
.loading-noscript { padding: 16px; text-align: center; }

/* Acht kurze, sanfte Schreibbewegungen, danach bleibt die Feder ruhig.
   Die Animation blockiert den Start nicht und simuliert keinen Fortschritt.
   Es ändern sich ausschließlich Transform und Deckkraft, keine Layoutmaße. */
.loading-quill {
  transform-origin: 48px 113px;
  animation: quill-write 250ms var(--loading-ease-in-out) 8 alternate;
}

@keyframes quill-write {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}

@keyframes loading-fade {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

/* Bei reduzierter Bewegung bleibt die Position vollständig unverändert;
   nur ein einmaliges, dezentes Aufblenden signalisiert den Start. */
@media (prefers-reduced-motion: reduce) {
  .loading-quill { transform: none; animation: loading-fade 200ms linear 1; }
}