@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700;800&display=swap');
@import url("https://use.typekit.net/kbr5cms.css");
@font-face {
    font-family: "NunitoBlack";
    src: url("../assets/main/fonts/Nunito-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans SC";
    src: url("../assets/main/fonts/NotoSansSC-ExtraBold.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Noto Sans TC";
    src: url("../assets/main/fonts/NotoSansTC-ExtraBold.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Mitr";
    src: url("../assets/main/fonts/Mitr-SemiBold.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
:root {
    --latin-font-family: "superpop-variable", Nunito, sans-serif;
    --splash-font-family: "superpop-variable", Nunito, sans-serif;
    --text-yellow: #fff714;
    --text-cyan: #14ffc5;
    --text-pink: #ff2bcf;
    --text-white: #ffffff;
    --text-drop-shadow:
            0.3px 3px 0 rgba(0, 0, 51, 0.32),
            0.3px 3px 5px rgba(0, 0, 51, 0.32);
    --text-drop-shadow-deep:
            0.5px 5px 0 rgba(0, 0, 51, 0.25),
            0.5px 5px 10px rgba(0, 0, 51, 0.25);
}
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #06152f;
}
@supports (height: 100svh) {
    html,
    body,
    #feature-preview-screen,
    #fps-wrapper {
        height: 100svh;
        max-height: 100svh;
    }
}
#feature-preview-screen {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: var(--splash-font-family);
    isolation: isolate;
    transition:
            opacity 1.2s ease,
            transform 1.2s ease;
}
html:lang(vi) #feature-preview-screen {
    --splash-font-family: "NunitoBlack", Nunito, sans-serif;
}
html:lang(zh) #feature-preview-screen {
    --splash-font-family: "superpop-variable", Nunito, "Noto Sans SC", sans-serif;
}
html:lang(zh-hant) #feature-preview-screen {
    --splash-font-family: "superpop-variable", Nunito, "Noto Sans TC", sans-serif;
}
html:lang(th) #feature-preview-screen {
    --splash-font-family: "superpop-variable", Nunito, "Mitr", sans-serif;
}
/* region BACKGROUND */
.background-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    overflow: hidden;
}
.landscape-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.portrait-bg {
    display: none;
}
/* endregion */
/* region WRAPPER */
#fps-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}
/* endregion */
/* region LOGO */
#logo-placeholder {
    position: absolute;
    left: clamp(5.5vw, 6.5vw, 7.5vw);
    top: clamp(7vh, 8.5vh, 10vh);
    width: clamp(13vw, 16vw, 18vw);
    height: auto;
    z-index: 20;
    pointer-events: none;
    user-select: none;
}
.logo-image {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;

    filter:
            drop-shadow(0 0 0.45em rgba(0, 255, 230, 0.35))
            drop-shadow(0 0.25em 0.45em rgba(0, 0, 0, 0.45));

    animation:
            logoFadeIn 0.8s ease-out 0.2s forwards,
            logoSoftPulse 5s ease-in-out infinite 0.8s;
}
/* endregion */
/* region CHARACTER / FRIDGE AREA */
#character-area {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: clamp(58vw, 66vw, 72vw);
    height: 100vh;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}
.character-group {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    transform-origin: bottom center;
    /*animation: characterIdle 6s ease-in-out infinite;*/
    will-change: transform;
}
.character-image1,
.character-image2,
.character-image3,
.character-image1-portrait,
.character-image2-portrait,
.character-image3-portrait {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: clamp(52vw, 61vw, 68vw);
    height: 100%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
    margin-left: 50px;
}
.character-image1,
.character-image1-portrait {
    z-index: 4;
}
.character-image2,
.character-image2-portrait {
    z-index: 5;
}
.character-image3,
.character-image3-portrait {
    z-index: 6;
}
/* Landscape: hide portrait characters even when slide-active */
.character-image1-portrait.feature-slide.slide-active,
.character-image2-portrait.feature-slide.slide-active,
.character-image3-portrait.feature-slide.slide-active {
    display: none !important;
}
/*.feature-slide {*/
/*    opacity: 0;*/
/*    visibility: hidden;*/
/*    pointer-events: none;*/
/*    transition:*/
/*            opacity 0.65s ease-in-out,*/
/*            visibility 0s linear 0.65s;*/
/*}*/
.feature-slide.slide-active {
    opacity: 1;
    visibility: visible;
    transition:
            opacity 0.65s ease-in-out,
            visibility 0s linear 0s;
}
/* endregion */
/* region CLOUD AREA */
#cloud-area {
    position: absolute;
    left: 50%;
    top: clamp(5vh, 10vh, 15vh);
    width: clamp(30vw, 36vw, 40vw);
    height: clamp(30vh, 39vh, 44vh);
    transform: translateX(-50%);
    z-index: 15;
    pointer-events: none;
}
.cloud-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    animation: cloudIdle 8s ease-in-out infinite;
    will-change: transform;
}
.cloud-wrapper > .feature-slide {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 514;
    transform: translate(-50%, -45%);
}
#stack-feature-2 {
    aspect-ratio: 597 / 509;
}
#stack-feature-3 {
    aspect-ratio: 629 / 529;
}
.cloud-symbols-wrap {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    transform-origin: center center;
    transform:
            translateY(var(--cloud-symbols-shift-y, 0))
            scale(var(--cloud-symbols-scale, 1));
    will-change: transform;
}
.cloud-image1,
.cloud-image2,
.cloud-image3 {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.cloud-image1 {
    z-index: 1;
}
.cloud-image2,
.cloud-image3 {
    z-index: 2;
}
/* endregion */
/* region TEXT AREA */
#feature-text-area {
    position: absolute;
    right: clamp(2vw, 5vw, 10vw);
    top: clamp(8vh, 10vh, 12vh);
    width: clamp(23vw, 26vw, 29vw);
    z-index: 18;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fps-feature-text {
    position: relative;
    width: 100%;
    min-height: 6em;
    text-align: center;
}
.fps-feature-text > .feature-slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.feature-label {
    margin: 0 0 clamp(3vh, 4.5vh, 6vh);
    font-family: var(--splash-font-family);
    font-size: clamp(2.1vw, 2.55vw, 3vw);
    line-height: 1.2;
    font-weight: 900;
    text-align: center;
}
.feature-label .label-line1,
.feature-label .label-line2 {
    position: relative;
    display: inline-block;
    -webkit-text-stroke: 0.15em transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: var(--text-drop-shadow-deep);
}
.feature-label .label-line1 {
    background-image: linear-gradient(360deg, #9a32cd, #d4008c);
}
.feature-label .label-line2 {
    background-image: linear-gradient(180deg, #520038 10%, #d4008c 70%);
}
.feature-label .label-line1::before,
.feature-label .label-line2::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    white-space: pre-line;
    -webkit-text-stroke: 0;
    background: none;
}
.feature-label .label-line1::before {
    color: var(--text-yellow);
    -webkit-text-fill-color: var(--text-yellow);
}
.feature-label .label-line2::before {
    color: var(--text-cyan);
    -webkit-text-fill-color: var(--text-cyan);
}
html:lang(zh) .feature-label .label-line2,
html:lang(zh-hant) .feature-label .label-line2,
html:lang(ja) .feature-label .label-line2,
.feature-label .label-line2[data-text$="！"] {
    position: relative;
    left: 0.2em;
}
.feature-title {
    position: relative;
    display: inline-block;
    margin: 0 0 clamp(0.9vh, 1.4vh, 2vh);
    font-family: var(--latin-font-family);
    font-size: clamp(1.65vw, 2.05vw, 2.45vw);
    line-height: 1;
    font-weight: 900;

    -webkit-text-stroke: 0.15em transparent;
    -webkit-text-fill-color: transparent;

    background-clip: text;
    -webkit-background-clip: text;

    background-image: linear-gradient(360deg, #9a32cd, #d4008c);

    text-shadow: var(--text-drop-shadow-deep);
}
.feature-title::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    -webkit-text-stroke: 0;
    background: none;

    color: var(--text-yellow);
    -webkit-text-fill-color: var(--text-yellow);
}
.feature-desc {
    margin: 0;
    font-family: var(--splash-font-family);
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.065em;
    color: var(--text-white);
    text-shadow: var(--text-drop-shadow);
}
html:lang(tr) .feature-desc  {
    font-family: Nunito, sans-serif;
}
/* endregion */
/* region FEATURE SLIDE ROTATION */
.feature-slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
            opacity 1.0s ease-in-out,
            visibility 0s linear 1.0s;
    will-change: opacity;
}
.feature-slide.slide-active {
    opacity: 1;
    visibility: visible;
    transition:
            opacity 1.0s ease-in-out,
            visibility 0s linear 0s;
}
/* endregion */
/* region START / LOADER */
#section-button {
    position: absolute;
    left: 50%;
    bottom: clamp(1vh, 2vh, 3vh);
    width: clamp(22vw, 29vw, 36vw);
    min-height: clamp(3vh, 5vh, 7vh);
    transform: translateX(-50%);
    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}
.start-fixed-portrait {
    position: relative;
    width: 100%;
    min-height: clamp(3vh, 5vh, 7vh);

    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-bar-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;

    width: clamp(20vw, 26vw, 32vw);
    height: clamp(2.1vh, 2.8vh, 3.4vh);

    transform: translate(-50%, -50%);

    border: 0.18em solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    overflow: hidden;

    background:
            radial-gradient(
                    circle at center,
                    rgba(64, 150, 196, 0.38) 0%,
                    rgba(14, 46, 92, 0.7) 100%
            );

    box-shadow:
            inset 0 0 0.5em rgba(255, 255, 255, 0.2),
            0 0.35em 0.8em rgba(0, 0, 0, 0.45);

    z-index: 2;
}
.loading-bar {
    width: 0;
    height: 100%;
    border-radius: 999px;

    background:
            linear-gradient(
                    90deg,
                    #ff27d5 0%,
                    #ffecff 25%,
                    #00ffe7 50%,
                    #ffecff 75%,
                    #ff27d5 100%
            );

    background-size: 250% 100%;

    box-shadow:
            0 0 0.6em rgba(255, 43, 207, 0.85),
            0 0 1em rgba(2, 112, 103, 0.77);

    animation:
            loaderShimmer 1.8s linear infinite;

    transition:
            width 0.3s ease;
}
.loading-percent {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: var(--splash-font-family);
    font-size: clamp(0.9vw, 1.25vw, 1.5vw);
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.04em;

    color: #7cff8a;
    -webkit-text-stroke: 0.08em #071a33;
    paint-order: stroke fill;
    text-shadow: 0 0.08em 0.15em rgba(0, 0, 0, 0.8);

    pointer-events: none;
    z-index: 3;
}
.start-button {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 100%;

    transform:
            translate(-50%, -50%)
            scale(0.95);

    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    background: transparent;

    font-family: var(--splash-font-family);
    font-size: clamp(1vw, 1.45vw, 1.75vw);
    line-height: 1;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;

    color: #21ffd8;

    text-shadow: var(--text-drop-shadow);

    opacity: 0;
    pointer-events: none;

    cursor: pointer;
    z-index: 4;

    transition:
            opacity 0.55s ease,
            transform 0.45s ease;

    animation:
            startPulse 2.4s ease-in-out infinite;
}
.start-button.visible {
    opacity: 1;
    pointer-events: auto;

    transform:
            translate(-50%, -50%)
            scale(1);
}
html:lang(tr) .start-button {
    font-family: Nunito, sans-serif;
}
/* endregion */
/* region LANDSCAPE */
@media (orientation: landscape) {
    #logo-placeholder {
        top: 5.5vh;
        width: clamp(12vw, 14.5vw, 16vw);
    }
    #cloud-area {
        top: 10vh;
        width: clamp(28vw, 34vw, 38vw);
    }
    .feature-label {
        margin-bottom: 3.2vh;
        font-size: clamp(2vw, 2.35vw, 2.7vw);
    }
    .feature-title {
        font-size: clamp(1.8vw, 5vw, 2.8vw);
    }
    #feature-preview-screen .feature-desc {
        font-family: var(--splash-font-family), "Noto Sans SC", "Noto Sans TC", Mitr, sans-serif;
        font-size: clamp(14px, min(1.8vw, 3.2vh), 28px);
        font-weight: 800;
        line-height: 1.12;
        letter-spacing: 0.015em;
    }
    #section-button {
        bottom: 3vh;
    }
}
@media (orientation: landscape) and (max-height: 380px) {
    #cloud-area {
        top: 10vh;
        width: clamp(28vw, 34vw, 38vw);
    }
}
@media (orientation: landscape) and (min-aspect-ratio: 20/9) {
    #logo-placeholder {
        left: 7vw;
    }
    #cloud-area {
        width: 24vw;
    }
    #character-area {
        width: 60vw;
    }
    .character-image1,
    .character-image2,
    .character-image3 {
        width: 58vw;
    }
}
/* endregion */
/* region PORTRAIT */
@media (orientation: portrait) {
    .landscape-bg {
        display: none;
    }
    .portrait-bg {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #fps-wrapper {
        display: grid;
        grid-template-columns: 1fr;

        grid-template-rows:
            minmax(9vh, auto)
            minmax(26vh, 34vh)
            1fr
            minmax(15vh, auto)
            minmax(7vh, auto);

        grid-template-areas:
            "header"
            "cloud"
            "character"
            "text"
            "button";
    }
    #logo-placeholder {
        grid-area: header;
        position: relative;
        left: auto;
        top: auto;

        width: clamp(20vw, 30vw, 34vw);

        align-self: start;
        justify-self: start;

        margin:
                clamp(2vh, 3vh, 4vh)
                0
                0
                clamp(2vw, 3vw, 4vw);
    }
    #cloud-area {
        grid-area: cloud;
        position: relative;
        left: auto;
        top: auto;

        width: 100%;
        height: 100%;

        transform: none;

        padding-top: clamp(1vh, 2vh, 3vh);

        box-sizing: border-box;
        overflow: hidden;
    }
    .cloud-wrapper > .feature-slide {
        left: 50%;
        top: auto;
        bottom: 0;
        width: 80%;
        max-height: 100%;
        transform: translateX(-50%);
    }
    #character-area {
        grid-area: character;
        position: relative;
        left: auto;
        bottom: auto;

        width: 100%;
        height: 30vh;

        transform: none;
    }
    #feature-text-area {
        grid-row: 1 / 5;
        grid-column: 1;
        position: relative;
        right: auto;
        left: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: 100%;
        transform: none;

        justify-content: space-between;
        align-items: center;
    }
    #section-button {
        grid-area: button;
        position: relative;
        left: auto;
        bottom: auto;

        width: clamp(45vw, 55vw, 65vw);

        transform: none;

        align-self: center;
        justify-self: center;
    }
    .character-image1.feature-slide,
    .character-image2.feature-slide,
    .character-image3.feature-slide {
        display: none !important;
    }
    .character-image1-portrait.feature-slide.slide-active,
    .character-image2-portrait.feature-slide.slide-active,
    .character-image3-portrait.feature-slide.slide-active {
        display: block !important;
    }
    .fps-feature-text {
        position: relative;
        width: clamp(85vw, 92vw, 96vw);
        min-height: 8em;
        height: auto;

        margin-inline: auto;
        align-self: flex-end;

        text-align: center;
    }
    .fps-feature-text > .feature-slide {
        position: absolute;
        left: 50%;
        bottom: 0;
        top: auto;
        width: 100%;

        transform: translateX(-50%);
        text-align: center;
    }
    .feature-label {
        align-self: flex-end;
        margin: clamp(3vh, 4vh, 5vh) 0 0 0;
        padding-right: clamp(2vw, 3vw, 4vw);
        font-size: clamp(5vw, 5.2vw, 5.8vw);
        text-align: center;
    }
    .feature-title {
        font-size: clamp(4.5vw, 5.5vw, 6.5vw);
    }
    .feature-desc {
        font-size: clamp(2.5vw, 4vw, 3.5vw);
        min-height: 4.8em;
    }
    .character-image1-portrait,
    .character-image2-portrait,
    .character-image3-portrait {
        bottom: 0;

        width: auto;
        max-width: 100%;
        height: 100%;

        margin-left: 0;

        filter:
                drop-shadow(0 2vh 4vh rgba(5, 18, 60, 0.55))
                drop-shadow(0 0.5vh 1.5vh rgba(5, 18, 60, 0.35));
    }
    .start-fixed-portrait {
        position: relative;
        width: 100%;
        height: clamp(40px, 5vh, 60px);
        box-sizing: border-box;
        z-index: 3;
    }
    .loading-bar-wrapper {
        width: clamp(40vw, 45vw, 50vw);
        height: clamp(1vh, 1.6vh, 2vh);
    }
    .loading-percent {
        font-size: clamp(1.8vw, 2.34vw, 2.7vw);
    }
    .start-button {
        font-size:
                clamp(
                        0.5rem,
                        calc(1vw + 1vh),
                        1.2rem
                );

        padding: clamp(1.5vh, 2.5vh, 3vh) 0;
        margin: 0 auto;
    }
    .start-button.visible {
        opacity: 1;
        pointer-events: auto;
    }
}
@media (orientation: portrait) and (min-width: 768px) {
    #cloud-area {
        padding-top: 0;
        top: -3vh;
    }
    #character-area {
        bottom: 3vh;
    }
}
@media (orientation: portrait) and (min-width: 1025px) and (max-width: 1200px) {
    #character-area {
        height: 29vh;
        bottom: 5vh;
    }
}
@media (orientation: portrait) and (min-width: 540px) and (max-width: 767px) {
    #cloud-area {
        padding-top: 0;
        top: -3vh;
    }
    #character-area {
        bottom: 3vh;
    }
}
@media (orientation: portrait) and (min-width: 540px) and (max-width: 1024px) {
    .fps-feature-text {
        top: clamp(12px, 2.5vh, 32px);
    }

    .feature-title {
        font-size: clamp(3.8vw, 4.4vw, 5vw);
    }

    .feature-desc {
        font-size: clamp(2.8vw, 3.3vw, 3.8vw);
        min-height: 4.4em;
    }
}
/* endregion */
/* region ANIMATIONS */
@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform:
                translateY(-1.2vh)
                scale(0.96);
    }
    100% {
        opacity: 1;
        transform:
                translateY(0)
                scale(1);
    }
}
@keyframes logoSoftPulse {
    0%,
    100% {
        filter:
                drop-shadow(0 0 0.45em rgba(0, 255, 230, 0.35))
                drop-shadow(0 0.25em 0.45em rgba(0, 0, 0, 0.45));
    }
    50% {
        filter:
                drop-shadow(0 0 0.7em rgba(0, 255, 230, 0.5))
                drop-shadow(0 0.25em 0.55em rgba(0, 0, 0, 0.5));
    }
}
@keyframes loaderShimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}
@keyframes startPulse {
    0%,
    100% {
        text-shadow: var(--text-drop-shadow);
    }
    50% {
        text-shadow:
                0.3px 3px 0 rgba(0, 0, 51, 0.45),
                0.3px 3px 8px rgba(0, 0, 51, 0.45);
    }
}
@keyframes cloudIdle {
    0%,
    100% {
        transform:
                translateY(0)
                scale(1);
    }
    25% {
        transform:
                translateY(-3px)
                scale(1.008);
    }
    50% {
        transform:
                translateY(-6px)
                scale(1.015);
    }
    75% {
        transform:
                translateY(-2px)
                scale(1.008);
    }
}
@keyframes characterIdle {
    0%,
    100% {
        transform:
                translateX(-50%)
                translateY(0);
    }
    50% {
        transform:
                translateX(-50%)
                translateY(-3px);
    }
}
/* endregion */
@media (prefers-reduced-motion: reduce) {
    .feature-slide {
        transition: none;
    }

    .logo-image {
        opacity: 1;
    }

    .cloud-wrapper,
    .character-group,
    .logo-image,
    .loading-bar,
    .start-button {
        animation: none;
    }
}

#stack-feature-1 {
    position: absolute;
}
#stack-feature-1 .cloud-symbol {
    position: absolute;
    z-index: 3;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}
#stack-feature-1 .cloud-symbol-low {
    width: 20%;
    left: 37%;
    top: 33%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
#stack-feature-1 .cloud-symbol-wild {
    width: 22%;
    left: 64%;
    top: 45%;
    transform: translate(-50%, -50%);
    transform-origin: center bottom;
    animation:
            wild-bounce 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes wild-bounce {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    16% {
        transform: translate(-50%, -56%) scale(1.05, 1.05) rotate(-3deg);
    }
    28% {
        transform: translate(-50%, -46%) scale(0.94, 1.1) rotate(2deg);
    }
    40% {
        transform: translate(-50%, -53%) scale(1.03, 0.98) rotate(-1deg);
    }
    52% {
        transform: translate(-50%, -49%) scale(0.98, 1.02) rotate(1deg);
    }
    64% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}
#stack-feature-1 .cloud-symbol-arrow {
    width: 18%;
    left: 50%;
    top: 22%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    animation: arrow-float 1.8s ease-in-out infinite;
}
@keyframes arrow-float {
    0%,
    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(-49%, -52%) rotate(4deg) scale(1.04);
    }
    50% {
        transform: translate(-50%, -54%) rotate(1deg) scale(1.08);
    }
    75% {
        transform: translate(-51%, -52%) rotate(-3deg) scale(1.03);
    }
}
#stack-feature-1 .cloud-symbol-cycle {
    opacity: 0;
    animation: cloud-symbol-cycle 6s linear infinite;
}
#stack-feature-1 .cloud-symbol-cycle-1 {
    animation-delay: 0s;
}
#stack-feature-1 .cloud-symbol-cycle-2 {
    animation-delay: 2s;
    left: 35%;
}
#stack-feature-1 .cloud-symbol-cycle-3 {
    animation-delay: 4s;
    left: 35%;
}
@keyframes cloud-symbol-cycle {
    0%,
    30% {
        opacity: 1;
    }
    36%,
    100% {
        opacity: 0;
    }
}
#stack-feature-2 {
    position: absolute;
}
#stack-feature-2 .cloud-symbol-two {
    position: absolute;
    z-index: 3;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
}
#stack-feature-2 .cloud-symbol-two-grapes,
#stack-feature-2 .cloud-symbol-two-chicken {
    width: 25%;
    left: 50%;
    top: 24%;
    transform: translate(-50%, -50%);
}
#stack-feature-2 .cloud-symbol-two-pomegranate,
#stack-feature-2 .cloud-symbol-two-salad {
    width: 22%;
    left: 35%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#stack-feature-2 .cloud-symbol-two-mango,
#stack-feature-2 .cloud-symbol-two-pizza {
    width: 23%;
    left: 63%;
    top: 45%;
    transform: translate(-50%, -50%);
}
#stack-feature-2 .cloud-symbol-two-source {
    z-index: 3;
    opacity: 1;
}
#stack-feature-2 .cloud-symbol-two-final {
    z-index: 4;
    opacity: 0;
}
#stack-feature-2:not(.slide-active) .cloud-symbol-two-source {
    opacity: 0;
}
#stack-feature-2:not(.slide-active) .cloud-symbol-two-grapes {
    transform: translate(-50%, -116%) rotate(-12deg) scale(0.72);
}
#stack-feature-2:not(.slide-active) .cloud-symbol-two-pomegranate {
    transform: translate(-132%, -6%) rotate(-18deg) scale(0.72);
}
#stack-feature-2:not(.slide-active) .cloud-symbol-two-mango {
    transform: translate(24%, -4%) rotate(18deg) scale(0.72);
}
#stack-feature-2:not(.slide-active) .cloud-symbol-two-final {
    opacity: 1;
}
#stack-feature-2:not(.slide-active) .cloud-symbol-two-chicken,
#stack-feature-2:not(.slide-active) .cloud-symbol-two-salad,
#stack-feature-2:not(.slide-active) .cloud-symbol-two-pizza {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
#stack-feature-2.slide-active .cloud-symbol-two-grapes {
    animation: cloud-symbol-two-out-top 3.6s ease-in-out forwards;
}
#stack-feature-2.slide-active .cloud-symbol-two-pomegranate {
    animation: cloud-symbol-two-out-left 3.6s ease-in-out forwards;
}
#stack-feature-2.slide-active .cloud-symbol-two-mango {
    animation: cloud-symbol-two-out-right 3.6s ease-in-out forwards;
}
#stack-feature-2.slide-active .cloud-symbol-two-chicken {
    width: 27%;
    animation: cloud-symbol-two-in-top 3.6s ease-in-out forwards;
}
#stack-feature-2.slide-active .cloud-symbol-two-salad {
    width: 22%;
    animation: cloud-symbol-two-in-left 3.6s ease-in-out forwards;
}
#stack-feature-2.slide-active .cloud-symbol-two-pizza {
    width: 21%;
    animation: cloud-symbol-two-in-right 3.6s ease-in-out forwards;
}
@keyframes cloud-symbol-two-out-top {
    0%,
    42% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    48% {
        transform: translate(-49%, -50%) rotate(-4deg) scale(1.04);
    }
    54% {
        transform: translate(-51%, -49%) rotate(4deg) scale(0.98);
    }
    60% {
        transform: translate(-49%, -51%) rotate(-3deg) scale(1.03);
    }
    66% {
        opacity: 1;
        transform: translate(-51%, -50%) rotate(3deg) scale(1);
    }
    78%,
    100% {
        opacity: 0;
        transform: translate(-50%, -116%) rotate(-12deg) scale(0.72);
    }
}
@keyframes cloud-symbol-two-out-left {
    0%,
    42% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    48% {
        transform: translate(-49%, -50%) rotate(-5deg) scale(1.04);
    }
    54% {
        transform: translate(-52%, -49%) rotate(5deg) scale(0.98);
    }
    60% {
        transform: translate(-49%, -51%) rotate(-4deg) scale(1.03);
    }
    66% {
        opacity: 1;
        transform: translate(-51%, -50%) rotate(4deg) scale(1);
    }
    78%,
    100% {
        opacity: 0;
        transform: translate(-132%, -6%) rotate(-18deg) scale(0.72);
    }
}
@keyframes cloud-symbol-two-out-right {
    0%,
    42% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    48% {
        transform: translate(-49%, -50%) rotate(5deg) scale(1.04);
    }
    54% {
        transform: translate(-51%, -49%) rotate(-5deg) scale(0.98);
    }
    60% {
        transform: translate(-49%, -51%) rotate(4deg) scale(1.03);
    }
    66% {
        opacity: 1;
        transform: translate(-49%, -50%) rotate(-4deg) scale(1);
    }
    78%,
    100% {
        opacity: 0;
        transform: translate(24%, -4%) rotate(18deg) scale(0.72);
    }
}
@keyframes cloud-symbol-two-in-top {
    0%,
    58% {
        opacity: 0;
        transform: translate(-50%, -44%) scale(0.82);
    }
    68% {
        opacity: 0.55;
        transform: translate(-50%, -48%) scale(0.9);
    }
    78% {
        opacity: 1;
        transform: translate(-50%, -54%) scale(1.08);
    }
    86%,
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes cloud-symbol-two-in-left {
    0%,
    58% {
        opacity: 0;
        transform: translate(-56%, -44%) rotate(-8deg) scale(0.82);
    }
    68% {
        opacity: 0.55;
        transform: translate(-54%, -47%) rotate(-4deg) scale(0.9);
    }
    78% {
        opacity: 1;
        transform: translate(-48%, -54%) rotate(3deg) scale(1.08);
    }
    86%,
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}
@keyframes cloud-symbol-two-in-right {
    0%,
    58% {
        opacity: 0;
        transform: translate(-44%, -44%) rotate(8deg) scale(0.82);
    }
    68% {
        opacity: 0.55;
        transform: translate(-46%, -47%) rotate(4deg) scale(0.9);
    }
    78% {
        opacity: 1;
        transform: translate(-52%, -54%) rotate(-3deg) scale(1.08);
    }
    86%,
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}
#stack-feature-3 {
    position: absolute;
}
#stack-feature-3 .cloud-symbol-three,
#stack-feature-3 .cloud-symbol-three-smoke {
    position: absolute;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    will-change: transform, opacity;
}
#stack-feature-3 .cloud-symbol-three {
    transform-origin: center center;
}
#stack-feature-3 .cloud-symbol-three-cheese {
    width: 22%;
    left: 30%;
    top: 41%;
    z-index: 3;
    transform: translate(-50%, -50%);
}
#stack-feature-3 .cloud-symbol-three-fries,
#stack-feature-3 .cloud-symbol-three-fries-rotten {
    width: 21%;
    left: 62%;
    top: 26%;
    transform: translate(-50%, -50%);
}
#stack-feature-3 .cloud-symbol-three-chicken,
#stack-feature-3 .cloud-symbol-three-chicken-rotten {
    width: 23%;
    left: 76%;
    top: 48%;
    transform: translate(-50%, -50%);
}
#stack-feature-3 .cloud-symbol-three-salad,
#stack-feature-3 .cloud-symbol-three-salad-rotten {
    width: 22%;
    left: 54%;
    top: 63%;
    transform: translate(-50%, -50%);
}
#stack-feature-3 .cloud-symbol-three-source {
    z-index: 4;
    opacity: 1;
}
#stack-feature-3 .cloud-symbol-three-final {
    z-index: 5;
    opacity: 0;
}
#stack-feature-3:not(.slide-active) .cloud-symbol-three-source {
    opacity: 0;
}
#stack-feature-3:not(.slide-active) .cloud-symbol-three-final {
    opacity: 1;
}
#stack-feature-3:not(.slide-active) .cloud-symbol-three-smoke-main {
    opacity: 0.5;
    transform: translate(-38%, -57%) rotate(16deg) scale(1.16);
}
#stack-feature-3 .cloud-symbol-three-smoke {
    z-index: 6;
    opacity: 0;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 16px rgba(113, 255, 132, 0.26));
}
#stack-feature-3 .cloud-symbol-three-smoke-main {
    width: 33%;
    left: 45%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(8deg);
}
#stack-feature-3.slide-active .cloud-symbol-three-cheese {
    animation: cloud-symbol-three-cheese-pulse 5s ease-in-out forwards;
}
#stack-feature-3.slide-active .cloud-symbol-three-smoke-main {
    animation: cloud-symbol-three-smoke-flow 5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#stack-feature-3.slide-active .cloud-symbol-three-fries {
    animation: cloud-symbol-three-source-top 5s ease-in-out forwards;
}
#stack-feature-3.slide-active .cloud-symbol-three-chicken {
    animation: cloud-symbol-three-source-right 5s ease-in-out forwards;
}
#stack-feature-3.slide-active .cloud-symbol-three-salad {
    animation: cloud-symbol-three-source-bottom 5s ease-in-out forwards;
}
#stack-feature-3.slide-active .cloud-symbol-three-fries-rotten {
    animation: cloud-symbol-three-final-top 5s ease-in-out forwards;
}
#stack-feature-3.slide-active .cloud-symbol-three-chicken-rotten {
    animation: cloud-symbol-three-final-right 5s ease-in-out forwards;
}
#stack-feature-3.slide-active .cloud-symbol-three-salad-rotten {
    animation: cloud-symbol-three-final-bottom 5s ease-in-out forwards;
}
@keyframes cloud-symbol-three-cheese-pulse {
    0%,
    26% {
        transform: translate(-50%, -50%) scale(1);
    }
    40% {
        transform: translate(-50%, -50%) scale(1.03);
    }
    56% {
        transform: translate(-50%, -50%) scale(0.99);
    }
    72% {
        transform: translate(-50%, -50%) scale(1.04);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes cloud-symbol-three-smoke-flow {
    0%,
    18% {
        opacity: 0;
        transform: translate(-60%, -49%) rotate(1deg) scale(0.62);
    }
    100% {
        opacity: 0.5;
        transform: translate(-38%, -57%) rotate(16deg) scale(1.1);
    }
}
@keyframes cloud-symbol-three-source-top {
    0%,
    42% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-49%, -50%) rotate(-4deg) scale(1.03);
    }
    58% {
        transform: translate(-51%, -49%) rotate(3deg) scale(0.99);
    }
    66% {
        opacity: 0.72;
        transform: translate(-50%, -50%) rotate(-2deg) scale(0.94);
    }
    78%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.84);
    }
}
@keyframes cloud-symbol-three-source-right {
    0%,
    46% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    54% {
        transform: translate(-49%, -51%) rotate(4deg) scale(1.03);
    }
    62% {
        transform: translate(-51%, -49%) rotate(-3deg) scale(0.99);
    }
    70% {
        opacity: 0.7;
        transform: translate(-50%, -50%) rotate(2deg) scale(0.94);
    }
    82%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.84);
    }
}
@keyframes cloud-symbol-three-source-bottom {
    0%,
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    58% {
        transform: translate(-49%, -51%) rotate(-3deg) scale(1.03);
    }
    66% {
        transform: translate(-51%, -49%) rotate(2deg) scale(0.99);
    }
    74% {
        opacity: 0.68;
        transform: translate(-50%, -50%) rotate(-2deg) scale(0.94);
    }
    86%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.84);
    }
}
@keyframes cloud-symbol-three-final-top {
    0%,
    54% {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.82);
    }
    66% {
        opacity: 0.64;
        transform: translate(-50%, -51%) scale(0.94);
    }
    78% {
        opacity: 1;
        transform: translate(-50%, -54%) scale(1.07);
    }
    88%,
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes cloud-symbol-three-final-right {
    0%,
    58% {
        opacity: 0;
        transform: translate(-48%, -46%) rotate(4deg) scale(0.82);
    }
    70% {
        opacity: 0.64;
        transform: translate(-50%, -50%) rotate(1deg) scale(0.94);
    }
    80% {
        opacity: 1;
        transform: translate(-52%, -53%) rotate(-2deg) scale(1.07);
    }
    90%,
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}
@keyframes cloud-symbol-three-final-bottom {
    0%,
    62% {
        opacity: 0;
        transform: translate(-50%, -46%) rotate(-4deg) scale(0.82);
    }
    74% {
        opacity: 0.64;
        transform: translate(-50%, -49%) rotate(-1deg) scale(0.94);
    }
    84% {
        opacity: 1;
        transform: translate(-50%, -53%) rotate(2deg) scale(1.07);
    }
    92%,
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}

@media (orientation: portrait) {
    .cloud-symbols-wrap {
        --cloud-symbols-scale: 0.85;
        --cloud-symbols-shift-y: -4%;
    }
    #stack-feature-1 .cloud-symbols-wrap,
    #stack-feature-2 .cloud-symbols-wrap {
        --cloud-symbols-shift-y: 0%;
    }
}
@media (orientation: portrait) and (min-width: 376px) and (max-width: 767px),
       (orientation: portrait) and (min-height: 700px) and (max-width: 767px) {
    .cloud-symbols-wrap {
        --cloud-symbols-scale: 1.00;
    }
}
@media (orientation: portrait) and (min-aspect-ratio: 3/5) and (max-width: 767px) {
    .cloud-symbols-wrap {
        --cloud-symbols-scale: 0.75;
    }
}
@media (orientation: landscape) {
    .cloud-symbols-wrap {
        --cloud-symbols-scale: 1.2;
        --cloud-symbols-shift-y: 2%;
    }
    #stack-feature-3 .cloud-symbols-wrap {
        --cloud-symbols-shift-y: -1%;
    }
}
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1200px) {
    .cloud-symbols-wrap {
        --cloud-symbols-scale: 0.6;
        --cloud-symbols-shift-y: -8%;
    }
    #stack-feature-1 .cloud-symbols-wrap,
    #stack-feature-2 .cloud-symbols-wrap {
        --cloud-symbols-shift-y: -4%;
    }
}
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1366px) {
    .cloud-symbols-wrap {
        --cloud-symbols-scale: 1.08;
        --cloud-symbols-shift-y: 7%;
    }
    #stack-feature-3 .cloud-symbols-wrap {
        --cloud-symbols-shift-y: 4%;
    }
}
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1500px) and (min-height: 600px) {
    .cloud-symbols-wrap {
        transform:
                translateY(calc(var(--cloud-symbols-shift-y) - 3%))
                scale(var(--cloud-symbols-scale));
    }
}
@media (orientation: landscape) and (max-height: 300px) {
    .character-image1, .character-image2, .character-image3 {
        width: 50vw;
    }
    .feature-title {
        font-size: 12px;
    }
    #feature-preview-screen .feature-desc {
        font-size: 12px;
        line-height: 1.12;
    }
}
@media (orientation: portrait) {
    html:lang(de) .feature-label  {
        font-size: 16px;
    }
    html:lang(pt) .feature-label  {
        font-size: 16px;
    }
    html:lang(ru) .feature-label  {
        font-size: 16px;
    }
}