/* Opt in with data-fade-in. Without JavaScript images remain visible. */
.hero {
    overflow: hidden;
}

img.hero-image-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    filter: blur(12px);
    transform: scale(1.06);
    pointer-events: none;
}

img.hero-image {
    filter: blur(1px);
    transform: scale(1.01);
}

html.image-fade-enabled img[data-fade-in] {
    opacity: 0;
    transition: opacity 700ms ease-out;
}

html.image-fade-enabled img[data-fade-in].is-image-loaded {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    html.image-fade-enabled img[data-fade-in] {
        transition: none;
    }
}