/* Custom Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
}

.reveal.active {
    animation: slideUp 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* Laola-Wave Animation (90/10 Rule) */
/* Subtle Breathing Animation (Option 2) */
@keyframes breath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.animate-breath {
    animation: breath 4s ease-in-out infinite;
    /* Keeps the icons visible and stable */
    display: inline-block;
}

@keyframes pulse-soft {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

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

/* Delay utilities */
.delay-100 {
    transition-delay: 0.4s;
    animation-delay: 0.4s;
}

.delay-200 {
    transition-delay: 0.8s;
    animation-delay: 0.8s;
}

.delay-300 {
    transition-delay: 1.2s;
    animation-delay: 1.2s;
}

.delay-400 {
    transition-delay: 1.6s;
    animation-delay: 1.6s;
}

/* Long Delays for Wave */
.delay-2s {
    animation-delay: 2s;
}

.delay-4s {
    animation-delay: 4s;
}

.delay-6s {
    animation-delay: 6s;
}

.delay-8s {
    animation-delay: 8s;
}

.delay-10s {
    animation-delay: 10s;
}

.delay-12s {
    animation-delay: 12s;
}

.delay-14s {
    animation-delay: 14s;
}

.delay-16s {
    animation-delay: 16s;
}

.delay-18s {
    animation-delay: 18s;
}

/* Legacy slide-up */
.slide-up {
    animation: slideUp 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(40px);
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}