/*.carousel,
.carousel-inner,
.carousel-item {
    height: 90vh;
}*/
.carousel, .carousel-inner, .carousel-item {
    height: 90vh;
}

/* Smooth fading without flash */
.carousel-item {
    opacity: 0;
    transition: opacity 1.3s ease-in-out;
    position: relative;
}
.carousel-item.active {
    opacity: 1;
}

/* Fix Bootstrap fade flicker */
.carousel-fade .carousel-item {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* --- CRITICAL FIX: eliminate splash/white flash --- */
.carousel-item img {
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transform: none !important;

    width: 100%;
    height: 100%;
    object-fit: cover;

    will-change: opacity, transform, filter, clip-path;
}

/* ======================================================
   LUXURY HOTEL ANIMATIONS (triggered AFTER fade)
====================================================== */

.animate-zoom img {
    animation: zoomEffect 9s ease-in-out forwards;
}
@keyframes zoomEffect {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

.animate-parallax img {
    animation: parallaxZoom 12s ease-in-out forwards;
}
@keyframes parallaxZoom {
    0%   { transform: scale(1) translateX(0); }
    100% { transform: scale(1.12) translateX(-35px); }
}

.animate-blur-sharp img {
    animation: blurSharp 2.5s ease-out forwards;
}
@keyframes blurSharp {
    0%   { filter: blur(12px); opacity: 0; }
    100% { filter: blur(0); opacity: 1; }
}

.animate-lift img {
    animation: liftFade 1.8s ease-out forwards;
}
@keyframes liftFade {
    0%   { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-vertical-wipe img {
    animation: verticalWipe 1.7s ease-out forwards;
}
@keyframes verticalWipe {
    0%   { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0 0 0 0); }
}

.animate-glass-slide img {
    animation: glassSlide 1.7s ease-out forwards;
}
@keyframes glassSlide {
    0% { transform: translateX(60px); filter: blur(8px); opacity: 0; }
    100% { transform: translateX(0); filter: blur(0); opacity: 1; }
}

.animate-split img {
    animation: splitReveal 1.8s ease-out forwards;
}
@keyframes splitReveal {
    0%   { clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

.animate-tilt img {
    animation: tiltFade 2s ease-out forwards;
}
@keyframes tiltFade {
    0%   { opacity: 0; transform: scale(1.05) rotateZ(1deg); }
    100% { opacity: 1; transform: scale(1) rotateZ(0); }
}

.animate-mask img {
    animation: maskReveal 2s ease-out forwards;
}
@keyframes maskReveal {
    0%   { mask-position: 100% 0; -webkit-mask-position: 100% 0; }
    100% { mask-position: 0 0;    -webkit-mask-position: 0 0; }
}

/* Caption styling */
.carousel-caption {
    bottom: 40px;
    left: 40px;
    right: auto;
    text-align: left;
    background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.55));
    padding: 1.2rem 1.5rem;
    border-radius: 8px;
    max-width: 480px;
}

.carousel-caption h5 {
    font-size: 2rem;
    color: #fff;
}

.carousel-caption p {
    color: #eee;
    font-size: 1.1rem;
}

/* Dots */
.carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
}

@media (max-width: 768px) {
    .carousel,
    .carousel-inner,
    .carousel-item { height: 55vh; }
}