/* Verspielte Mikro-Interaktionen der Oberfläche (siehe DESIGN.md).
   Aktuell: Klick-Funken (ClickSparks.tsx) — kurze Striche in Kurslotse-Blau,
   die von der Maus wegfliegen, wenn jemand neben ein Bedienelement klickt. */

.kl-spark-layer {
    --kl-spark-color: #1A6D93;
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

.kl-spark-layer span {
    position: absolute;
    width: 2px;
    height: var(--kl-spark-length, 10px);
    /* Der Strich soll auf dem Klickpunkt starten, nicht daneben. */
    margin-left: -1px;
    margin-top: calc(var(--kl-spark-length, 10px) / -2);
    border-radius: 1px;
    background: var(--kl-spark-color);
    will-change: transform, opacity;
    animation: kl-spark-fly 520ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

/* rotate() dreht die Achse, translateY() schiebt danach nach außen — der Strich
   fliegt also in seine eigene Richtung und zeigt dabei nach außen. */
@keyframes kl-spark-fly {
    from {
        opacity: 0.85;
        transform: rotate(var(--kl-spark-angle, 0deg)) translateY(4px) scaleY(0.6);
    }

    to {
        opacity: 0;
        transform: rotate(var(--kl-spark-angle, 0deg))
            translateY(var(--kl-spark-distance, 24px)) scaleY(1.15);
    }
}

/* Doppelt abgesichert: ClickSparks.tsx hängt sich gar nicht erst ein, und falls
   die Einstellung erst später umgestellt wird, bleibt der Effekt trotzdem aus. */
@media (prefers-reduced-motion: reduce) {
    .kl-spark-layer {
        display: none;
    }
}