/* assets/css/animations.css */

/* --- Gradient Shifting --- */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Blob Drifting --- */
@keyframes blobFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(40px, -60px) scale(1.15);
    }
    66% {
        transform: translate(-30px, 30px) scale(0.9);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

.blob-1 {
    animation: blobFloat 12s ease-in-out infinite alternate;
}

.blob-2 {
    animation: blobFloat 16s ease-in-out infinite alternate-reverse;
}

.blob-3 {
    animation: blobFloat 14s ease-in-out infinite alternate;
}

.blob-4 {
    animation: blobFloat 18s ease-in-out infinite alternate-reverse;
}

/* --- Floating Communication Icons (Hero) --- */
@keyframes floatIcon {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(3deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.float-icon-1 { animation: floatIcon 4.2s ease-in-out infinite; }
.float-icon-2 { animation: floatIcon 5.1s ease-in-out infinite; }
.float-icon-3 { animation: floatIcon 5.8s ease-in-out infinite; }
.float-icon-4 { animation: floatIcon 6.4s ease-in-out infinite; }
.float-icon-5 { animation: floatIcon 4.8s ease-in-out infinite; }
.float-icon-6 { animation: floatIcon 5.5s ease-in-out infinite; }

/* --- Dotted Wave Animation --- */
@keyframes waveDrift {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(15px, -10px) rotate(0.5deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.wave-anim {
    animation: waveDrift 12s ease-in-out infinite alternate;
}

/* --- Viewport Entrance Animations --- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.93);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* --- Card Hover Stagger Delays --- */
.stagger-container > *:nth-child(1) { transition-delay: 0ms; }
.stagger-container > *:nth-child(2) { transition-delay: 80ms; }
.stagger-container > *:nth-child(3) { transition-delay: 160ms; }
.stagger-container > *:nth-child(4) { transition-delay: 240ms; }
.stagger-container > *:nth-child(5) { transition-delay: 320ms; }
.stagger-container > *:nth-child(6) { transition-delay: 400ms; }

/* Mobile Overflow & Shift Prevention */
@media (max-width: 768px) {
    .reveal-left,
    .reveal-right {
        transform: translateY(22px) !important;
    }
    .reveal-left.active,
    .reveal-right.active {
        transform: translateY(0) !important;
    }
}