/* ===== CUSTOM ANIMATIONS & OVERRIDES (V6 - Marquee & Glow) ===== */

/* Abstract Background Shapes Animation (Mockups) */
@keyframes floatMockupWeb {
    0%, 100% { transform: translateY(0) rotate(-12deg) scale(1); }
    50% { transform: translateY(-20px) rotate(-10deg) scale(1.02); }
}

@keyframes floatMockupMobile {
    0%, 100% { transform: translateY(0) rotate(12deg) scale(1); }
    50% { transform: translateY(20px) rotate(14deg) scale(0.98); }
}

.mockup-web {
    animation: floatMockupWeb 12s ease-in-out infinite;
    transform-style: preserve-3d;
    perspective: 1000px;
    /* Will be overridden by JS Parallax on scroll */
    will-change: transform;
}

.mockup-mobile {
    animation: floatMockupMobile 15s ease-in-out infinite;
    transform-style: preserve-3d;
    perspective: 1000px;
    /* Will be overridden by JS Parallax on scroll */
    will-change: transform;
}

.mockup-nodes {
    animation: customFloat 10s ease-in-out infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -20;
    }
}

/* --- GLOW CARDS (Premium Interactive Hover) --- */
.glow-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glow-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y),
        rgba(100, 181, 246, 0.8),
        transparent 40%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

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

/* --- MARQUEE ANIMATION (Tech Stack) --- */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@keyframes marquee2 {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0%); }
}

.animate-marquee {
    animation: marquee 25s linear infinite;
}

.animate-marquee2 {
    animation: marquee2 25s linear infinite;
}

/* Floating animation for WhatsApp button and custom floating elements */
@keyframes customFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

.float-animation {
    animation: customFloat 4s ease-in-out infinite;
}

.float-animation:hover {
    animation-play-state: paused;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #121212; 
}

::-webkit-scrollbar-thumb {
    background: #333; 
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0D47A1; 
}