@layer components {
    .splashscreen {
        --splashcreen-height: max(100vh, 40rem);
        --splash-text-height: min(12rem, 20vh);
        --splash-image-gutter: var(--spacing-6);
        --splash-text-padding-bottom: var(--spacing-6);
        padding: 0;
        gap: 0;
        width: 100%;
        height: var(--splashcreen-height);
    }

    .splash-image-block {
        height: calc(
            var(--splashcreen-height) - var(--splash-text-height) -
                var(--splash-image-gutter) - var(--splash-text-padding-bottom)
        );
        background-color: var(--color-surface);
        border-radius: var(--radius-lg);
        margin-top: var(--splash-image-gutter);
        margin-left: var(--splash-image-gutter);
        margin-right: var(--splash-image-gutter);

        background-image: url("/assets/images/backgrounds/downsampled/10-4.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;

        > .splash-box-screenshot {
            --_offset_x: 0rem;
            --_offset_y: calc(var(--splashcreen-height) * -0.06);
            --_card_height: min(calc(var(--splashcreen-height) * 0.6), 60vw);
            --_card_blur: 0px;
            --_card_zindex: 100;
            --_card_scale: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(
                    calc(-50% + var(--_offset_x)),
                    calc(-50% - var(--_offset_y))
                )
                scale(var(--_card_scale));
            z-index: var(--_card_zindex);
            height: var(--_card_height);
            filter: blur(var(--_card_blur));

            width: auto !important;
            max-width: none !important;
            min-width: 0;

            max-width: none;
            width: auto;
            overflow: visible;

            transition:
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.4s ease,
                z-index 0.1s;

            &:nth-child(2) {
                --_offset_x: calc(var(--splashcreen-height) * -0.2);
                --_offset_y: calc(var(--splashcreen-height) * 0.05);
                --_card_height: min(
                    calc(var(--splashcreen-height) * 0.5),
                    50vw
                );
                --_card_blur: 4px;
                --_card_zindex: 95;
            }

            &:nth-child(3) {
                --_offset_x: calc(var(--splashcreen-height) * 0.2);
                --_offset_y: calc(var(--splashcreen-height) * 0.1);
                --_card_height: min(
                    calc(var(--splashcreen-height) * 0.5),
                    50vw
                );
                --_card_blur: 8px;
                --_card_zindex: 90;
            }

            &:hover {
                --_card_blur: 0px;
                --_card_scale: 1.2;
                z-index: 110;
            }

            .splash-img {
                height: 100%;
                width: auto;
                max-width: none !important;
                object-fit: cover;
                aspect-ratio: auto;
                overflow: visible;
            }
        }
    }

    .splash-text-block {
        height: calc(
            var(--splash-text-height) + var(--splash-text-padding-bottom)
        );
        display: flex;
        padding: 0 var(--splash-image-gutter) var(--splash-text-padding-bottom);
        width: 100%;
        max-width: var(--content-max-width);
        margin: 0 auto;
    }

    .splash-inline-logo {
        --_logo-size: min(4rem, 8cqi);
        width: var(--_logo-size);
        height: var(--_logo-size);
        display: inline;
        margin-right: var(--spacing-2);
        position: relative;
        top: min(1rem, 2cqi);
    }

    .splash-title {
        font-size: min(var(--font-size-5xl), 5cqi);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
        line-height: max(1.2em, 2.5rem);
        margin: auto 0;

        strong {
            font-weight: var(--font-weight-bold);
            color: var(--color-text);
        }
    }

    /* Below the fold */

    .splash-cta {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-12);
        justify-items: top;
        margin: 0 auto;
    }

    .splash-play-video {
        display: flex;
        flex-direction: row;

        svg {
            height: 1rem;
            fill: var(--color-primary);
        }
        &:hover {
            background-color: var(--color-primary);
            color: var(--color-white);
            svg {
                fill: var(--color-white);
            }
        }
    }
}