/* Water-UI Transitions & Animations */

/* Wave Transition for Tab Switching */
@keyframes wave-in {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.99);
        filter: blur(4px);
    }

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

.wave-animate {
    animation: wave-in var(--water-duration) var(--water-easing) forwards;
}

/* Liquid Mobile Menu Expansion */
.liquid-expand {
    transition: max-height var(--water-duration) var(--water-easing),
        opacity var(--water-duration) var(--water-easing),
        transform var(--water-duration) var(--water-easing);
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    overflow: hidden;
}

.liquid-expand.show {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
}

/* Soft Hover Lift & Gentle Scale */
.water-lift {
    transition: transform 500ms var(--water-easing),
        box-shadow 500ms var(--water-easing),
        background-color 500ms var(--water-easing);
}

.water-lift:hover {
    transform: scale(1.02) translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Floating Badges bounce-slow override */
@keyframes water-float {

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

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

.float-water {
    animation: water-float 4s var(--water-easing) infinite;
}

/* Tab indicator liquid slide */
#tab-indicator {
    transition: all var(--water-duration) var(--water-easing);
}

/* Grid reflow easing */
.grid-flow-water {
    display: grid;
    transition: all var(--water-duration) var(--water-easing);
}

/* Pulse Shadow Animation */
@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(251, 191, 36, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
    }
}

.pulse-shadow {
    animation: pulse-shadow 2s infinite;
}

/* WhatsApp Specific Pulse */
@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.whatsapp-pulse {
    animation: whatsapp-pulse 2s infinite;
}

/* Slide Up Animation */
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slide-up 0.3s var(--water-easing) forwards;
}