/**
 * WebFalx Premium Animation & Interactive Styles
 * Glow cards, Floating gradient blobs, parallax layers, micro-interactions
 */

/* 1. Gradient Blobs (Floating Background Shapes) */
.gradient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
    animation: float-blob 20s infinite alternate ease-in-out;
}

.blob-primary {
    width: 400px;
    height: 400px;
    background: var(--color-primary);
    top: -100px;
    left: -100px;
}

.blob-secondary {
    width: 500px;
    height: 500px;
    background: var(--color-secondary);
    bottom: -200px;
    right: -100px;
    animation-delay: -5s;
    animation-duration: 25s;
}

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

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

/* 2. Glassmorphic Glow Card */
.glow-card {
    position: relative;
}

.glow-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: radial-gradient(800px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(255, 255, 255, 0.06), transparent 40%);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.glow-card:hover::before {
    opacity: 1;
}

/* 3. Micro Interactions */
/* Magnetic element wrapper class */
.magnetic-item {
    transition: transform var(--transition-fast);
}

/* Pulse animation */
.pulse-element {
    animation: pulse-ring 2s infinite cubic-bezier(0.215, 0.610, 0.355, 1);
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

/* 4. Intersection Observer Reveal Classes (Fallback to GSAP ScrollTrigger) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-fade {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.reveal-fade.revealed {
    opacity: 1;
}

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

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

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

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

/* 5. Custom 3D Card Hover Effect CSS Setup */
.perspective-container {
    perspective: 1000px;
}

.card-3d {
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 0.1s ease;
}