/* Base Utilities */
html { scroll-behavior: smooth; }


/* Automatically zoom out 10% on desktop screens only */
@media (min-width: 1024px) {
    html {
        zoom: 0.9;
    }
}


/* Custom Mesh Gradient (Stripe/Helcim style) */
.stripe-mesh {
    background-color: #f8fafc; /* Slate 50 */
    background-image: 
        radial-gradient(at 88% 0%, hsla(242, 85%, 72%, 0.15) 0px, transparent 50%),
        radial-gradient(at 15% 90%, hsla(280, 85%, 65%, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 0%, hsla(190, 85%, 70%, 0.15) 0px, transparent 50%);
    animation: meshPulse 10s ease-in-out infinite alternate;
}

@keyframes meshPulse {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* Glassmorphism Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(99, 91, 255, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

/* 3D Perspective Wrapper */
.perspective-1000 {
    perspective: 1000px;
}

/* Infinite Scrolling Logo Ticker */
.ticker-wrap {
    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);
}

.ticker-track {
    width: max-content;
    animation: scrollTicker 20s linear infinite;
}

@keyframes scrollTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); /* Assumes duplicated content */ }
}





/* Product Cards 3D Glow Effect */
.product-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.product-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 
        0 20px 40px -10px rgba(99, 91, 255, 0.1),
        0 0 20px rgba(99, 91, 255, 0.05); /* Soft ambient glow */
    border-color: rgba(99, 91, 255, 0.2);
}





/* Swiper Pagination & Navigation Customization */
.swiper-pagination-bullet {
    background-color: #cbd5e1 !important; /* Tailwind slate-300 */
    opacity: 1 !important;
}
.swiper-pagination-bullet-active {
    background-color: #635BFF !important; /* Blurple */
    width: 24px !important;
    border-radius: 9999px !important;
    transition: all 0.3s ease;
}
.swiper-button-next::after, 
.swiper-button-prev::after {
    font-size: 1.5rem !important;
    font-weight: 800;
}


/* Animated Map Nodes */
.map-node {
    width: 12px;
    height: 12px;
    background-color: #635BFF; /* Blurple */
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 10px rgba(99, 91, 255, 0.8);
}

.map-node::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(99, 91, 255, 0.5);
    border-radius: 50%;
    animation: pulseNode 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulseNode {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* Form Invalid State Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
.input-error {
    border-color: #ef4444 !important; /* Tailwind Red 500 */
    animation: shake 0.3s ease-in-out;
}