/**
 * LisansJet - Performance Optimization CSS
 * Purpose: Reduce scroll janking and improve mobile performance
 * Date: 2026-01-03
 */

/* ===================================
   GPU Acceleration & Performance
   =================================== */

/* Enable hardware acceleration for frequently animated elements */
.homepage-hero::before,
.homepage-hero::after,
.floating-shape,
.lisansjet-logo,
.hero-title,
.hero-description {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ===================================
   Reduced Motion Support (Accessibility)
   =================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===================================
   Mobile Performance Optimization
   =================================== */

@media (max-width: 767px) {
    /* Disable heavy blur effects on mobile */
    .homepage-hero::before,
    .homepage-hero::after,
    .floating-shape,
    .floating-shape-1,
    .floating-shape-2 {
        animation: none !important;
        filter: none !important;
        -webkit-filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        display: none; /* Completely hide decorative elements */
    }

    /* Simplify gradients on mobile */
    .homepage-hero {
        background: linear-gradient(135deg, #2f343b 0%, #3a4149 100%) !important;
        background-size: 100% 100% !important;
        animation: none !important;
    }

    /* Reduce glass effects on mobile */
    .glass-card {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Simplify logo animation on mobile */
    .lisansjet-logo,
    .header-logo-text,
    .footer-logo-text,
    .login-logo-text,
    .register-logo-text {
        background: #2f343b !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        animation: none !important;
    }
}

/* ===================================
   Desktop Performance (Tablets & Up)
   =================================== */

@media (min-width: 768px) {
    /* Optimize animations for desktop - reduce complexity */
    .homepage-hero {
        animation-duration: 20s; /* Slower = smoother */
    }

    .homepage-hero::before {
        animation-duration: 25s;
    }

    .homepage-hero::after {
        animation-duration: 30s;
    }

    /* Use CSS containment for better rendering performance */
    .homepage-hero,
    .glass-card,
    .product-card {
        contain: layout style;
    }
}

/* ===================================
   Scroll Performance Improvements
   =================================== */

/* Passive event listeners hint for browsers */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reduce repaints during scroll */
body {
    -webkit-overflow-scrolling: touch;
}

/* Optimize images and media for scroll */
img,
video,
iframe {
    will-change: auto; /* Don't over-optimize */
}

/* Product cards optimization */
.product-card,
.category-card {
    will-change: auto;
    contain: layout style paint;
}

.product-card:hover,
.category-card:hover {
    will-change: transform;
}

/* ===================================
   Lazy Load Animation Classes
   =================================== */

/* Only animate when element is in viewport */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Disable animations when user has low-end device */
@media (max-device-width: 480px) and (max-device-height: 640px) {
    * {
        animation: none !important;
        transition: none !important;
    }
}