/* ERZEUGT von scripts/website-bauen.py aus src/Preventra.Web/wwwroot/css/app.css (ADR 0053).
   Nicht von Hand ändern — Änderungen gehören in app.css. */
.logo-signet {
    fill: var(--color-marke-signet);
}

.logo-schrift {
    fill: var(--color-marke-schrift);
}

/*
 * Das Signet zeichnet sich nach — nur auf der Anmeldeseite (_Logo mit true, ADR 0053).
 *
 * Erst ziehen beide Formen ihre Kontur ('pathLength="1"' macht die Strichlänge zu 1, unabhängig
 * von der wirklichen Länge), dann füllen sie sich, dann blendet der Schriftzug ein. Zusammen gut
 * eine Sekunde, einmal — keine Schleife. Bei 'prefers-reduced-motion' kürzt der Block am
 * Dateiende jede Dauer auf nahezu null; wegen 'forwards' steht das Logo dann sofort fertig da.
 */
.logo-zeichnen .logo-signet {
    fill: transparent;
    stroke: var(--color-marke-signet);

    /* In Einheiten der Vorlage (168,55 hoch): 10 ergeben bei 36 px Logohöhe gut 2 px Strich. */
    stroke-width: 10;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation:
        signet-ziehen 800ms ease-in-out forwards,
        signet-fuellen 350ms ease-out 750ms forwards;
}

/* Auf der Anmeldeseite eine Stufe größer — sonst ist das Zeichnen bei 24 px kaum zu sehen. */
.schlicht-marke .logo-zeichnen {
    height: 2.25rem;
}

.logo-zeichnen .logo-signet:nth-child(2) {
    animation-delay: 180ms, 900ms;
}

.logo-zeichnen .logo-schrift {
    opacity: 0;
    animation: schrift-einblenden 400ms ease-out 950ms forwards;
}

@keyframes signet-ziehen {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes signet-fuellen {
    to {
        fill: var(--color-marke-signet);
        stroke-width: 0;
    }
}

@keyframes schrift-einblenden {
    to {
        opacity: 1;
    }
}

/* Reduzierte Bewegung: sofort das fertige Logo. Der allgemeine Block am Dateiende kürzt nur die
   DAUER, nicht die Verzögerung — der Schriftzug stünde sonst knapp eine Sekunde unsichtbar da. */
@media (prefers-reduced-motion: reduce) {
    .logo-zeichnen .logo-signet {
        animation: none;
        fill: var(--color-marke-signet);
        stroke-width: 0;
    }

    .logo-zeichnen .logo-schrift {
        animation: none;
        opacity: 1;
    }
}