@use '../abstract/variables' as *;
@use '../abstract/mixin' as *;

.intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: $color-background;
    color: $color-text;

    background-image: url('/textures/noise.png');

    .wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        opacity: 0;
    }

    .headings {
        .title,
        .subtitle {
            text-align: center;
        }

        .title {
            font-size: clamp(3.5rem, 6vw + 1rem, 8rem);
        }

        .subtitle {
            font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
        }
    }

    .intro-wrapper {
        margin-block: 24px;
        position: relative;

        .introduction {
            margin-block-end: 16px;
        }
    }

    .loader {
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .loading {
            display: flex;
        }

        .loading-text {
            text-transform: uppercase;
            position: relative;
            display: flex;
            align-items: center;

            &::after {
                content: '';
                width: 24px;
                height: 1px;
                margin-inline: 4px;
                background-color: $color-text;
            }
        }

        .loading-text,
        .loading-progress {
            font-family: $family-sans-serif;
            font-size: 1.6rem;
        }

        .enter-button {
            padding: 12px 24px;
            border: 1px solid $color-text;
            border-radius: 10em;
            text-transform: uppercase;

            display: none;
            opacity: 0;

            font-family: $family-serif;
            line-height: 1;

            &::after {
                content: ' →';
            }

            &:hover {
                background-color: $color-strong;
            }
        }
    }

    .mobile-warnings {
        display: none;
        font-size: 0.9rem;

        @include touchscreen {
            display: block;
        }
    }
}
