/* layout-stability.css - Prevent Layout Shifts and Forced Reflow */

/* Critical rendering optimizations */
* {
    /* Use border-box to prevent layout shifts */
    box-sizing: border-box;
}

/* Prevent layout shifts during font loading */
.font-loading {
    font-display: swap;
    font-variation-settings: normal;
}

/* Optimize transforms and animations */
.optimized-transform {
    /* Use transform instead of changing layout properties */
    will-change: transform;
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden;
}

.optimized-animation {
    /* Only animate transform and opacity */
    will-change: transform, opacity;
    animation-fill-mode: both;
}

/* Carousel optimizations */
#carouselTrack {
    /* Force hardware acceleration for smooth sliding */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.carousel-slide {
    /* Prevent layout shifts during carousel */
    flex-shrink: 0;
    width: auto;
    min-width: 0;
}

.carousel-image {
    /* Prevent image layout shifts */
    width: 100%;
    height: auto;
    aspect-ratio: 16/9; /* Prevent layout shift while loading */
    object-fit: cover;
    object-position: center;
}

/* Menu optimizations */
.main-nav {
    /* Prevent layout shifts during menu transitions */
    contain: layout style;
}

.hamburger-menu {
    /* Optimize hamburger animation */
    will-change: transform;
    contain: layout;
}

.hamburger-menu span {
    /* Hardware accelerate hamburger animation */
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Button optimizations */
.cta-button,
.pricing-button,
.submit-button {
    /* Prevent button layout shifts */
    contain: layout;
    will-change: transform;
}

.cta-button::before,
.pricing-button::before,
.submit-button::before {
    /* Optimize button hover effects */
    will-change: transform;
    transform: translateZ(0);
}

/* Bottom bar optimizations */
.bottom-bar {
    /* Optimize bottom bar animation */
    will-change: transform, opacity;
    contain: layout style;
}

/* Hero section LCP optimizations */
.hero {
    position: relative;
    min-height: 100vh;
    /* contain: layout; - Removed as it was blocking content below */
}

.hero-lcp-image {
    /* Critical LCP image - immediately visible */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    opacity: 1;
    will-change: auto;
    pointer-events: none; /* Ensure it doesn't block interactions */
}

/* Hero slider optimizations */
.hero-slider {
    /* Prevent layout shifts in hero */
    /* contain: layout; - Removed as it was blocking content flow */
    min-height: 100vh;
}

.swiper-slide {
    /* Optimize slide transitions */
    will-change: transform;
    backface-visibility: hidden;
    min-height: 100vh;
    /* contain: layout; - Removed to allow content flow */
}

.swiper-slide.hero-bg {
    /* Dynamic background loading after LCP */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease;
}

.hero-inner {
    /* Prevent content layout shifts */
    min-height: 100vh;
    display: flex;
    align-items: center;
    /* contain: layout; - Removed to allow proper content flow */
}

.hero-content {
    /* Stable content area */
    flex: 1;
    max-width: 50%;
    /* contain: layout; - Removed to prevent blocking */
}

.hero-content h1 {
    /* Prevent text layout shifts */
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.hero-media {
    /* Stable media area */
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* contain: layout; - Removed to allow proper rendering */
}

.hero-video {
    /* Prevent video layout shifts */
    width: 70%;
    aspect-ratio: 9/16;
    object-fit: cover;
    border-radius: 10px;
    max-height: 80vh;
    height: auto;
}

.hero-image {
    /* Prevent image layout shifts */
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

/* LCP Critical Image Loading States */
.hero-lcp-image.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.hero-lcp-image.loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Video loading optimization */
.hero-video.loading {
    background: #000;
    position: relative;
}

.hero-video.loading::after {
    content: '⏳';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: white;
}

.hero-video.ready {
    background: transparent;
}

.hero-video.ready::after {
    display: none;
}

/* Prevent layout shift during background image loading */
.swiper-slide[data-bg] {
    background-image: none;
    transition: background-image 0.3s ease;
}

.swiper-slide[data-bg].background-loaded {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* LCP optimized class for immediate priority */
.lcp-optimized {
    /* contain: layout size; - Removed to prevent blocking content */
    will-change: auto;
}

/* Mobile LCP optimizations */
@media (max-width: 768px) {
    .hero-lcp-image {
        object-position: center center;
    }
    
    .hero-video {
        width: 100%;
        max-width: 100%;
    }
    
    .hero-image {
        width: 100%;
        max-width: 100%;
    }
}

/* Popup optimizations */
.popup-overlay {
    /* Optimize popup animations */
    will-change: opacity;
    contain: layout style;
}

.popup-container {
    /* Prevent popup layout shifts */
    will-change: transform, opacity;
    contain: layout;
}

/* Scroll optimizations */
.scroll-optimized {
    /* Optimize scrolling performance */
    overflow-anchor: auto;
    overscroll-behavior: contain;
}

/* Grid and flexbox optimizations */
.cards-grid,
.protocol-grid,
.benefits-grid,
.pricing-cards {
    /* Prevent grid layout shifts - using lighter containment */
    contain: style;
}

/* Image optimizations */
img {
    /* Prevent image layout shifts */
    max-width: 100%;
    height: auto;
}

img[width][height] {
    /* Preserve aspect ratio if dimensions are specified */
    aspect-ratio: attr(width) / attr(height);
}

/* Loading states to prevent layout shifts */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* Critical layout prevention */
.no-layout-shift {
    /* Prevent any layout changes */
    contain: layout size;
}

.size-contained {
    /* Prevent size-related layout shifts */
    contain: size;
}

.layout-contained {
    /* Prevent layout-related shifts */
    contain: layout;
}

/* Performance critical sections */
.critical-section {
    /* Optimize critical rendering path - using lighter containment */
    contain: style;
    will-change: auto;
}

/* Optimize text rendering */
.optimized-text {
    text-rendering: optimizeSpeed;
    font-smooth: auto;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

/* Optimize background images */
.optimized-bg {
    background-attachment: scroll; /* Avoid fixed backgrounds that cause reflow */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Form optimizations */
input, textarea, select {
    /* Prevent form layout shifts */
    contain: layout;
    will-change: auto;
}

/* Table optimizations */
table {
    /* Prevent table layout shifts */
    table-layout: fixed;
    contain: layout;
}

/* Media query optimizations */
@media (max-width: 768px) {
    /* Mobile-specific optimizations */
    .mobile-optimized {
        contain: layout;
        will-change: auto;
    }
    
    /* Reduce animations on mobile to improve performance */
    .reduce-motion {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High-performance mode for low-end devices */
@media (prefers-reduced-motion: reduce) {
    .optimized-animation,
    .optimized-transform {
        will-change: auto;
        transform: none;
        animation: none;
        transition: none;
    }
}

/* Print optimizations */
@media print {
    * {
        contain: none !important;
        will-change: auto !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* Focus optimizations */
:focus-visible {
    /* Optimize focus indicators */
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    contain: layout;
}

/* Reduce layout calculations for hidden elements */
[hidden] {
    display: none !important;
    contain: none !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Critical performance utilities */
.gpu-accelerate {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.prevent-reflow {
    contain: layout size style;
}

.optimize-paint {
    will-change: auto;
    contain: paint;
}

.optimize-composite {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Debug utilities */
.debug-reflow {
    outline: 2px solid red !important;
}

.debug-paint {
    outline: 2px solid blue !important;
}

.debug-composite {
    outline: 2px solid green !important;
}