.app-Intro {
    align-items: center;
    background: linear-gradient(168deg, var(--app-background--dark) 30%, transparent 80%);
    display: grid;
    overflow: clip;
    position: relative;
}

.js .app-Intro {
    opacity: 0;
}

.app-Intro.sca-animate {
    transition-delay: 300ms;
    transition: opacity 500ms;
}

.app-Intro.sca-visible {
    opacity: 1;
}

.app-Intro > * {
    grid-column: 1;
    grid-row: 1;
    position: relative;
}

.app-Intro-text {
    font-size: clamp(1rem, 3vw, 2.5rem);
    color: white;
    line-height: 1.2;
    margin: 0;
    padding-left: max(2rem, max(5%, calc((100vw - 1102px) / 2 + 4rem)));
    padding-top: 10%;
    font-style: italic;
    width: fit-content;
}

.app-Intro-text > * {
    position: relative;
    z-index: 2;
}

.app-Intro-text::after {
    --width: 20rem;
    background: linear-gradient(90deg, var(--app-color-nightblue--dark) calc(100% - var(--width)), transparent 100%);
    bottom: -50vh;
    content: '';
    mix-blend-mode: darken;
    opacity: 0.7;
    right: 0;
    position: absolute;
    top: -50vh;
    transform: translateX(var(--width));
    width: calc(100% + var(--width));
}

@media (min-width: 768px) {
    .app-Intro-text {
        padding-top: 10rem;
    }
}

.app-Intro-fg {
    align-self: flex-end;
    height: auto;
    justify-self: flex-end;
    object-fit: contain;
    object-position: right center;
    max-width: calc(50% + 500px);
    width: 100%;
}