/* -------------------------------------------------------------
   ANIMATIONS.CSS — KashAndaz Landing Website
   GPU-accelerated, 60fps animations for an immersive experience.
   ------------------------------------------------------------- */

/* --- FLOATING BLOBS (Hero Background) --- */
@keyframes float-blob-1 {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.95);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

@keyframes float-blob-2 {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    50% {
        transform: translate(-40px, 40px) scale(1.15);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

@keyframes float-blob-3 {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    40% {
        transform: translate(50px, -20px) scale(0.9);
    }
    80% {
        transform: translate(-30px, -40px) scale(1.05);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

/* --- AURORA LIGHT WAVES --- */
@keyframes aurora-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* --- TEXT/ELEMENT TRANSITIONS (Triggered by IntersectionObserver) --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    will-change: transform, opacity;
}

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

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    will-change: transform, opacity;
}

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

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    will-change: transform, opacity;
}

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

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    will-change: transform, opacity;
}

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

/* --- STAGGER DELAYS --- */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* --- GLASS SHINE EFFECT --- */
.glass-shine {
    position: relative;
    overflow: hidden;
}

.glass-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.13) 30%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.13) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    transition: left 0.75s ease-in-out;
    pointer-events: none;
    z-index: 5;
}

.glass-shine:hover::after {
    left: 130%;
}

/* --- BUTTON HOVER LIFT & GLOW --- */
.hover-lift {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

/* --- SPIN / ROTATE ANIMS FOR ICONS --- */
@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spin-slow {
    animation: spin-slow 20s linear infinite;
}

/* --- PULSE GLOW --- */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

.pulse-glow-blue {
    animation: pulse-glow 2s infinite;
}

/* --- TEXT SHINE (For Gradient Headings) --- */
@keyframes text-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.text-gradient-animated {
    background-size: 200% auto;
    animation: text-gradient-shift 6s linear infinite;
}