/* Loading shimmer for images, background images and the hero video.
   Classes are added/removed by js/shimmer.js. */

:root {
    --bs-shimmer-base: #eceff3;
    --bs-shimmer-glint: rgba(255, 255, 255, 0.65);
    --bs-shimmer-dark-base: #1f2a36;
    --bs-shimmer-dark-glint: rgba(255, 255, 255, 0.25);
    --bs-shimmer-speed: 1.4s;
}

@keyframes bs-shimmer {
    0% {
        background-position: -150% 0;
    }
    100% {
        background-position: 250% 0;
    }
}

/* <img> while loading: grey block with a moving highlight behind the image */
img.bs-shimmer {
    background-color: var(--bs-shimmer-base);
    background-image: linear-gradient(100deg, transparent 30%, var(--bs-shimmer-glint) 50%, transparent 70%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: bs-shimmer var(--bs-shimmer-speed) ease-in-out infinite;
}

/* Sections using data-background: highlight sweeps over the section until its image is ready */
.bs-shimmer-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(100deg, transparent 30%, var(--bs-shimmer-glint) 50%, transparent 70%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    opacity: 0.5;
    animation: bs-shimmer var(--bs-shimmer-speed) ease-in-out infinite;
}

/* Hero video: dark placeholder with a soft highlight, then the video fades in */
.slider-area.has-video-bg .slider-video-bg.bs-shimmer-video {
    background-color: var(--bs-shimmer-dark-base);
    background-image: linear-gradient(100deg, transparent 30%, var(--bs-shimmer-dark-glint) 50%, transparent 70%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: bs-shimmer var(--bs-shimmer-speed) ease-in-out infinite;
}

.slider-area.has-video-bg .slider-video {
    transition: opacity 0.6s ease;
}

.slider-area.has-video-bg .slider-video-bg.bs-shimmer-video .slider-video {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    img.bs-shimmer,
    .bs-shimmer-bg::after,
    .slider-area.has-video-bg .slider-video-bg.bs-shimmer-video {
        animation: none;
    }
}