/* ==========================================================================
   MATECREST SOLUTION - UNIFIED DESKTOP & MOBILE INTERACTION ENGINE
   ========================================================================== */

/* 1. Scroll Progress Bar */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #2563eb, #6366f1, #3b82f6);
    z-index: 99999;
    width: 0%;
}

/* 2. Custom Interactive Smooth Cursor (Hidden on Touch Devices) */
@media (pointer: coarse) {
    .custom-cursor-dot,
    .custom-cursor-outline {
        display: none !important;
    }
}

.custom-cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #2563eb;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: transform 0.05s ease-out;
}

.custom-cursor-outline {
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(37, 99, 235, 0.45);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, border-color 0.2s;
}

body.hovering .custom-cursor-outline {
    width: 58px;
    height: 58px;
    border-color: rgba(37, 99, 235, 0.9);
    background-color: rgba(37, 99, 235, 0.07);
}

/* 3. Automatic Mobile Scroll-Triggered Reveal & Card Animation */
/* ==========================================================================
   CARDS HOVER (DESKTOP) & AUTO-VIEWPORT (MOBILE) - GUARANTEED FIX
   ========================================================================== */

/* Base Card Style */
.hybrid-card {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.28s ease, 
                border-color 0.28s ease !important;
    will-change: transform, box-shadow;
}

/* 1. Desktop Hover: Direct 3D Physical Lift */
.hybrid-card:hover {
    transform: translateY(-14px) scale(1.015) !important;
    box-shadow: 0 26px 45px -10px rgba(37, 99, 235, 0.20), 0 0 0 1px rgba(37, 99, 235, 0.4) !important;
    border-color: transparent !important;
}

/* 2. Mobile Auto-Viewport Active State */
.hybrid-card.mobile-in-view {
    box-shadow: 0 16px 30px -8px rgba(37, 99, 235, 0.16) !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
}

.hybrid-card.mobile-in-view .badge-accent-number {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* Jab viewport me aayega to automatic glow aur activate hoga */
.mobile-reveal-card.in-view {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    box-shadow: 0 16px 32px -10px rgba(37, 99, 235, 0.14) !important;
    border-color: rgba(37, 99, 235, 0.35) !important;
}

/* Mobile Screen par card ka top number badge pulse animation */
.mobile-reveal-card.in-view .badge-accent-number {
    background-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

/* Mobile Tap / Active Feedback */
.mobile-reveal-card:active {
    transform: scale(0.98) !important;
    box-shadow: 0 8px 18px -4px rgba(37, 99, 235, 0.2) !important;
}

/* 4. Desktop Hover Physical 3D Lift */
@media (hover: hover) and (pointer: fine) {
    .mobile-reveal-card:hover {
        transform: translateY(-12px) scale(1.015) !important;
        box-shadow: 0 28px 50px -12px rgba(37, 99, 235, 0.2), 0 0 0 1px rgba(37, 99, 235, 0.3) !important;
        border-color: transparent !important;
    }
}

/* 5. Infinite Marquee Animation */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: 200%;
    animation: marquee 26s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

.mask-marquee {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}