/**
 * Motion-Tokens: Transitions und global verfügbare Keyframes.
 * Basierend auf der Slate-Design-Spezifikation §4.
 */

:root {
    --transition-hover: 0.12s ease;
    --transition-toggle: 0.18s ease;
    --transition-modal-in: 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slateFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slateModalIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slateOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slatePulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.7);
    }
}