/*
 * Local UI animation layer.
 * It is intentionally dependency-free so the static frontend can be deployed
 * directly from Spring Boot or Baota without a build step.
 */
:root {
    --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ui-fast: 160ms;
    --ui-medium: 360ms;
    --ui-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
}

html.ui-animations-ready body {
    text-rendering: optimizeLegibility;
}

body.ui-page-enter {
    animation: ui-page-enter 420ms var(--ui-ease) both;
}

.ui-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity var(--ui-medium) var(--ui-ease),
        transform var(--ui-medium) var(--ui-ease),
        box-shadow var(--ui-fast) ease,
        border-color var(--ui-fast) ease,
        background-color var(--ui-fast) ease;
    transition-delay: var(--ui-reveal-delay, 0ms);
}

.ui-reveal.ui-reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.card.ui-reveal-visible,
.stats-card.ui-reveal-visible,
.menu-card.ui-reveal-visible,
.vip-card.ui-reveal-visible,
.result-container.ui-reveal-visible {
    box-shadow: var(--ui-shadow-soft);
}

.ui-ripple-host {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

.ui-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    pointer-events: none;
    background: currentColor;
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(0);
    animation: ui-ripple 520ms ease-out forwards;
}

.ui-pressing {
    transform: translateY(1px) scale(0.99);
}

#message-toast.ui-toast-enter,
.toast.ui-toast-enter,
.message-toast.ui-toast-enter {
    animation: ui-toast-enter 260ms var(--ui-ease) both;
}

.modal.ui-modal-enter,
.dialog.ui-modal-enter,
.popup.ui-modal-enter {
    animation: ui-modal-enter 240ms var(--ui-ease) both;
}

tr.ui-reveal {
    transform: translateY(8px);
}

.table-container,
.filters,
.notice,
.result-container,
.leaderboard-item,
.form-container,
.profile-section,
.admin-section {
    transition:
        box-shadow var(--ui-fast) ease,
        border-color var(--ui-fast) ease,
        background-color var(--ui-fast) ease;
}

@keyframes ui-page-enter {
    from {
        opacity: 0.96;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ui-ripple {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(24);
    }
}

@keyframes ui-toast-enter {
    from {
        opacity: 0;
        transform: translate3d(18px, -6px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ui-modal-enter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.ui-page-enter,
    .ui-reveal,
    .ui-ripple,
    #message-toast.ui-toast-enter,
    .toast.ui-toast-enter,
    .message-toast.ui-toast-enter,
    .modal.ui-modal-enter,
    .dialog.ui-modal-enter,
    .popup.ui-modal-enter {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .ui-reveal {
        opacity: 1 !important;
    }
}