/**
 * Mobile Performance Optimizations
 * Reduces layout shifts and improves rendering performance
 *
 * @package StockGuardianPro
 */

/* Force GPU acceleration for animations */
.hero-title,
.hero-tagline,
.product-card,
.animate-fade-in {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimize animations to use composite layers */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* Use transform instead of top/left for animations */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
    animation-fill-mode: both;
}

/* Prevent layout shifts with aspect ratio */
img {
    aspect-ratio: attr(width) / attr(height);
}

/* Optimize font loading */
@font-face {
    font-display: swap;
}

/* Reduce repaints with contain */
.product-card,
.hero-section {
    contain: layout style paint;
}

/* Optimize scrolling */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}