/* Shared page transition for the landing page and dashboard shells. */
body.page-transition-enter {
    animation: page-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.page-transition-exit {
    animation: page-exit 0.42s ease forwards;
    pointer-events: none;
}

#page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #080808;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease;
}

#page-transition-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.shell-panel.page-panel-enter,
#headDashboardIframe.page-panel-enter {
    animation: page-panel-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.shell-grid.event-filter-enter {
    animation: page-panel-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.shell-grid.event-filter-enter .shell-card {
    animation: event-card-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.shell-grid.event-filter-enter .shell-card:nth-child(2) { animation-delay: 0.06s; }
.shell-grid.event-filter-enter .shell-card:nth-child(3) { animation-delay: 0.12s; }
.shell-grid.event-filter-enter .shell-card:nth-child(4) { animation-delay: 0.18s; }

body.head-dashboard-enter .app > * {
    animation: page-panel-enter 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes page-enter {
    from {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(18px) scale(0.985);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes page-exit {
    from {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(-12px) scale(1.015);
    }
}

@keyframes page-panel-enter {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(22px);
    }

    @keyframes event-card-enter {
        from {
            opacity: 0;
            transform: translateY(26px) scale(0.96);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-transition-enter,
    body.page-transition-exit,
    .shell-panel.page-panel-enter,
    #headDashboardIframe.page-panel-enter,
    .shell-grid.event-filter-enter,
    body.head-dashboard-enter .app > * {
        animation: none;
    }
}