/*
 * Dezenter Fade-Effekt für die Hero-Section.
 * Der Wert --hero-fade-progress wird durch site.js gesteuert.
 */

.hero-section {
    --hero-fade-progress: 0;

    will-change: opacity, transform, -webkit-mask-image, mask-image;

    opacity: calc(1 - var(--hero-fade-progress) * 0.72);

    transform:
        translateY(
            calc(var(--hero-fade-progress) * -4vh)
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 calc(
                100% - var(--hero-fade-progress) * 100%
            ),
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 calc(
                100% - var(--hero-fade-progress) * 100%
            ),
            transparent 100%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/*
 * Verhindert, dass beim fast vollständig verschwundenen
 * Hero noch versehentlich Buttons angeklickt werden.
 */

.hero-section.is-faded {
    pointer-events: none;
}


/*
 * Bei reduzierter Bewegung bleibt die Hero-Section normal.
 */

@media (prefers-reduced-motion: reduce) {
    .hero-section {
        opacity: 1;
        transform: none;

        -webkit-mask-image: none;
        mask-image: none;
    }
}