/**
 * Performance Optimization CSS
 * 
 * Styles for:
 * - Blur-up image placeholders
 * - Loading skeletons
 * - Aspect ratio boxes (prevent layout shift)
 * - Progressive loading animations
 */

/* ===== Blur-Up Placeholder System ===== */

/* Image wrapper with aspect ratio preservation */
.img-wrapper,
.card-image-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
}

/* Placeholder blur effect */
.img-wrapper::before,
.card-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px);
    transform: scale(1.1);
    /* Prevent blur edges */
    opacity: 1;
    transition: opacity 0.4s ease-out;
    z-index: 1;
}

/* Hide placeholder when image loads */
.img-wrapper.loaded::before,
.card-image-wrapper.loaded::before {
    opacity: 0;
}

/* Actual image - FIXED: visible by default */
.img-wrapper img,
.card-image-wrapper img {
    position: relative;
    z-index: 2;
    opacity: 1;
    /* CRITICAL: Images must be visible by default */
    transition: opacity 0.3s ease-out;
}

/* Loaded image - confirm visibility */
.img-wrapper img.loaded,
.card-image-wrapper img.loaded {
    opacity: 1;
}

/* ===== Loading Skeleton Animations ===== */

.skeleton {
    background: linear-gradient(90deg,
            #f0f0f0 25%,
            #e0e0e0 50%,
            #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* Skeleton shapes */
.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
}

.skeleton-text:last-child {
    width: 80%;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: 8px;
}

.skeleton-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* ===== Aspect Ratio Boxes (Prevent Layout Shift) ===== */

/* Common aspect ratios */
.aspect-16-9 {
    position: relative;
    padding-top: 56.25%;
    /* 9/16 = 0.5625 */
}

.aspect-4-3 {
    position: relative;
    padding-top: 75%;
    /* 3/4 = 0.75 */
}

.aspect-1-1 {
    position: relative;
    padding-top: 100%;
}

.aspect-3-2 {
    position: relative;
    padding-top: 66.67%;
    /* 2/3 = 0.6667 */
}

/* Content inside aspect ratio box */
.aspect-16-9>*,
.aspect-4-3>*,
.aspect-1-1>*,
.aspect-3-2>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Progressive Loading States ===== */

.loading-state {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top-color: var(--secondary-blue, #4A90E2);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* Slide up and fade in */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up-fade-in {
    animation: slideUpFadeIn 0.6s ease-out;
}

/* ===== Image Loading States ===== */

/* Image not yet loaded - FIXED: visible by default */
img[data-src]:not(.loaded) {
    opacity: 1;
    /* CRITICAL: Do not hide images before load */
}

/* Image loading */
img.loading {
    opacity: 0.8;
    /* Slightly visible during load */
    filter: blur(2px);
    /* Very subtle blur */
}

/* Image error state */
img.error {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Error placeholder */
.image-error {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #999;
    font-size: 0.9rem;
    padding: 20px;
    text-align: center;
}

.image-error::before {
    content: '⚠️';
    display: block;
    font-size: 2rem;
    margin-bottom: 10px;
}

/* ===== Performance Hints ===== */

/* REMOVED: content-visibility causes white-screen on bfcache restore
   Use intersection observer-based lazy loading in JavaScript instead.
.lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}
*/

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .skeleton {
        animation: none;
        background: #f0f0f0;
    }
}

/* ===== Video Loading Optimization ===== */

video {
    background-color: #000;
}

video[poster] {
    object-fit: cover;
}

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

.video-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.1;
    z-index: 1;
}

/* Hide placeholder when video loads */
.video-wrapper.loaded::before {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* ==== Critical Above-the-Fold Optimizations ===== */

/* Prevent flash of unstyled content */
.hero {
    min-height: 500px;
    background-color: var(--primary-blue, #0F2C4A);
}

/* Ensure hero video container doesn't collapse */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Responsive Image Optimizations ===== */

/* Prevent oversized images */
img {
    max-width: 100%;
    height: auto;
}

/* Image wrappers - no forced GPU layers (prevents stale paint on bfcache) */
.img-wrapper,
.card-image-wrapper,
picture {
    /* REMOVED: translateZ(0) causes stale GPU layers on bfcache restore */
    position: relative;
    background-color: #f5f5f5;
}

/* Remove will-change after load for better performance */
.loaded {
    will-change: auto !important;
}

/* ===== Browser-Specific Optimizations ===== */

/* Safari image rendering */
@supports (-webkit-appearance: none) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Chrome/Edge image rendering */
@supports (image-rendering: crisp-edges) {
    img {
        image-rendering: crisp-edges;
    }
}

/* ===== Mobile-Specific Optimizations ===== */

@media (max-width: 768px) {

    /* Reduce animation complexity on mobile */
    .skeleton {
        animation-duration: 2s;
    }

    /* Smaller loading spinners on mobile */
    .loading-spinner {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    /* Optimize aspect ratios for mobile */
    .aspect-16-9 {
        padding-top: 75%;
        /* More square on mobile */
    }
}

/* ===== Print Styles ===== */

@media print {

    .skeleton,
    .loading-spinner,
    .loading-state {
        display: none;
    }

    img {
        opacity: 1 !important;
        filter: none !important;
    }
}