/* Hero image slider — light dark overlay, no crystal glass */

.hero-media-slider,
.page-hero-media-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.crystal-slides {
    position: absolute;
    inset: 0;
}

.crystal-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    will-change: opacity;
}

.crystal-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.crystal-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-media-slider .hero-shade,
.page-hero-media-slider .page-hero-shade {
    z-index: 2;
    /* Soft dark wash — keeps text readable without crystal look */
    background:
        linear-gradient(105deg, rgba(8, 14, 28, 0.72) 0%, rgba(8, 14, 28, 0.48) 52%, rgba(8, 14, 28, 0.38) 100%),
        linear-gradient(0deg, rgba(8, 14, 28, 0.35) 0%, transparent 50%);
}

.crystal-dots {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
}

.crystal-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease, background 0.3s ease;
}

.crystal-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

.hero-crystal .hero-shell,
.page-hero-crystal .page-hero-inner {
    position: relative;
    z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
    .crystal-slide { transition: opacity 0.25s ease; }
}