/* Hero Carousel Transitions Fix */
/* This file controls ALL transition behavior - quality-boost.css only handles image rendering quality */

/* Custom easing functions for ultra-smooth transitions */
:root {
    --hero-transition-duration: 800ms;
    --hero-easing-smooth: cubic-bezier(0.4, 0.0, 0.2, 1); /* Material Design smooth */
    --hero-easing-enter: cubic-bezier(0.0, 0.0, 0.2, 1); /* Enter animation */
    --hero-easing-exit: cubic-bezier(0.4, 0.0, 1, 1); /* Exit animation */
}

/* Prevent flash during transitions - base for all effects */
.hero-carousel .carousel-item {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ===== FADE TRANSITIONS ===== */
/* Smooth fade without flashing - all items stay visible during transition */
.hero-carousel.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity var(--hero-transition-duration) var(--hero-easing-smooth);
    transform: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;
    visibility: hidden; /* Hide completely when opacity is 0 */
}

.hero-carousel.carousel-fade .carousel-item:first-child {
    position: relative;
}

.hero-carousel.carousel-fade .carousel-item.active {
    opacity: 1;
    z-index: 2;
    background: transparent !important;
    position: relative;
    visibility: visible;
}

/* Items coming in - start invisible, become visible */
.hero-carousel.carousel-fade .carousel-item-next.carousel-item-start,
.hero-carousel.carousel-fade .carousel-item-prev.carousel-item-end {
    opacity: 1;
    z-index: 3; /* Above active during transition */
    background: transparent !important;
    visibility: visible;
    transition: opacity var(--hero-transition-duration) var(--hero-easing-enter);
}

/* Items waiting - keep invisible */
.hero-carousel.carousel-fade .carousel-item-next:not(.carousel-item-start),
.hero-carousel.carousel-fade .carousel-item-prev:not(.carousel-item-end) {
    opacity: 0;
    z-index: 0;
    background: transparent !important;
    visibility: hidden;
}

/* Active items going out - fade smoothly */
.hero-carousel.carousel-fade .active.carousel-item-start,
.hero-carousel.carousel-fade .active.carousel-item-end {
    opacity: 0;
    z-index: 1; /* Below incoming item */
    transition: opacity var(--hero-transition-duration) var(--hero-easing-exit);
    background: transparent !important;
    visibility: visible; /* Keep visible during fade out */
}

/* ===== SLIDE TRANSITIONS ===== */
/* Slide transition - ensure default Bootstrap behavior works */
.hero-carousel.slide .carousel-item {
    opacity: 1 !important;
    transition: transform 0.6s ease-in-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: relative;
}

/* ===== ZOOM TRANSITIONS ===== */
/* Smooth zoom with fade - no flashing, gradual scale and opacity changes */

/* Base state for all zoom carousel items */
.hero-carousel.carousel-zoom .carousel-item {
    opacity: 0;
    transform: scale(1.08); /* Slightly larger initial scale for smoother effect */
    transition: opacity var(--hero-transition-duration) var(--hero-easing-smooth),
                transform var(--hero-transition-duration) var(--hero-easing-smooth);
    background: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden; /* Hide completely when not visible */
}

/* CRITICAL: Active item must be relative to maintain carousel height */
.hero-carousel.carousel-zoom .carousel-item.active {
    position: relative !important;
    opacity: 1;
    transform: scale(1);
    z-index: 2;
    visibility: visible;
    transition: opacity var(--hero-transition-duration) var(--hero-easing-smooth),
                transform var(--hero-transition-duration) var(--hero-easing-smooth);
}

/* Next/Prev items becoming active (transitioning in) - zoom in smoothly */
.hero-carousel.carousel-zoom .carousel-item-next.carousel-item-start,
.hero-carousel.carousel-zoom .carousel-item-prev.carousel-item-end {
    position: absolute;
    opacity: 1;
    transform: scale(1);
    z-index: 3; /* Above active during transition */
    visibility: visible;
    transition: opacity var(--hero-transition-duration) var(--hero-easing-enter),
                transform var(--hero-transition-duration) var(--hero-easing-enter);
}

/* Active items transitioning out - zoom out smoothly while fading */
.hero-carousel.carousel-zoom .active.carousel-item-start,
.hero-carousel.carousel-zoom .active.carousel-item-end {
    position: absolute !important;
    opacity: 0;
    transform: scale(1.08); /* Zoom out while fading */
    z-index: 1; /* Below incoming item */
    visibility: visible; /* Keep visible during transition */
    transition: opacity var(--hero-transition-duration) var(--hero-easing-exit),
                transform var(--hero-transition-duration) var(--hero-easing-exit);
}

/* Items waiting to transition - hidden */
.hero-carousel.carousel-zoom .carousel-item-next:not(.carousel-item-start),
.hero-carousel.carousel-zoom .carousel-item-prev:not(.carousel-item-end) {
    position: absolute;
    opacity: 0;
    transform: scale(1.08);
    z-index: 0;
    visibility: hidden;
}

.hero-carousel.slide .carousel-item.active {
    opacity: 1 !important;
}

.hero-carousel.slide .carousel-item-next,
.hero-carousel.slide .carousel-item-prev {
    display: flex;
    opacity: 1 !important;
}

.hero-carousel.slide .carousel-item-next.carousel-item-start,
.hero-carousel.slide .carousel-item-prev.carousel-item-end {
    transform: translateX(0);
}

.hero-carousel.slide .carousel-item-next:not(.carousel-item-start),
.hero-carousel.slide .active.carousel-item-end {
    transform: translateX(100%);
}

.hero-carousel.slide .carousel-item-prev:not(.carousel-item-end),
.hero-carousel.slide .active.carousel-item-start {
    transform: translateX(-100%);
}

/* Fix for carousel-inner positioning */
.hero-carousel .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Special handling for zoom carousel-inner - NO fixed min-height */
.hero-carousel.carousel-zoom .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-carousel .carousel-inner > .carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
}

/* Override for zoom - items maintain relative positioning for proper height calculation */
.hero-carousel.carousel-zoom .carousel-inner > .carousel-item {
    float: none;
    margin-right: 0;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    /* Position is controlled by specific zoom rules above */
}

.hero-carousel.carousel-fade .carousel-inner > .carousel-item {
    float: none;
    transition: opacity 0.6s ease-in-out;
}

.hero-carousel .carousel-inner > .carousel-item.active,
.hero-carousel .carousel-inner > .carousel-item-next,
.hero-carousel .carousel-inner > .carousel-item-prev {
    display: flex;
}

/* Prevent image flash - images should NEVER change opacity/filter during item transitions */
.hero-carousel .hero-background-image {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: auto;
    /* NO transitions here - would cause flash during carousel-item state changes */
    opacity: 1 !important; /* Always full opacity - let parent control visibility */
}

/* Ensure smooth transition for overlay (not image) */
.hero-carousel .hero-overlay {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: none;
    opacity: var(--hero-overlay-opacity, 0.6) !important; /* Consistent overlay opacity */
}

/* Prevent white flash between slides */
.hero-carousel .carousel-inner {
    background: #000; /* Dark background prevents white flash */
}

/* Smooth content fade - text and buttons fade with the slide */
.hero-carousel .hero-content {
    transition: opacity 0.8s ease-in-out;
    opacity: 1;
}

/* Hide content during transition to prevent text overlap */
.hero-carousel .carousel-item-start .hero-content,
.hero-carousel .carousel-item-end .hero-content {
    opacity: 0.3; /* Subtle fade during transition */
    transition: opacity 0.4s ease-in-out;
}

.hero-carousel .carousel-item.active .hero-content {
    opacity: 1;
    transition: opacity 0.8s ease-in-out 0.2s; /* Slight delay for smoother appearance */
}