#headline {
    position: absolute;
    z-index: 2;
    height: 460vh;
    pointer-events: none;

    .container {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        h1 {
            position: absolute;
            top: 50%;
            left: 0;
            opacity: 1;
            transform: translateY(-50%);
            overflow: hidden;
            color: var(--primary);
            font-size: 20.6vw;
            font-weight: 800;
            pointer-events: all;

            span {
                filter: blur(0);
            }
        }
    }
}

#start {
    height: 220vh;
    z-index: 1;

    .container {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        h2 {
            font-size: max(1vw, 18px);
            font-weight: 300;

            &:not(:first-child) {
                margin-top: 10px;
            }
        }

        .content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: row nowrap;

            &>.part {
                flex: 1;
                padding: 3px;
                font-size: max(0.7vw, 12px);
                font-weight: 300;
                border-right: 1px solid color-mix(in srgb, var(--primary), transparent 60%);
                transform: translateY(0);

                a {
                    display: inline-block;
                    margin: 0 -5px;
                    padding: 5px;
                }

                &.text {
                    order: 2;
                }

                &.projects {
                    order: 1;
                }

                &.links {
                    order: 3;
                }
            }
        }
    }
}

#drone,
#timelaps {
    position: relative;
    height: 180vh;
    opacity: 0;

    .container {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;

        h2 {
            font-size: max(1vw, 18px);
            font-weight: 300;
            margin-top: calc(50vh + 40px);

            &:not(:first-child) {
                margin-top: 10px;
            }
        }

        video {
            --video-mask-size: 50%;
            --video-mask-padding: calc((100% - var(--video-mask-size)) / 2);

            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            object-fit: cover;
            object-position: center;
            clip-path: rect(var(--video-mask-padding) calc(var(--video-mask-padding) + var(--video-mask-size)) calc(var(--video-mask-padding) + var(--video-mask-size)) var(--video-mask-padding) round 50px);
        }
    }

    .anchor {
        position: absolute;
        top: 50vh;
    }
}

#drone {
    z-index: 1;
    margin-top: -80vh;
}

#timelaps {
    z-index: 0;
    margin-top: -40vh;

    .anchor {
        position: absolute;
        top: 100vh;
    }
}