/**
 * Background Slideshow Styles
 * LifeMemoriam - Smooth 10-Second Fades
 */

/* ===================================
   SLIDESHOW CONTAINER
   =================================== */

.slideshow-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none; /* Allow clicks to pass through */
}

/* ===================================
   SLIDESHOW LAYERS (for cross-fade)
   =================================== */

.slideshow-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 10s ease-in-out; /* 10-SECOND SMOOTH FADE */
    will-change: opacity; /* GPU acceleration */
}

/* Active layer is visible */
.slideshow-layer.active {
    opacity: 1;
}

/* Ensure first layer starts visible */
.slideshow-layer-1 {
    opacity: 1;
}

/* ===================================
   SLIDESHOW OVERLAY (for text readability)
   =================================== */

.slideshow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

/* ===================================
   SECTION POSITIONING
   =================================== */

/* Ensure sections with slideshows are positioned */
.hero,
.memorial-types,
.digital-granite,
.features,
#how-it-works,
.testimonials,
.cta-section {
    position: relative;
    overflow: hidden; /* Prevent slideshow overflow */
}

/* Ensure content sits above slideshow */
.hero > *:not(.slideshow-container),
.memorial-types > *:not(.slideshow-container),
.digital-granite > *:not(.slideshow-container),
.features > *:not(.slideshow-container),
#how-it-works > *:not(.slideshow-container),
.testimonials > *:not(.slideshow-container),
.cta-section > *:not(.slideshow-container) {
    position: relative;
    z-index: 2;
}

/* ===================================
   PERFORMANCE OPTIMIZATIONS
   =================================== */

/* Use GPU for transitions */
.slideshow-layer,
.slideshow-overlay {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Prevent repaint on scroll */
.slideshow-container {
    transform: translate3d(0, 0, 0);
}

/* ===================================
   ACCESSIBILITY
   =================================== */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .slideshow-layer {
        transition: none !important;
        opacity: 1 !important;
    }
    
    .slideshow-layer:not(.active) {
        display: none;
    }
}

/* ===================================
   MOBILE OPTIMIZATIONS
   =================================== */

@media (max-width: 768px) {
    /* Slightly faster transitions on mobile (better performance) */
    .slideshow-layer {
        transition: opacity 8s ease-in-out;
    }
    
    /* Ensure sections have minimum height on mobile */
    .hero {
        min-height: 100vh;
    }
    
    .memorial-types,
    .digital-granite,
    #how-it-works,
    .testimonials {
        min-height: 400px;
    }
}

@media (max-width: 480px) {
    /* Even faster on small mobile (performance) */
    .slideshow-layer {
        transition: opacity 6s ease-in-out;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
    .slideshow-container,
    .slideshow-layer,
    .slideshow-overlay {
        display: none !important;
    }
}

/* ===================================
   LOADING STATE
   =================================== */

/* Optional: Show loading indicator while images preload */
.slideshow-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    z-index: -1;
}

/* Hide loading background once first image loads */
.slideshow-layer.active ~ .slideshow-container::before {
    display: none;
}

/* ===================================
   SPECIFIC SECTION TWEAKS
   =================================== */

/* Hero section - full viewport */
.hero {
    min-height: 100vh;
}

/* Digital Granite - maintain height */
.digital-granite {
    min-height: 600px;
}

/* Testimonials - comfortable height */
.testimonials {
    min-height: 500px;
}

/* CTA - powerful finish */
.cta-section {
    min-height: 400px;
}

/* ===================================
   FALLBACK for NO-JS
   =================================== */

/* If JavaScript fails, show first background color */
.no-js .slideshow-container {
    background: linear-gradient(135deg, #002D5B 0%, #003d7a 100%);
}

.no-js .slideshow-layer {
    display: none;
}