/* All plugin styles are scoped; typography and theme come from the host page. */
.check-in-page:is([data-current-screen="textcloud"], [data-current-screen="flatcloud"]) .check-in-page__bg-top {
    display: none;
}

.check-in-page:is([data-current-screen="textcloud"], [data-current-screen="flatcloud"]) .check-in-page__red-landscape img {
    bottom: calc(var(--red-landscape-img-bottom) - 64px);
    @media (max-width: 1200px) {
        bottom: calc(var(--red-landscape-img-bottom) - 20px);
    }
}

.check-in-page[data-current-screen="textcloud"] .check-in-page__chips {
    display: none;
}

.textcloud-screen {
    position: absolute;
    z-index: auto;
    inset: 60px max(100px, calc((100vw - 1400px) / 2)) 1%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    grid-template-rows: minmax(0, 1fr);
    overflow: clip;
}

.textcloud-screen__intro {
    min-width: 0;
}

.textcloud-screen__intro h2 {
    margin: 0;
    font-size: 40px;
    font-weight: 450;
    line-height: 1.2;
    letter-spacing: 0.48px;
}

.textcloud-screen__intro p {
    margin: 20px 0 0;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: -1%;
    width: 100%;
}

.textcloud-screen__intro .textcloud-actions {
    margin-top: 40px;
}

.textcloud-screen__visual {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
}

.textcloud-screen__visual > .textcloud {
    width: min(700px, 83.333cqw, 83.333cqh);
    max-width: none;
}

.textcloud-screen__visual > .flatcloud {
    width: min(720px, 103cqw, calc(110cqh * 817 / 1335));
    top: -40px;
    @media (max-width: 1200px) {
       top: -8px;
    }
}

/* Clouds share the page stacking context below artwork and controls. */
.textcloud-screen .textcloud-screen__intro,
.textcloud-screen .textcloud-screen__intro > * {
    position: relative;
    z-index: 3;
}

.textcloud-screen[data-screen="textcloud"] > .textcloud {
    z-index: 0;
}

@media (min-width: 1201px) {
    .textcloud-screen[data-screen="textcloud"] {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
}

@media (max-width: 1200px) {
    .textcloud-screen {
        inset: 80px 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        overflow: clip;
    }

    .textcloud-screen__intro {
        display: contents;
    }

    .textcloud-screen__intro h2 {
        order: 0;
        flex-shrink: 0;
        text-align: center;
        font-size: 28px;
        width: calc(100% - 40px);
    }

    .textcloud-screen__intro p {
        order: 1;
        flex-shrink: 0;
        text-align: center;
        margin-top: 8px;
        width: calc(100% - 40px);
        font-size: 20px;
    }

    .textcloud-screen__visual {
        order: 2;
        flex: 0 1 auto;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 0 -24px 0;
    }

    .textcloud-screen[data-screen="textcloud"] .textcloud-screen__visual {
        flex: 0 0 auto;
        width: min(700px, calc(100% - 40px), max(240px, calc(100dvh - 260px)));
        margin: 48px 0 0;
    }

    .textcloud-screen[data-screen="flatcloud"] .textcloud-screen__visual {
        aspect-ratio: 375 / 583;
        margin-top: -24px;
        margin-bottom: -24px;
    }

    .textcloud-screen__intro .textcloud-actions {
        order: 3;
        margin: 12px 0 0 0;
        justify-content: center;
        flex-shrink: 0;
        width: calc(100% - 40px);
    }

    .textcloud-screen[data-screen="flatcloud"] .textcloud-actions {
        position: relative;
        top: -24px;
    }

    .textcloud-screen[data-screen="textcloud"] .textcloud-actions {
        margin-top: 48px;
    }

    .textcloud-screen__visual > .textcloud {
        width: min(700px, 100cqw, 100cqh);
    }

    .textcloud-screen__visual > .flatcloud {
        width: min(100cqw, calc(100cqh * 375 / 583));
    }
}

@media (max-width: 768px) {
    .textcloud-screen__intro h2 {
        font-size: 28px;
    }

    .textcloud-screen__intro p {
        font-size: 20px;
    }
}

.textcloud-screen[hidden] {
    display: none;
}

.textcloud-screen.is-entering {
    animation: none;
}

.textcloud-screen.is-entering .textcloud-screen__visual > *,
.textcloud-screen.is-entering .textcloud-screen__intro > * {
    animation: textcloud-fade-in 560ms ease-out both;
}

@keyframes textcloud-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.textcloud {
    position: relative;
    width: min(747.5px, 100%, max(207px, calc((86dvh - 180px) * 1.15)));
    aspect-ratio: 1;
    flex: 0 0 auto;
    max-width: 83.333%;
    overflow: visible;
    isolation: isolate;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.textcloud:active {
    cursor: grabbing;
}

.textcloud::before {
    content: "";
    position: absolute;
    inset: -12% -16% -16% -16%;
    z-index: -1;
    background: url('../bg-cloud.png') center / contain no-repeat;
    background-image: url('../assets/bg-cloud.png');
    background-image: url('../bg-cloud.png');
    pointer-events: none;
}

.textcloud__sphere {
    position: absolute;
    inset: 0;
    overflow: clip;
}

.textcloud__word {
    position: absolute;
    left: 50%;
    top: 50%;
    line-height: 1.15;
    white-space: pre;
    text-align: center;
    will-change: transform, opacity;
}

.textcloud__status {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
}

.textcloud__word--highlighted {
    text-shadow: 0 0 4px currentColor, 0 0 12px currentColor;
}

.textcloud__status[hidden] {
    display: none;
}

@media (max-width: 576px) {
    .textcloud-screen {
        top: 48px;
    }

    .textcloud-screen__intro h2 {
        font-size: 20px;
    }

    .textcloud-screen__intro p {
        font-size: 14px;
    }
}

.site-header__back {
    margin-right: auto;
}

.site-header__back[hidden] {
    display: none;
}

.site-header__back:not([hidden]) ~ .site-header__lang-toggle {
    margin-right: auto;
}

.site-header__back:not([hidden]) {
    margin-right: 12px;
}