/* Onboarding Intro */
.onboarding-scene {
    --intro-fade: 600ms;
    /* Must outlast the full JS run (about 8s plus page load); only fires if onboarding-intro.js never ends the intro */
    --intro-failsafe-delay: 12s;

    > * {
        grid-area: 1 / 1;
    }

    > [data-onboarding-form] {
        transition: opacity var(--intro-fade) ease;
    }

    > .onboarding-intro-card {
        transition:
            opacity var(--intro-fade) ease,
            visibility 0s var(--intro-fade);
    }

    &.is-intro > [data-onboarding-form] {
        opacity: 0;
        visibility: hidden;
        animation: intro-failsafe-reveal 0.01s var(--intro-failsafe-delay) forwards;
    }

    &.is-intro > .onboarding-intro-card {
        animation: intro-failsafe-hide 0.01s var(--intro-failsafe-delay) forwards;
    }

    &:not(.is-intro) > .onboarding-intro-card {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes intro-failsafe-reveal {
    to {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes intro-failsafe-hide {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

.onboarding-scene .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.onboarding-intro-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.875rem;
    width: min(100%, 55.9375rem);
    min-height: 40.9375rem;
    padding: 1.5rem 1rem;
    border-radius: 1.375rem;
    background-color: var(--white-clr);
    box-shadow: var(--shadow-lg);
    font-family: var(--ff-inter);

    @media (width <= 768px) {
        min-height: 28rem;
        gap: 1.5rem;
    }
}

.onboarding-intro-bubble {
    min-width: 6rem;
    min-height: 3.9375rem;
    max-width: 100%;
    padding: 1rem 1.75rem;
    border-width: 0.0938rem;
    border-color: var(--gray-clr-200);
    border-radius: 1.25rem;
    font-size: 1.25rem;
    font-weight: var(--fw-500);
    line-height: 1.75rem;
    color: var(--midnight-blue-clr-700);
    text-align: center;

    &::after {
        width: 1.75rem;
        height: 0.875rem;
    }

    @media (width <= 768px) {
        width: min(100%, 22rem);
        min-height: 5.25rem;
        display: grid;
        place-items: center;
        padding-inline: 1rem;
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

.onboarding-intro-owl {
    width: min(18.4375rem, 70%);
    aspect-ratio: 295 / 284;
    margin: 0;

    img,
    .mascot-lottie {
        height: 100%;
        object-fit: contain;
    }
}

.onboarding-intro-skip {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: 100vmax;
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-200);
    color: var(--gray-clr-400);
    cursor: pointer;

    &:hover {
        color: var(--gray-clr-600);
    }

    &:focus-visible {
        outline: 0.125rem solid var(--primary-clr-400);
        outline-offset: 0.125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-scene.is-intro {
        > .onboarding-intro-card {
            display: none;
        }

        > [data-onboarding-form] {
            opacity: 1;
            visibility: visible;
        }
    }

    .onboarding-scene > :is([data-onboarding-form], .onboarding-intro-card) {
        transition: none;
    }
}
/* End of Onboarding Intro */