/* ========================================
   CRITICAL CSS OPTIMIZATIONS - 13 Website
   ======================================== */

/* Ultra-fast animation defaults */
:root {
    --animation-speed: 0.15s;
    --transition-speed: 0.15s;
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override ALL slow animations globally - EXCEPT investment plans */
*:not(.plan-card):not(.plan-card *):not(.plan-title):not(.team-commission):not(.plan-btn), 
*:not(.plan-card):not(.plan-card *)::before, 
*:not(.plan-card):not(.plan-card *)::after {
    transition-duration: var(--transition-speed) !important;
    animation-duration: var(--animation-speed) !important;
    animation-timing-function: var(--ease-out) !important;
    transition-timing-function: var(--ease-in-out) !important;
}

/* 🎨 INVESTMENT PLAN CARDS - COMPLETE EXCLUSION FROM GLOBAL OPTIMIZATIONS */
.plan-card, .plan-card *, 
.plan-card.plan-1, .plan-card.plan-2, .plan-card.plan-3, .plan-card.plan-4, .plan-card.plan-5,
.plan-title, .team-commission, .plan-btn {
    transition-duration: unset !important; /* Let plan CSS control transitions */
    animation-duration: unset !important; /* Preserve multicolor blink & other animations */
    transition-timing-function: unset !important;
    animation-timing-function: unset !important;
}

/* 🌈 FORCE OPTIMAL TEXT ANIMATIONS FOR PLAN ELEMENTS */
.plan-title {
    animation: multicolorBlink 4s infinite linear !important;
    animation-duration: 4s !important; /* Perfect speed - not too fast, not too slow */
}

.team-commission {
    animation: multicolorBlink 3s infinite !important;
    animation-duration: 3s !important; /* Quick, attractive color changes */
}

/* Smooth hover effects for plan cards only */
.plan-card:hover {
    transition-duration: 0.3s var(--ease-out) !important;
}

.plan-btn:hover {
    transition-duration: 0.4s var(--ease-out) !important;
}

/* Hardware acceleration for smooth performance */
.swiper-slide, .banner-box, .apply-button, .wallet-card {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    contain: layout style paint;
}

/* CSS containment for performance isolation */
.team-leader-section, .wallet-card, .investment-section {
    contain: layout style paint;
    will-change: auto;
}

/* Animation performance optimizations */
.rotate, [class*="animate"], [class*="transition"] {
    will-change: transform;
    transform: translateZ(0);
    animation-fill-mode: both;
    animation-play-state: running;
}

/* Optimized hover effects - minimal resource usage */
.banner-box:hover {
    transform: translateZ(0) scale(1.03) !important;
    transition: transform 0.12s var(--ease-out) !important;
}

.apply-button:hover {
    transform: translateZ(0) scale(1.02) !important;
    transition: transform 0.1s var(--ease-out) !important;
}

/* Mobile performance - disable animations on touch devices */
@media (hover: none) and (pointer: coarse) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* Exception for critical loading animations only */
    .loading, .spinner, .swiper-transition {
        animation-duration: 0.3s !important;
    }
}

/* CSS Containment for better rendering performance */
.team-leader-section, .wallet-card, .finance-overview {
    contain: layout style paint;
}

/* Efficient mobile layout without excessive overrides */
@media (max-width: 768px) {
    .team-leader-section .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .wallet-card, .banner-box {
        margin: 8px 2vw !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }
    
    /* Reduce font calculations on mobile */
    .banner-text, .wallet-header h3 {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
}

/* Optimize swiper performance */
.shop_banner .swiper-slide {
    transition: transform 0.1s var(--ease-out) !important;
}

.shop_banner:hover .swiper-slide {
    transform: scale(1.02) !important;
}

/* Remove heavy box-shadows and replace with efficient borders */
.wallet-card, .team-leader-section {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Efficient button styles */
.team-leader-btns a, .apply-button {
    transition: background-color 0.1s var(--ease-out) !important;
    will-change: background-color;
}

/* Remove redundant margin/padding utility classes burden */
.my-5, .my-10, .my-15, .my-20, .my-25, .my-30, .my-35, .my-40, .my-45, .my-50,
.mx-5, .mx-10, .mx-15, .mx-20, .mx-25, .mx-30, .mx-35, .mx-40, .mx-45, .mx-50 {
    /* Use CSS custom properties instead of hundreds of utility classes */
    margin: var(--spacing, 0);
}

/* Optimize text rendering */
body, .banner-text, .wallet-header h3, .team-leader-section h4 {
    text-rendering: optimizeSpeed;
    font-display: swap;
}

/* Efficient grid fallback */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    contain: layout;
}

@supports (display: flex) {
    .grid {
        display: flex;
        flex-direction: column;
    }
}