/* Scroll-Anker deaktivieren, damit beim Hochscrollen kein Zurückspringen (epub.js continuous) */
.epub-container {
    overflow-anchor: none !important;
}

/* Body-Reset: verhindert, dass das Flutter-Mounten die nutzbare Dokumentbreite
   ändert (Default-Margin bzw. kurz auftauchende Scrollbar) und der horizontal
   zentrierte Loader dadurch seitlich springt. Für Flutter-Web ohnehin Standard –
   das Scrollen verwaltet die Engine selbst. */
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background: #ffffff;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Draw-Animation als Sprite-Sheet (96 Frames, 12 Spalten x 8 Reihen, Zelle 300px,
   Sheet 3600x2400). Abgespielt rein per transform -> läuft auf dem Compositor-Thread
   und bleibt flüssig, auch wenn die Flutter-Engine den Main-Thread blockiert.
   sprite-x scannt eine Reihe (12 Spalten) in 0,5s, sprite-y schaltet alle 0,5s eine
   Reihe weiter (8 Reihen in 4s) -> 96 Frames / 4s = 24fps, nahtloser Loop. */
.loader-animation {
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.sprite-y {
    width: 300px;
    height: 300px;
    animation: sprite-y 4s steps(8) infinite;
}

.sprite-x {
    display: block;
    width: 3600px;
    height: 2400px;
    animation: sprite-x 0.5s steps(12) infinite;
}

@keyframes sprite-y { to { transform: translateY(-2400px); } }
@keyframes sprite-x { to { transform: translateX(-3600px); } }

/* Hinweistext – erscheint erst beim kalten Start (siehe loading_spinner.js) */
#loading-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.4s ease-in;
    /* Compositor-Ebene schon beim Laden anlegen, nicht erst beim Einblenden bei
       2,5 s. Sonst lässt die späte Layer-Erzeugung den Teilbaum neu einrasten und
       die per transform laufende Sprite-Animation springt um ~1 px. */
    will-change: opacity;
}

#loading-hint.visible {
    opacity: 1;
}

h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: #111;
    text-align: center;
}

#loading-hint p {
    margin: 0;
    max-width: 320px;
    padding: 0 16px;
    font-size: 1rem;
    line-height: 1.4;
    color: #555;
    text-align: center;
}