.page-enter .site-header {
    animation: fadeSlideDown 480ms cubic-bezier(0.2, 0, 0, 1) both;
}

.page-enter .brand-logo {
    animation: logoIn 900ms cubic-bezier(0.2, 0, 0, 1) both;
}

.page-enter .mode-toggle {
    animation: fadeIn 600ms 150ms ease both;
}

.page-enter .tool-tabs .tab {
    animation: fadeSlideUp 520ms cubic-bezier(0.2, 0, 0, 1) both;
}

.page-enter .tool-tabs .tab:nth-of-type(1) { animation-delay: 120ms; }
.page-enter .tool-tabs .tab:nth-of-type(2) { animation-delay: 180ms; }
.page-enter .tool-tabs .tab:nth-of-type(3) { animation-delay: 240ms; }

.page-enter .tool-tabs .tab-indicator {
    animation: fadeIn 400ms 120ms ease both;
}

.page-enter .workspace > .tool-panel:not(.hidden) {
    animation: panelRise 640ms 280ms cubic-bezier(0.2, 0, 0, 1) both;
}

.page-enter .site-footer {
    animation: fadeIn 700ms 450ms ease both;
}

@keyframes logoIn {
    from { opacity: 0; transform: rotate(-120deg) scale(0.8); }
    to { opacity: 1; transform: rotate(0) scale(1); }
}

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

@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes panelInRight {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes panelInLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes rowDone {
    0% { background-color: rgba(52, 211, 153, 0); }
    25% { background-color: rgba(52, 211, 153, 0.08); }
    100% { background-color: rgba(52, 211, 153, 0); }
}

@keyframes pop {
    0% { transform: scale(0.85); }
    60% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes nudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@keyframes promptIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes row-sweep {
    from { transform: translateX(-37.5%); }
    to { transform: translateX(0); }
}

@keyframes pickerIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

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

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

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}