/* --- UI-SEITENUEBERGAENGE --- */
/* Reine Optik: keine Tipp-, Punkte-, Ergebnis-, Worker- oder Speicherlogik. */

.view {
    animation: wmViewFadeSlideIn 0.24s ease-out both;
    transform-origin: center top;
}

@keyframes wmViewFadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.992);
        filter: blur(1.5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.custom-modal-overlay[style*="flex"],
.custom-modal-overlay[style*="block"] {
    animation: wmModalBackdropIn 0.18s ease-out both;
}

.custom-modal-overlay[style*="flex"] .custom-modal-box,
.custom-modal-overlay[style*="block"] .custom-modal-box {
    animation: wmModalBoxIn 0.22s ease-out both;
    transform-origin: center center;
}

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

@keyframes wmModalBoxIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.975);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 700px) {
    .view {
        animation-duration: 0.18s;
    }

    .custom-modal-overlay[style*="flex"] .custom-modal-box,
    .custom-modal-overlay[style*="block"] .custom-modal-box {
        animation-duration: 0.18s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .view,
    .custom-modal-overlay[style*="flex"],
    .custom-modal-overlay[style*="block"],
    .custom-modal-overlay[style*="flex"] .custom-modal-box,
    .custom-modal-overlay[style*="block"] .custom-modal-box {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
}