/**
 * ═══════════════════════════════════════════════════════════════
 * MK PROFILE — PERFORMANCE CSS
 * Optimizations for faster rendering and better user experience
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════
   LAZY LOADING STYLES
   ═══════════════════════════════════════ */

/* Lazy loaded images fade in smoothly */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

img[loading="lazy"].lazy-loaded,
img[loading="lazy"]:not([data-src]) {
    opacity: 1;
}

/* Placeholder background for images while loading */
img[loading="lazy"]:not(.lazy-loaded) {
    background: linear-gradient(135deg, rgba(130, 36, 227, 0.1) 0%, rgba(181, 83, 247, 0.05) 100%);
}

/* ═══════════════════════════════════════
   CONTENT VISIBILITY OPTIMIZATION
   ═══════════════════════════════════════ */

/* Defer rendering of below-the-fold sections */
.section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* Footer optimization */
.footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

/* ═══════════════════════════════════════
   WILL-CHANGE OPTIMIZATION
   ═══════════════════════════════════════ */

/* Only apply will-change on hover/focus to reduce memory */
.btn:hover,
.btn:focus,
.service-card:hover,
.project-slide:hover,
.navbar.scrolled {
    will-change: transform;
}

/* ═══════════════════════════════════════
   REDUCED MOTION SUPPORT
   ═══════════════════════════════════════ */

@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;
    }

    img[loading="lazy"] {
        transition: none;
    }
}

/* ═══════════════════════════════════════
   FONT DISPLAY OPTIMIZATION
   ═══════════════════════════════════════ */

/* Ensure text remains visible during webfont load */
.loader-content,
.hero-content,
.navbar {
    font-display: swap;
}

/* ═══════════════════════════════════════
   HARDWARE ACCELERATION
   ═══════════════════════════════════════ */

/* Promote elements to their own layer for smoother animations */
.loader,
.navbar,
.hero-orb,
.floating-shape {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ═══════════════════════════════════════
   IMAGE OPTIMIZATION HINTS
   ═══════════════════════════════════════ */

/* Prevent layout shifts from images */
img {
    aspect-ratio: attr(width) / attr(height);
    height: auto;
    max-width: 100%;
}

/* Specific aspect ratios for project images */
.project-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.authority-image,
.premium-image {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Logo aspect ratio */
.navbar-logo,
.footer-logo,
.loader-logo-img {
    aspect-ratio: auto;
}

/* ═══════════════════════════════════════
   SCROLL PERFORMANCE
   ═══════════════════════════════════════ */

/* Enable smooth scrolling only on capable devices */
@media (prefers-reduced-motion: no-preference) {
    /* Native smooth scroll removed for Lenis compatibility */
}

/* Optimize scrolling containers */
.swiper-wrapper,
.testimonials-slider-wrapper {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

/* ═══════════════════════════════════════
   PRINT STYLES (defer loading)
   ═══════════════════════════════════════ */

@media print {

    .loader,
    .navbar,
    .whatsapp-float,
    .hero-background,
    .hero-orb,
    .floating-shape {
        display: none !important;
    }

    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
    }
}

/* ═══════════════════════════════════════
   CUSTOM SCROLLBAR (aesthetic + performance)
   ═══════════════════════════════════════ */

/* Custom scrollbar for WebKit browsers */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 10, 30, 0.8);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary, #8224e3) 0%, var(--color-secondary, #b553f7) 100%);
    border-radius: 10px;
    border: 2px solid rgba(15, 10, 30, 0.8);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-primary-light, #a855f7) 0%, var(--color-secondary, #b553f7) 100%);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary, #8224e3) rgba(15, 10, 30, 0.8);
}