/* Animations — GPU-friendly (transform + opacity only) */

@keyframes float {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -10px, 0);
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

    to {
        opacity: 1;
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

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

.animate-float {
    animation: float 6s var(--ease-in-out) infinite;
}

.animate-fade-in {
    animation: fade-in-up var(--duration-slow) var(--ease-out) forwards;
}

.animate-scale-in {
    animation: scale-in var(--duration-base) var(--ease-out) forwards;
}

.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }

/* Legacy scroll hook — enhanced in enhancements.css */
.animate-on-scroll {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
}

.animate-on-scroll.animate-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .animate-float {
        animation: none;
    }

    .animate-fade-in,
    .animate-scale-in {
        animation: none;
        opacity: 1;
        transform: none;
    }
}