/* Parent container must hold its dimensions */
.hero-morph-slider {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Both slides share exactly the same position and dimensions */
.hero-morph-slider .hero-morph-slide-1,
.hero-morph-slider .hero-morph-slide-2 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    margin: 0 !important;
    /* Elegant, slow 2s opacity crossfade */
    transition: opacity 2s ease-in-out !important;
    will-change: opacity;
}

/* Slide 1 stays on bottom, always fully opaque */
.hero-morph-slider .hero-morph-slide-1 {
    z-index: 1;
    opacity: 1 !important;
}

/* Slide 2 layers on top, starts transparent */
.hero-morph-slider .hero-morph-slide-2 {
    z-index: 2;
    opacity: 0 !important;
}

/* Active state for slide 2 fading in over slide 1 */
.hero-morph-slider.show-slide-2 .hero-morph-slide-2 {
    opacity: 1 !important;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .hero-morph-slider .hero-morph-slide-1,
    .hero-morph-slider .hero-morph-slide-2 {
        transition: none !important;
    }
    .hero-morph-slider .hero-morph-slide-2 {
        display: none !important; /* Force slide 1 only */
    }
}