/* Progressive Loading CSS für Villa Zina */
/* Verbessert die User Experience während des Bildladens */

/* === PLATZHALTER & LOADING STATES === */

/* Gallery Image Platzhalter */
.impressions-grid img[data-src] {
    background: linear-gradient(90deg, #f0f0f0 25%, rgba(255,255,255,0.5) 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    min-height: 250px;
    border-radius: 8px;
}

[data-theme="dark"] .impressions-grid img[data-src] {
    background: linear-gradient(90deg, #2a2a2a 25%, rgba(255,255,255,0.1) 50%, #2a2a2a 75%);
    background-size: 200% 100%;
}

/* Shimmer Animation für Platzhalter */
@keyframes loading-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Header Slider Platzhalter */
.slide:not(.active):not([style*="background-image"]) {
    background: linear-gradient(135deg, 
        rgba(62, 108, 142, 0.3) 0%, 
        rgba(62, 108, 142, 0.1) 50%, 
        rgba(62, 108, 142, 0.3) 100%);
    background-size: 200% 200%;
    animation: header-loading 2s ease-in-out infinite;
}

@keyframes header-loading {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Thumbnail Platzhalter */
.thumbnail:not([style*="background-image"]) {
    background: linear-gradient(45deg, #e0e0e0, #f5f5f5, #e0e0e0);
    background-size: 200% 200%;
    animation: thumbnail-loading 1.8s ease-in-out infinite;
    position: relative;
}

.thumbnail:not([style*="background-image"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(62, 108, 142, 0.3);
    border-top: 2px solid rgba(62, 108, 142, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes thumbnail-loading {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* === SMOOTH TRANSITIONS === */

/* Image Fade-In beim Laden */
.impressions-grid img {
    transition: opacity 0.4s ease-in-out, transform 0.3s ease;
    opacity: 0;
}

.impressions-grid img[src]:not([src$=".svg"]) {
    opacity: 1;
}

/* Slide Smooth Transition */
.slide {
    transition: opacity 1.5s ease-in-out, background-image 0.5s ease;
}

.slide[style*="background-image"] {
    background-size: cover;
    background-position: center;
}

/* Thumbnail Smooth Transition */
.thumbnail {
    transition: background-image 0.3s ease, opacity 0.3s ease;
}

.thumbnail[style*="background-image"]::after {
    display: none;
}

/* === PERFORMANCE OPTIMIERUNGEN === */

/* Verhindere Layout-Shifts */
.impressions-grid .impressions-item {
    aspect-ratio: 4/3;
    overflow: hidden;
}

.impressions-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Optimiere Rendering */
.slide, .thumbnail {
    will-change: background-image;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Mobile Optimierungen */
@media (max-width: 768px) {
    .impressions-grid img[data-src] {
        min-height: 200px;
        animation-duration: 1.2s;
    }
    
    .slide:not(.active):not([style*="background-image"]) {
        animation-duration: 1.5s;
    }
    
    .thumbnail:not([style*="background-image"])::after {
        width: 20px;
        height: 20px;
        border-width: 1.5px;
    }
}

/* === ACCESSIBILITY === */

/* Reduziere Animationen für Benutzer mit Bewegungssensibilität */
@media (prefers-reduced-motion: reduce) {
    .impressions-grid img[data-src],
    .slide:not(.active):not([style*="background-image"]),
    .thumbnail:not([style*="background-image"]) {
        animation: none;
    }
    
    .impressions-grid img[data-src] {
        background: #f0f0f0;
    }
    
    [data-theme="dark"] .impressions-grid img[data-src] {
        background: #2a2a2a;
    }
    
    .thumbnail:not([style*="background-image"])::after {
        animation: none;
        border: 2px solid rgba(62, 108, 142, 0.5);
        border-top-color: rgba(62, 108, 142, 0.8);
    }
    
    /* Progress-Bar ohne Animation für Accessibility */
    .progressive-loading-fill {
        animation: none !important;
        background: var(--color-primary, #3e6c8e) !important;
    }
    
    [data-theme="dark"] .progressive-loading-fill {
        background: #4a7ca3 !important;
    }
}

/* === PROGRESS BAR === */

/* Progress-Bar direkt im Header, 1px hoch, klebend am unteren Rand */
/* WICHTIG: Header-Position wird in style.css definiert - hier nicht überschreiben! */

header .progressive-loading-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px; /* Reduziert auf 1px */
    background: transparent !important; /* Absolut transparenter Hintergrund */
    z-index: 1002;
    opacity: 1;
    width: 100%;
    transition: none;
    overflow: hidden;
    border: none !important; /* Entfernt alle möglichen Borders */
    box-shadow: none !important; /* Entfernt alle Schatten */
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

header .progressive-loading-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%; /* Startet bei 0% und wird progressiv aktualisiert */
    background: var(--color-primary) !important; /* Primary-Farbe */
    transition: width 0.3s ease-out; /* Smooth transition beim Aktualisieren */
    z-index: 1003;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Zusätzliche Sichtbarkeits-Styles */
header .progressive-loading-bar.show {
    opacity: 1;
    display: block;
}

header .progressive-loading-bar.complete {
    opacity: 0;
    transition: opacity 1s ease-out;
}

header .progressive-loading-bar.complete .progressive-loading-fill {
    width: 100% !important;
}

/* Responsive Anpassung für mobile Header */
@media (max-width: 768px) {
    header .progressive-loading-bar {
        height: 1px;
    }
}

/* Dark Theme Support */
[data-theme="dark"] header .progressive-loading-bar {
    background: transparent !important;
}

[data-theme="dark"] header .progressive-loading-fill {
    background: var(--color-primary) !important; /* Primary-Farbe auch im Dark Mode */
}

/* Entferne alle möglichen störenden Elemente im Header */
header::after,
header::before,
header .container::after,
header .container::before {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Stelle sicher, dass keine Schatten oder Borders am Header sind */
header,
header * {
/*    border-bottom: none !important; */
    box-shadow: none !important;
}

/* Zusätzliche Sicherheit: Entferne alle möglichen globalen Schatten */
header .progressive-loading-bar *,
header .progressive-loading-fill * {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Übergeordneter Container-Fix */
header .container {
    border: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* === ERROR STATES === */

/* Fallback für fehlgeschlagene Bildladungen */
.impressions-grid img[src*="data:image/svg"]:not([data-loaded]) {
    position: relative;
}

.impressions-grid img[src*="data:image/svg"]:not([data-loaded])::after {
    content: "📷";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: rgba(62, 108, 142, 0.4);
}

/* High-DPI/Retina Optimierungen */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .slide, .thumbnail {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}