.fade-in {
    animation: fade-in 420ms ease both;
}

.slide-up {
    animation: fade-slide-up 520ms ease both;
}

.slide-down {
    animation: slide-down 420ms ease both;
}

.stagger-children > * {
    opacity: 0;
    animation: fade-in-up 520ms ease both;
    animation-delay: calc(var(--stagger-index, 0) * 80ms);
}

.observe-ready {
    opacity: 0;
    transform: translateY(30px);
}

.observe-ready.is-visible {
    animation: reveal-on-scroll 620ms ease both;
}

.row-stagger {
    opacity: 0;
    animation: fade-in-up 420ms ease both;
    animation-delay: calc(var(--row-index, 0) * 30ms);
}

.shake {
    animation: shake-x 360ms ease both;
}

.success-flash {
    animation: success-flash 700ms ease both;
}

.pulse-soft {
    animation: pulse-soft 1.8s ease-in-out infinite;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reveal-on-scroll {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake-x {
    0%,
    100% {
        transform: translateX(0);
    }
    20%,
    60% {
        transform: translateX(-5px);
    }
    40%,
    80% {
        transform: translateX(5px);
    }
}

@keyframes shimmer {
    to {
        transform: translateX(100%);
    }
}

@keyframes emoji-bounce {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -8px;
    }
}

@keyframes slow-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes float-y {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-22px);
    }
}

@keyframes pulse-soft {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.26);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
}

@keyframes success-flash {
    0% {
        box-shadow: 0 0 0 rgba(34, 197, 94, 0);
    }
    45% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.22);
    }
    100% {
        box-shadow: 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes flip-in {
    from {
        transform: rotateX(90deg);
    }
    to {
        transform: rotateX(0);
    }
}

@keyframes ripple {
    0% {
        opacity: 0.45;
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4);
    }
}

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

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

@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .slide-up,
    .slide-down,
    .stagger-children > *,
    .observe-ready,
    .observe-ready.is-visible,
    .row-stagger,
    .shake,
    .success-flash,
    .pulse-soft {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}