.complex-parallax-section {
    view-timeline-name: --complexParallaxSectionTimeline;

    position: relative;
    height: 100vh;
    overflow: hidden;

    &::before {
        content: '';
        width: 100%;
        height: 100%;
        background-image: url('../images/sqsp-logo.svg');
        background-size: 20vmin;
        background-position: center;
        background-attachment: fixed;
        filter: blur(1vmin) brightness(0.15);
        position: absolute;
        top: 0;
        left: 0;
    }

    &::after {
        content: 'Staggered parallax';
        font-size: 10vw;
        line-height: 1.3ch;
        color: var(--light-background-color);
        font-weight: normal;
        text-align: center;
        text-shadow:
            -0.1vmin -0.1vmin 0.3vmin var(--background-color),
            0.1vmin 0.1vmin 0.3vmin var(--background-color),
            0.1vmin -0.1vmin 0.3vmin var(--background-color),
            -0.1vmin 0.1vmin 0.3vmin var(--background-color);
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 5;
        transform: translate(-50%, -50%);
    }

    & .subject {
        position: absolute;
        top: 50%;
        aspect-ratio: 1;
    }

    & .distance-1 {
        z-index: 3;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) scale(3);
        filter: blur(0.1vmin) brightness(0.8);

        animation-timeline: --complexParallaxSectionTimeline;
        animation-name: complexParallaxAnimation;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-duration: 1ms;
        animation-range-start: entry -150%;
        animation-range-end: exit 300%;

    }

    & .distance-2 {
        z-index: 2;
        left: 35vmin;
        transform: translate3d(-50%, -50%, 0) scale(2);
        filter: blur(0.33vmin) brightness(0.6);

        animation-timeline: --complexParallaxSectionTimeline;
        animation-name: complexParallaxAnimation;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-duration: 1ms;
        animation-range-start: entry -50%;
        animation-range-end: exit 150%;

    }

    & .distance-3 {
        z-index: 1;
        right: 30vmin;
        transform: translate3d(-50%, -50%, 0) scale(1);
        filter: blur(0.66vmin) brightness(0.4);

        animation-timeline: --complexParallaxSectionTimeline;
        animation-name: complexParallaxAnimation;
        animation-fill-mode: both;
        animation-timing-function: linear;
        animation-duration: 1ms;
        animation-range-start: entry 0%;
        animation-range-end: exit 100%;

    }
}

@keyframes complexParallaxAnimation {
    from {
        top: 0%;
    }

    to {
        top: 100%;
    }
}