/* ==========================================
   EASTLANE DIGITAL ANIMATIONS
   Version 3.0 — Enhanced
========================================== */

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

/* Fade Up */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Left */
@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade Right */
@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade Scale */
@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Glow */
@keyframes glow {
    0% { box-shadow: 0 0 20px rgba(0, 217, 255, 0.25); }
    50% { box-shadow: 0 0 45px rgba(0, 217, 255, 0.5); }
    100% { box-shadow: 0 0 20px rgba(0, 217, 255, 0.25); }
}

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

/* Background Float */
@keyframes bgFloat1 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, 20px); }
    66% { transform: translate(-20px, 40px); }
}

@keyframes bgFloat2 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-30px, -20px); }
    66% { transform: translate(20px, -40px); }
}

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Shimmer */
@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Bar Grow */
@keyframes barGrow {
    from { transform: scaleY(0.7); }
    to { transform: scaleY(1); }
}

/* Pulse Dot */
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* WhatsApp Pulse */
@keyframes whatsappPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
}

/* Count Up */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Slide In Bottom */
@keyframes slideInBottom {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Devices */
.laptop-card { animation: float 7s ease-in-out infinite; }
.phone-left { animation: float 5s ease-in-out infinite; }
.phone-right { animation: float 6s ease-in-out infinite; }

/* Buttons */
.btn-primary { animation: glow 4s infinite; }
.btn-primary:hover { animation: pulse 0.5s; }

/* Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s ease;
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Hero Title */
.hero h1 { animation: fadeLeft 1s ease; }
.hero p { animation: fadeLeft 1.3s ease; }
.hero-buttons { animation: fadeLeft 1.6s ease; }
.hero-right { animation: fadeRight 1.2s ease; }

/* ===========================================
   LOADER
=========================================== */

.loader {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #050816;
    z-index: 99999;
    transition: all 0.8s ease;
}

.loader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-logo {
    text-align: center;
}

.loader-logo span {
    display: inline-flex;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    background: linear-gradient(135deg, #00E5FF, #7C3AED);
    margin-bottom: 20px;
    color: white;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    animation: pulse 2s infinite;
}

.loader-logo h2 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

/* ===========================================
   REVEAL
=========================================== */

.reveal {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: none;
}

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.stagger-children.active > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.stagger-children.active > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }