/* Hero Carousel Image Quality Enhancement */

/* Ultra High Quality Image Rendering */
.hero-carousel .hero-background-image {
    /* Force maximum quality rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;

    /* Prevent blurriness on transforms */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    /* GPU acceleration for smoother rendering */
    will-change: transform;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    /* Full width and height coverage with extra for Ken Burns */
    width: 115%; /* Extra width for pan effect */
    height: 115%; /* Extra height for pan effect */
    min-height: 115%;
    object-fit: cover;
    object-position: center;

    /* Remove any filters that might reduce quality - they'll be added conditionally by JS */
    filter: none;
    -webkit-filter: none;

    /* Position for Ken Burns effect - centered to avoid grey gaps */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ===== KEN BURNS EFFECT ===== */
/* Smooth, subtle zoom and pan animation */
@keyframes kenBurnsZoomPan {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-52%, -51%) scale(1.08);
    }
    100% {
        transform: translate(-48%, -49%) scale(1.05);
    }
}

@keyframes kenBurnsPanRight {
    0% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        transform: translate(-53%, -50%) scale(1.1);
    }
}

@keyframes kenBurnsPanLeft {
    0% {
        transform: translate(-53%, -50%) scale(1.05);
    }
    100% {
        transform: translate(-47%, -50%) scale(1.1);
    }
}

@keyframes kenBurnsZoomIn {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.12);
    }
}

/* Apply Ken Burns to active slides only */
.hero-carousel .carousel-item.active .hero-background-image {
    animation: kenBurnsZoomPan 20s ease-in-out infinite alternate;
}

/* Alternate animations for variety */
.hero-carousel .carousel-item:nth-child(2n).active .hero-background-image {
    animation: kenBurnsPanRight 18s ease-in-out infinite alternate;
}

.hero-carousel .carousel-item:nth-child(3n).active .hero-background-image {
    animation: kenBurnsPanLeft 22s ease-in-out infinite alternate;
}

.hero-carousel .carousel-item:nth-child(4n).active .hero-background-image {
    animation: kenBurnsZoomIn 16s ease-in-out infinite alternate;
}

/* Disable Ken Burns if data attribute is set */
.hero-carousel[data-ken-burns="false"] .carousel-item.active .hero-background-image,
.hero-carousel[data-ken-burns="false"] .carousel-item .hero-background-image {
    animation: none !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    transform: translate(0, 0) !important;
}

/* Pause animation during transitions to prevent jank */
.hero-carousel .carousel-item-next .hero-background-image,
.hero-carousel .carousel-item-prev .hero-background-image,
.hero-carousel .carousel-item.active.carousel-item-start .hero-background-image,
.hero-carousel .carousel-item.active.carousel-item-end .hero-background-image {
    animation-play-state: paused;
}

/* CRITICAL: Disable ALL visual effects during transitions for slide/zoom to prevent flash */
.hero-carousel.slide .hero-background-image,
.hero-carousel.carousel-zoom .hero-background-image {
    transition: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

/* Fade effect can have smooth opacity transitions - managed by transitions-fix.css */
.hero-carousel.carousel-fade .hero-background-image {
    /* transitions handled by hero-carousel-transitions-fix.css */
}

/* High Quality Mode (activated via admin setting) */
.hero-carousel.quality-high .hero-background-image {
    image-rendering: -webkit-optimize-contrast;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hero-carousel.quality-ultra .hero-background-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: bicubic;

    /* Force browser to use best quality */
    image-orientation: from-image;

    /* Prevent compression artifacts */
    -webkit-filter: contrast(1.02) brightness(1.01);
    filter: contrast(1.02) brightness(1.01);
}

/* Container optimizations for full coverage */
.hero-carousel .hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Ensure crisp rendering */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Full width section container */
.hero-carousel-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

.hero-carousel-section .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Carousel inner full width */
.hero-carousel .carousel-inner {
    width: 100%;
    height: 100%;
}

.hero-carousel .carousel-item {
    width: 100%;
    height: 100%;
}

/* Hero slide full coverage */
.hero-carousel .hero-slide {
    width: 100%;
    height: 75vh;
    min-height: 700px;
    position: relative;
    background: transparent !important;
}

/* Progressive enhancement for loaded images */
/* Note: All transition timing controlled by hero-carousel-transitions-fix.css */
.hero-background-image.quality-enhanced {
    /* JS will add this class after enhancement complete */
    /* No visual changes here - prevents conflicts */
}

.hero-background-image.loading-quality {
    /* JS temporary class during quality processing */
    /* No visual changes here - prevents conflicts */
}

/* Sharpness enhancement for specific browsers */
@supports (image-rendering: -webkit-optimize-contrast) {
    .hero-carousel.quality-ultra .hero-background-image {
        image-rendering: -webkit-optimize-contrast;
    }
}

@supports (image-rendering: crisp-edges) {
    .hero-carousel.quality-ultra .hero-background-image {
        image-rendering: crisp-edges;
    }
}

/* Prevent image degradation on zoom/transform */
.hero-carousel .carousel-item.active .hero-background-image {
    image-rendering: -webkit-optimize-contrast;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Mobile optimizations - maintain quality */
@media (max-width: 768px) {
    .hero-carousel .hero-slide {
        height: 60vh;
        min-height: 500px;
    }

    /* Maintain quality even on mobile */
    .hero-carousel .hero-background-image {
        image-rendering: -webkit-optimize-contrast;
    }
}

@media (max-width: 576px) {
    .hero-carousel .hero-slide {
        height: 50vh;
        min-height: 400px;
    }
}

/* Retina display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-carousel .hero-background-image {
        /* Force high DPI rendering */
        image-rendering: -webkit-optimize-contrast;
        -webkit-font-smoothing: subpixel-antialiased;
    }
}

/* ===== PARALLAX EFFECT ===== */
/* Parallax for content and overlay layers */
.hero-carousel .hero-content {
    position: relative;
    z-index: 10;
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.3s ease-out;
}

.hero-carousel .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.2s ease-out;
}

/* Parallax scroll effect - applied via JS */
.hero-carousel .carousel-item.active .hero-content.parallax-active {
    transform: translateY(var(--parallax-content-y, 0));
}

.hero-carousel .carousel-item.active .hero-overlay.parallax-active {
    transform: translateY(var(--parallax-overlay-y, 0));
}

/* Ensure image container allows overflow for Ken Burns */
.hero-carousel .hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translateZ(0);
}

/* 4K and high resolution displays */
@media (min-width: 2560px) {
    .hero-carousel .hero-slide {
        height: 70vh;
        min-height: 800px;
    }
}

/* Ultra-wide displays */
@media (min-width: 3440px) {
    .hero-carousel .hero-slide {
        height: 65vh;
        min-height: 900px;
    }
}

/* Loading state for quality enhancement */
.hero-background-image[data-quality-loading="true"] {
    filter: blur(2px);
    transition: filter 0.4s ease-in-out;
}

.hero-background-image[data-quality-loading="false"] {
    filter: none;
}

/* Quality indicator badge (for debugging/admin) */
.hero-carousel.show-quality-indicator .carousel-item::after {
    content: attr(data-quality-mode);
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 4px;
    z-index: 1000;
    pointer-events: none;
}