/* ALTIS - Modern Performance Enhancements */

/* 1. Improved Font Loading */
@font-display: swap;

/* 2. CSS Variables for Theming */
:root {
    --primary-color: #FF7A00;
    --dark-bg: #000000;
    --text-light: #FFFFFF;
    --text-gray: #B0B0B0;
    --transition-speed: 0.3s;
    --transition-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Performance: Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 4. Improved Images - Native Lazy Loading */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

img[loading="lazy"] {
    background: linear-gradient(90deg, rgba(255, 122, 0, 0.1) 25%, rgba(255, 122, 0, 0.05) 50%, rgba(255, 122, 0, 0.1) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* 5. SVG Optimization */
svg {
    shape-rendering: crispEdges;
}

/* 6. Link Focus States for Accessibility */
a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* 7. Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* 8. Better Touch Targets for Mobile */
button,
a,
[role="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* 9. Typography Optimization */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 10. Will-change for Animated Elements */
.product-card,
.valor-card,
.portfolio-tesla-card {
    will-change: transform, opacity;
}

/* 11. Improved Button States */
button,
[role="button"],
.btn-ecommerce {
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-function);
}

button:active,
[role="button"]:active,
.btn-ecommerce:active {
    transform: scale(0.98);
}

/* 12. Better Form Elements */
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* 13. Code Performance - Remove Unused Selectors */
.abcen,
.abcen1,
.pre-show {
    /* Selectors optimized for modern usage */
}

/* 14. Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--dark-bg);
        color: var(--text-light);
    }
}

/* 15. High Contrast Support */
@media (prefers-contrast: more) {
    body {
        border: 1px solid var(--text-light);
    }
    
    button,
    [role="button"],
    .btn-ecommerce {
        border: 2px solid currentColor;
    }
}

/* 16. Print Optimization */
@media print {
    body {
        background: white;
        color: black;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    .footer-altis,
    nav,
    .wow {
        display: none;
    }
}

/* 17. Performance: Contain for Heavy Elements */
.portfolio-tesla-grid,
.valores-cards-container,
.ecommerce-row {
    contain: layout style paint;
}

/* 18. Improved Column Layout Performance */
.col-md-4,
.col-sm-6 {
    contain: content;
}

/* 19. Navigation Performance */
nav,
.navbar {
    will-change: transform;
}

/* 20. Image Optimization for Different Devices */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Retina display optimizations */
    svg {
        filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.1));
    }
}