/* GK Pharmaceuticals - Animations CSS */

/* Core Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(var(--primary-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

@keyframes spinBlob {
    0% {
        transform: translate(0px, 0px) rotate(0deg) scale(1);
    }
    33% {
        transform: translate(30px, -50px) rotate(120deg) scale(1.2);
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg) scale(0.8);
    }
    100% {
        transform: translate(0px, 0px) rotate(360deg) scale(1);
    }
}

@keyframes logoTicker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Animation Classes */
.animate-fade-up {
    opacity: 0;
    animation: fadeInUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.animate-fade-down {
    opacity: 0;
    animation: fadeInDown 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.animate-fade-left {
    opacity: 0;
    animation: fadeInLeft 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.animate-fade-right {
    opacity: 0;
    animation: fadeInRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

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

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

/* Background Animated Blobs */
.bg-blobs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: spinBlob 25s infinite alternate linear;
}

.blob-primary {
    width: 500px;
    height: 500px;
    background: var(--primary-hex);
    top: -10%;
    left: -10%;
}

.blob-secondary {
    width: 400px;
    height: 400px;
    background: var(--secondary-hex);
    bottom: -10%;
    right: -10%;
    animation-delay: -5s;
}

.blob-accent {
    width: 300px;
    height: 300px;
    background: var(--accent-hex);
    top: 40%;
    left: 50%;
    animation-delay: -10s;
}

/* Interactive Card Effects */
.interactive-card {
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    z-index: var(--z-index-base);
}

.interactive-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, rgba(var(--secondary-rgb), 0.05) 100%);
    opacity: 0;
    z-index: var(--z-index-back);
    transition: var(--transition-smooth);
}

.interactive-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 20px 40px rgba(0, 94, 184, 0.12);
}

.interactive-card:hover::after {
    opacity: 1;
}

/* Delay modifiers */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }