@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:wght@800&display=swap');
@font-face {
    font-family: 'Dobidoo';
    src:
            local("Dobidoo"),
            url('../assets/main/fonts/Dobidoo.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
:root {
    --main-font: 'Noto Sans', sans-serif;
    --t-wheel-start: 4s;
    --t-wheel-dur: 3s;
    --t-stack-fade: .5s;
    --t-after-stack: calc(var(--t-wheel-start) + var(--t-wheel-dur) + var(--t-stack-fade));
}
body {
    font-family: 'Dobidoo', 'Shantell Sans', sans-serif;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100svh;
    overflow: hidden;
}
@supports not (height: 100svh){
    html, body { height: 100vh; }
    #feature-preview-screen { height: 100vh; }
    .background-layer { height: 100vh; }
}
#feature-preview-screen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100svw;
    height: 100svh;
    transition: opacity 1.2s ease, transform 1.2s ease;
}
/* region LOADING*/
.loading-bar {
    position: relative;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #00BFFF;
    transition: width .3s ease;
    box-shadow: 0 0 20px rgba(0,191,255,.9),
    0 0 40px rgba(0,122,255,.7),
    0 0 60px rgba(0,229,255,.6);
    overflow: hidden;
}
.loading-bar::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(90deg,
    #7F00FFFF 0%,
    #9900ff 25%,
    #e100ff 50%,
    #9900ff 75%,
    #7F00FFFF 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2.2s linear infinite;
    will-change: background-position;
    transform: translateZ(0);
}
.loading-percent {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--main-font, sans-serif);
    color: white;
    font-weight: bold;
    pointer-events: none;
}
@media (orientation: portrait) {
    .loading-percent {
        font-size: clamp(12px, 1vw, 14px);
    }
}
@media (orientation: landscape) {
    .loading-percent {
        font-size: clamp(9px, 1vw, 14px);
    }
}
.loading-bar.is-complete::after {
    animation: none;
}
/* endregion */
/* region PRESS TO START */
.start-button.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
/* endregion */
.stack {
    position: absolute;
    transform: translate(-50%, -50%);
    aspect-ratio: 1 / 1;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    animation: showStack 0.5s ease-in-out var(--t-wheel-start) forwards,
    hideStack 0.5s ease-in-out calc(var(--t-wheel-start) + var(--t-wheel-dur)) forwards;
}
/* region LANDSCAPE */
@media (orientation: landscape) {
    .stack {
        top: 45%;
        left: 50%;
        width: clamp(200px, calc(16svw + 14svh), 500px);
    }
    #sound-toggle {
        position: fixed;
        inset-block-end: max(2svh, calc(env(safe-area-inset-bottom) + 8px));
        inset-inline-end: max(3svw, calc(env(safe-area-inset-right) + 8px));

        width: clamp(40px, 6svh, 10svh);
        height: clamp(40px, 6svh, 10svh);

        cursor: pointer;
        z-index: 9999;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    @supports not (inset-block-end: 1px) {
        #sound-toggle {
            bottom: max(2svh, calc(env(safe-area-inset-bottom) + 8px));
            right: max(3svw, calc(env(safe-area-inset-right) + 8px));
        }
    }
    #sound-toggle img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .start-button {
        font-family: var(--main-font, sans-serif) !important;
        width: clamp(40vw, 50vw, 60vw);
        font-size: clamp(0.7rem, calc(0.8vw + 0.8vh), 1.5rem);
        text-transform: uppercase;
        text-align: center;

        letter-spacing: 0.05em;
        font-weight: 500;
        background-size: 200% auto;
        background: linear-gradient(to right, #0077ff, #00ffe0, #0077ff);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: white;
        border: none;

        transform: scale(0.95);
        opacity: 0;
        pointer-events: none;

        transition: opacity 0.6s ease, transform 0.4s ease;
        animation: gradientShift 5s linear infinite, pulseZoom 5s ease-in-out infinite;

        padding: 2svh;
        margin: 0 auto;
    }
    .loading-bar-wrapper {
        position: absolute;
        /*bottom: clamp(2vh, 5vh, 5vh) 0;*/
        left: 50%;
        transform: translateX(-50%);
        width: clamp(20dvw, 25dvw, 35dvw);
        height: clamp(2dvh, 2.5dvh, 3.5dvh);
        background: radial-gradient(circle at center, rgba(60, 90, 120, 0.4), rgba(10, 30, 60, 0.6));
        border-radius: 999px;
        overflow: hidden;
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.6);
        border: 2px solid #f8f8f8;
        margin-top: 0;
        min-width: clamp(140px, 30vw, 320px);
        transition: opacity 0.35s ease;
        margin-bottom: clamp(2vh, 1vh, 2vh);
    }
    .start-fixed {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        text-align: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 100;

        background: linear-gradient(to top, rgba(18, 16, 48, 0.88), rgba(18, 16, 48, 0));
        box-sizing: border-box;
        padding-top: 2vh;
        padding-bottom: 1.8dvh;
        padding-inline: 5vw;
    }
    .loading-bar.is-complete::after{ animation: none; }
}
/* endregion */
/* region PORTRAIT*/
@media (orientation: portrait) {
    .stack {
        top: 50%;
        left: 50%;
        width: clamp(160px, 20svh, 400px);
        transform: translate(-50%, -50%) translateY(3svh);
    }
    #sound-toggle {
        position: fixed;
        inset-block-end: max(2svh, calc(env(safe-area-inset-bottom) + 8px));
        inset-inline-end: max(3svw, calc(env(safe-area-inset-right) + 8px));
        width: clamp(40px, 6svh, 10svh);
        height: clamp(40px, 6svh, 10svh);
        cursor: pointer;
        z-index: 9999;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    @supports not (inset-block-end: 1px) {
        #sound-toggle {
            bottom: max(2svh, calc(env(safe-area-inset-bottom) + 8px));
            right: max(3svw, calc(env(safe-area-inset-right) + 8px));
        }
    }
    #sound-toggle img {
        width: 90%;
        height: 90%;
        object-fit: contain;
    }
    .start-fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        background: linear-gradient(to top, rgba(18, 16, 48, 0.88), rgba(18, 16, 48, 0));
        box-sizing: border-box;
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 2vh;
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: 5vw;
        padding-right: 5vw;
    }
    .start-button {
        width: clamp(40vw, 50vw, 60vw);
        font-size: clamp(1rem, calc(0.8vw + 0.8vh), 1.5rem);
        text-transform: uppercase;
        text-align: center;
        font-weight: 500;
        background-size: 200% auto;
        background: linear-gradient(to right, #0077ff, #00ffe0, #0077ff);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: white;
        border: none;
        transform: scale(0.95);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.6s ease, transform 0.4s ease;
        animation: gradientShift 5s linear infinite, pulseZoom 5s ease-in-out infinite;
        padding: clamp(1vh, 2.5vh, 3vh) 0;
        margin: 0 auto;
    }
    .loading-bar-wrapper {
        position: absolute;
        bottom: clamp(2svh, 2.5svh, 3.5svh);
        left: 50%;
        transform: translateX(-50%);
        width: clamp(40svw, 45svw, 50svw);
        height: clamp(1.6svh, 2svh, 2.5svh);
        background: radial-gradient(circle at center, rgba(60, 90, 120, 0.4), rgba(10, 30, 60, 0.6));
        border-radius: 999px;
        overflow: hidden;
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.6);
        border: 2px solid #f8f8f8;
    }
}
/* endregion */
.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    z-index: 0;
    overflow: hidden;
    transform-origin: center;
}
.background-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(10, 10, 50, 0.5) 75%, rgba(40, 0, 60, 0.6) 100%);
}
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    transform-origin: center;
    filter: blur(2px);
}
#fps-wrapper,
#section-button,
#butterfly-container,
.scatters-layer {
    position: relative;
}

@keyframes fadeOutBg1 {
    to { opacity: 0; }
}
@keyframes fadeInBg2 {
    to { opacity: 1; }
}
@keyframes fadeOutBg2 {
    to { opacity: 0; }
}
@keyframes fadeInBg3 {
    to { opacity: 1; }
}

.fog1 {
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: clamp(360px, 20vw, 500px);
    z-index: 22;
    animation: fogMoveLeft 20s linear infinite;
}
.fog2 {
    position: absolute;
    bottom: 0;
    left: -15%;
    width: clamp(300px, 20vw, 400px);
    z-index: 22;

    animation: fogMoveLeft 30s linear infinite;
    animation-delay: 3s;
}
.fog3 {
    position: absolute;
    bottom: 2%;
    right: 0;
    width: clamp(300px, 20vw, 400px);
    z-index: 22;

    animation: fogMoveRight 30s linear infinite;
}
.fog4 {
    position: absolute;
    bottom: -20%;
    right: 0;
    width: clamp(300px, 20vw, 400px);
    z-index: 22;

    transform: scaleX(-1);
    transform-origin: center;

    animation: fogMoveRight 30s linear infinite;
    animation-delay: 3s;
}
.fog5 {
    position: absolute;
    opacity: 0.5;
    bottom: 5%;
    left: -10%;
    width: clamp(300px, 20vw, 600px);
    z-index: 22;

    animation: fogMoveLeft 20s linear infinite;
}
/* Анімація туману */
@keyframes fogMoveLeft {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-100px);
    }

    100% {
        transform: translateX(0);
    }
}
#fps-wrapper {
    display: grid;
    grid-template-areas:
      "logo"
      "feature-block1"
      "feature-block3"
      "feature-desc";
    grid-template-columns: 1fr;
    /*grid-template-rows: 10vh;*/
    grid-template-rows: 10svh 1fr auto auto;
    /*margin-top: 2vh;*/
    padding-top: 2svh;
    height: 100svh;
    min-height: auto;
    overflow: hidden;
    box-sizing: border-box;
}

/* Показ колеса */
@keyframes showStack {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    1% {
        visibility: visible;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes hideStack {
    0% {
        opacity: 1;
        visibility: visible;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.wheel {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(20, 0, 40, 0.9));
}
.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.wheel-2 {
    width: 68%;
    aspect-ratio: 1/1;
    top: 45%;
    left: 48%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    z-index: 20;
    animation: spin-slowdown 3s ease-out 4s forwards;
}
/* Анімація колеса */
@keyframes spin-slowdown {
    0% {transform: translate(-50%, -50%) rotate(0deg);}
    5% {transform: translate(-50%, -50%) rotate(400deg);}
    15% {transform: translate(-50%, -50%) rotate(900deg);}
    30% {transform: translate(-50%, -50%) rotate(1200deg);}
    50% {transform: translate(-50%, -50%) rotate(1320deg);}
    70% {transform: translate(-50%, -50%) rotate(1370deg);}
    85% {transform: translate(-50%, -50%) rotate(1390deg);}
    95% {transform: translate(-50%, -50%) rotate(1398deg);}
    100% {transform: translate(-50%, -50%) rotate(1400deg);}
}

.arrow {
    z-index: 50;
}

#logo-placeholder {
    grid-area: logo;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1svh;
    z-index: 20;
}
.logo-portrait {
    display: none;
}
.logo-landscape {
    display: block;
}
.logo-image {
    height: clamp(3svh, calc(2.2svw + 1.5svh), 7svh);
    width: auto;
    margin-top: 0.5svh;
    opacity: 0;
    will-change: opacity, transform;
    animation:
            logoFadeIn 1s ease-out forwards,
            pulseGlow 6s ease-in-out infinite;
}
@media (orientation: portrait) {
    .logo-portrait { display: block; }
    .logo-landscape { display: none; }
    .logo-image {
        margin-top: 3svh;
        height: clamp(12svh, calc(2.2vw + 1.5svh), 17svh);
    }
}
@media (orientation: landscape) {
    .logo-portrait { display: none; }
    .logo-landscape { display: block; }
}
/* Logo animation */
@keyframes logoFadeIn {
    0% { opacity: 0; transform: translateY(-20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.logo-scene {
    position: relative;
    display: inline-block;
    width: fit-content;
}
#feature-desc {
    position: absolute;
    top: clamp(60dvh, 78%, 80dvh);
    /*top: calc(70vh + 12%);*/
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 800;
    font-family: 'Dobidoo', 'Shantell Sans', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(250px, 80vw, 900px);
    padding: 0;
    z-index: 1500;
}
@media (orientation: landscape) {
    #feature-desc {
        /*top: clamp(60dvh, 78%, 80dvh);*/
        top: calc(70dvh + 15%);
        font-size: clamp(0.8rem, min(3dvw, 3dvh), 2rem);
    }
}
@media (orientation: landscape) and (max-height: 300px) {
    #feature-desc {
        top: calc(70dvh + 16%);
        font-size: 0.6rem;
    }
    .start-fixed {
        padding-bottom: 1dvh;
    }
}
.feature-description {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    width: 100%;
    max-width: 90%;
    margin: 0 auto;

    font-size: clamp(1rem, 2dvw, 1.8rem);
    padding: 0;
    box-sizing: border-box;
    z-index: 2;

    font-weight: 900;
    text-transform: uppercase;
    color: white;
    text-shadow: -1px -1px #001e3c, 1px -1px #001e3c, -1px  1px #001e3c, 1px  1px #001e3c;
    letter-spacing: 1.2px;
    line-height: 1.3;
}
.feature-description.scaled {
    transform: scale(0.9);
    transform-origin: center;
}
#butterfly-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}
.butterfly {
    position: absolute;
    width: 40px;
    transform-origin: center;
    animation: flapWings 0.6s ease-in-out infinite;
}
.butterfly.small {
    width: clamp(10px, 2vw + 2vh, 20px);
}
.butterfly.large {
    width: clamp(15px, 3vw + 2vh, 30px);
}
/* Різні позиції метеликів на екрані */
.butterfly:nth-child(1)  { top: 10%; left: 10%; animation-delay: 0s; }
.butterfly:nth-child(2)  { top: 4%; left: 75%; animation-delay: 0.1s; }
.butterfly:nth-child(3)  { top: 2%; left: 20%; animation-delay: 0.2s; }
.butterfly:nth-child(4)  { top: 15%; left: 86%; animation-delay: 0.3s; }
.butterfly:nth-child(7)  { top: 65%; left: 85%; animation-delay: 0.8s; }
@media (orientation: landscape) {
    .butterfly:nth-child(5)  { top: 65%; left: 6%; animation-delay: 0.4s; }
    .butterfly:nth-child(6)  { top: 30%; left: 80%; animation-delay: 0.7s; }

}
@media (orientation: portrait) {
    .butterfly:nth-child(5)  { top: 70%; left: 6%; animation-delay: 0.4s; }
    .butterfly:nth-child(6)  { top: 20%; left: 60%; animation-delay: 0.7s; }
}

/* Анімація метеликів */
@keyframes flapWings {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.05) rotate(5deg); }
    50%      { transform: scale(1.1) rotate(-4deg); }
    75%      { transform: scale(1.06) rotate(4deg); }
}
/* Loading bar animation */
@keyframes shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}
/* Start button animation */
@keyframes gradientShift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}
@keyframes pulseZoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* region FPS READY GATE */

/* Пауза ВСІХ критичних анімацій (фон/туман/скаттери/стак/опис) */
html:not(.fps-ready) .background-layer .background-image,
html:not(.fps-ready) .fog1,
html:not(.fps-ready) .fog2,
html:not(.fps-ready) .fog3,
html:not(.fps-ready) .fog4,
html:not(.fps-ready) .fog5,
html:not(.fps-ready) .scatters-stack,
html:not(.fps-ready) .scatter-wild-stack,
html:not(.fps-ready) .stack,
html:not(.fps-ready) .wheel-2,
html:not(.fps-ready) #feature-desc .glow-flash {
    animation-play-state: paused !important;
}

/* Коли ready — все запускається */
html.fps-ready .background-layer .background-image,
html.fps-ready .fog1,
html.fps-ready .fog2,
html.fps-ready .fog3,
html.fps-ready .fog4,
html.fps-ready .fog5,
html.fps-ready .scatters-stack,
html.fps-ready .scatter-wild-stack,
html.fps-ready .stack,
html.fps-ready .wheel-2,
html.fps-ready #feature-desc .glow-flash {
    animation-play-state: running;
}
/* endregion */

:root {
    --t-stack-show: .5s;
    --t-top-hide-delay: .12s;
    --t-stack-hide: .5s;
    --t-wild-start: calc(var(--t-wheel-start) + var(--t-wheel-dur) + var(--t-stack-hide));
    --t-wild-mid-hold: 4.2s;
    --t-wild-fade: .35s;
    --wild-up: 0svh;
    --t-xfade: 0.55s;
    --t-xfade-last: 2s;
    --t-overlap-last: 0.18s;
}

@keyframes hideScatterTop{
    to { opacity: 0; visibility: hidden; }
}
@keyframes scatterTopFadeOut{
    0%   { opacity: 1; visibility: visible; filter: none; }
    100% { opacity: 0; visibility: hidden; filter: none; }
}
@keyframes wildStackIn {
    0%   { opacity: 0; visibility: hidden; transform: translate(-50%,-50%) translateY(var(--wild-up)) scale(.98); }
    1%   { visibility: visible; }
    100% { opacity: 1; visibility: visible; transform: translate(-50%,-50%) translateY(0) scale(1); }
}
@keyframes wildMiddleOut {
    0%   { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}
@keyframes wildShadowOut {
    0%   { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}
@keyframes wildTopIn {
    0%   { opacity: 0; visibility: hidden; transform: scale(.985); }
    1%   { visibility: visible; }
    100% { opacity: 1; visibility: visible; transform: scale(1); }
}
@keyframes scatterGlowPulse {
    0%,100% {
        transform: scale(1);
        /*filter:*/
        /*        drop-shadow(0 0 2px rgba(255, 213, 0, 0.4))*/
        /*        drop-shadow(0 0 4px rgba(255, 174, 0, 0.4))*/
        /*        drop-shadow(0 0 8px rgba(255, 128, 25, 0.4));*/
    }
    50% {
        transform: scale(1.01);
        /*filter:*/
        /*        drop-shadow(0 0 4px rgba(255, 213, 0, 0.5))*/
        /*        drop-shadow(0 0 6px rgba(255, 174, 0, 0.5))*/
        /*        drop-shadow(0 0 10px rgba(255, 128, 25, 0.5));*/
    }
}

#feature-preview-screen{ position: fixed; }
#feature-preview-screen{ isolation: isolate; }

:root{
    --scatter-top: 50%;
    --scatter-w: 90vw;
    --tiger-top: 33.7%;
    --tiger-w: 35%;
    --scatter-shift: 0svh;
}
@media (orientation: landscape) {
    .tiger {
        position: absolute;
        left: 20%;
        top: 60%;
        transform: translate(-50%, -50%);
        height: 60svh;
        width: auto;
        object-fit: contain;
        pointer-events: none;
        z-index: 18;
    }
    .tiger-p {
        display: none;
    }
    /* region SCATTER STACK */
    .scatters-stack {
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        width: 100svh;
        aspect-ratio: 1 / 2;
        height: auto;
        pointer-events: none;
    }
    .scatters-stack > img,
    .scatter-wild-stack > img{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        pointer-events: none;
    }
    .scatters-stack .scatter-base{ z-index: 1; }
    .scatters-stack .scatter-top {
        z-index: 2;
    }
    .scatters-stack .scatter-top{
        z-index: 2;
        will-change: transform, filter, opacity;
        transform-origin: 50% 50%;
        animation:
                scatterGlowPulse 2.2s ease-in-out infinite,
                scatterTopFadeOut var(--t-stack-show) ease-out calc(var(--t-wheel-start) + var(--t-top-hide-delay)) forwards;
    }
    /* endregion */
    /* region SCATTER WILD STACK */
    .scatter-wild-stack {
        position: absolute;
        left: 50%;
        top: 40%;
        width: 100svh;
        aspect-ratio: 1 / 2;
        height: auto;
        pointer-events: none;
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        will-change: opacity, transform;
        animation: wildStackIn .25s ease-out calc(var(--t-wild-start) + .8s) forwards;
    }
    .scatter-wild-stack > img{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        pointer-events: none;
    }
    .scatter-wild-base   { z-index: 1; }
    .scatter-wild-shadow { z-index: 2; }
    .scatter-wild-middle { z-index: 3; }
    .scatter-wild-top    { z-index: 4; }
    .scatter-wild-base{
        opacity: 1;
        visibility: visible;
    }
    .scatter-wild-shadow {
        opacity: 1;
        visibility: visible;
        will-change: opacity;

        animation: wildShadowOut var(--t-wild-fade) ease-out calc(
                var(--t-wild-start) + var(--t-wild-mid-hold) + var(--t-wild-fade)
        ) forwards;
    }
    .scatter-wild-middle {
        opacity: 1;
        visibility: visible;

        will-change: transform, filter, opacity;
        transform-origin: 50% 50%;

        /*animation:*/
        /*        scatterGlowPulse 2.2s ease-in-out infinite,*/
        /*        wildMiddleOut var(--t-wild-fade) ease-out calc(*/
        /*                var(--t-wild-start) + var(--t-wild-mid-hold)*/
        /*        ) forwards;*/
        animation:
                scatterGlowPulse 2.2s ease-in-out infinite,
                wildMiddleOut var(--t-xfade-last) ease-out
                calc(var(--t-wild-start) + var(--t-wild-mid-hold)) forwards;
    }
    .scatter-wild-top {
        opacity: 0;
        visibility: hidden;

        will-change: opacity, transform;

        /*animation: wildTopIn var(--t-wild-fade) ease-out calc(*/
        /*        var(--t-wild-start) + var(--t-wild-mid-hold) + var(--t-wild-fade)*/
        /*) forwards;*/
        animation: wildTopIn var(--t-xfade-last) ease-out
        calc(var(--t-wild-start) + var(--t-wild-mid-hold) - var(--t-overlap-last)) forwards;
    }
    /* endregion */
}
@media (orientation: landscape) and (min-width: 1000px) and (max-width: 1366px) {
    .stack {
        top: 51%;
    }
    .tiger {
        position: absolute;
        left: 17%;
        top: 61%;
        transform: translate(-50%, -50%);
        height: 50svh;
        width: auto;
        object-fit: contain;
        pointer-events: none;
        z-index: 18;
    }
    .tiger-p {
        display: none;
    }
    /* region SCATTER STACK */
    .scatters-stack {
        position: absolute;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
        width: 80svh;
        aspect-ratio: 1 / 2;
        height: auto;

        pointer-events: none;
    }
    .scatters-stack > img,
    .scatter-wild-stack > img{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        pointer-events: none;
    }
    .scatters-stack .scatter-base{ z-index: 1; }
    .scatters-stack .scatter-top {
        z-index: 2;
    }
    .scatters-stack .scatter-top {
        z-index: 2;
        will-change: transform, filter, opacity;
        transform-origin: 50% 50%;
        animation:
                scatterGlowPulse 2.2s ease-in-out infinite,
                scatterTopFadeOut var(--t-stack-show) ease-out calc(var(--t-wheel-start) + var(--t-top-hide-delay)) forwards;
    }
    /* endregion */
    /* region SCATTER WILD STACK */
    .scatter-wild-stack {
        position: absolute;
        left: 50%;
        top: 48%;
        width: 80svh;
        aspect-ratio: 1 / 2;
        height: auto;

        pointer-events: none;
        z-index: 10;

        opacity: 0;
        visibility: hidden;
        will-change: opacity, transform;

        animation: wildStackIn .25s ease-out calc(var(--t-wild-start) + .8s) forwards;
    }
    .scatter-wild-stack > img{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        pointer-events: none;
    }
    .scatter-wild-base   { z-index: 1; }
    .scatter-wild-shadow { z-index: 2; }
    .scatter-wild-middle { z-index: 3; }
    .scatter-wild-top    { z-index: 4; }
    .scatter-wild-base{
        opacity: 1;
        visibility: visible;
    }
    .scatter-wild-shadow {
        opacity: 1;
        visibility: visible;
        will-change: opacity;

        animation: wildShadowOut var(--t-wild-fade) ease-out calc(
                var(--t-wild-start) + var(--t-wild-mid-hold) + var(--t-wild-fade)
        ) forwards;
    }
    .scatter-wild-middle {
        opacity: 1;
        visibility: visible;

        will-change: transform, filter, opacity;
        transform-origin: 50% 50%;

        /*animation:*/
        /*        scatterGlowPulse 2.2s ease-in-out infinite,*/
        /*        wildMiddleOut var(--t-wild-fade) ease-out calc(*/
        /*                var(--t-wild-start) + var(--t-wild-mid-hold)*/
        /*        ) forwards;*/
        animation:
                scatterGlowPulse 2.2s ease-in-out infinite,
                wildMiddleOut var(--t-xfade-last) ease-out
                calc(var(--t-wild-start) + var(--t-wild-mid-hold)) forwards;
    }
    .scatter-wild-top {
        opacity: 0;
        visibility: hidden;

        will-change: opacity, transform;

        /*animation: wildTopIn var(--t-wild-fade) ease-out calc(*/
        /*        var(--t-wild-start) + var(--t-wild-mid-hold) + var(--t-wild-fade)*/
        /*) forwards;*/
        animation: wildTopIn var(--t-xfade-last) ease-out
        calc(var(--t-wild-start) + var(--t-wild-mid-hold) - var(--t-overlap-last)) forwards;
    }
    /* endregion */
}
@media (orientation: portrait) and (min-width: 540px) and (max-width: 1024px){
    :root{
        --scatter-top: 57%;
        --scatter-w: 80vw;
        --tiger-top: 33.8%;
        --tiger-w: 30%;
        --tiger-frame-offset: 6%;
    }
}
@media (orientation: portrait){
    .tiger { display: none; }
    .scatters-stack,
    .scatter-wild-stack{
        position: absolute;
        left: 50%;
        top: var(--scatter-top);
        transform: translate(-50%, -50%);
        width: var(--scatter-w);
        aspect-ratio: 1 / 2;
        height: auto;
        pointer-events: none;
        overflow: visible;
    }
    .scatters-stack { z-index: 9; }
    .scatter-wild-stack{
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        will-change: opacity, transform;
        animation: wildStackIn .25s ease-out calc(var(--t-wild-start) + .8s) forwards;
    }
    .scatters-stack > img,
    .scatter-wild-stack > img{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        pointer-events: none;
    }
    .scatters-stack .scatter-base{ z-index: 1; }
    .scatters-stack .scatter-top{
        z-index: 2;
        will-change: transform, filter, opacity;
        transform-origin: 50% 50%;
        animation:
                scatterGlowPulse 2.2s ease-in-out infinite,
                scatterTopFadeOut var(--t-stack-show) ease-out calc(var(--t-wheel-start) + var(--t-top-hide-delay)) forwards;
    }
    .scatter-wild-base   { z-index: 1; }
    .scatter-wild-shadow { z-index: 2; }
    .scatter-wild-middle { z-index: 3; }
    .scatter-wild-top    { z-index: 4; }
    .scatter-wild-shadow{
        opacity: 1;
        visibility: visible;
        will-change: opacity;
        animation: wildShadowOut var(--t-wild-fade) ease-out calc(
                var(--t-wild-start) + var(--t-wild-mid-hold) + var(--t-wild-fade)
        ) forwards;
    }
    .scatter-wild-middle{
        opacity: 1;
        visibility: visible;
        will-change: transform, filter, opacity;
        transform-origin: 50% 50%;
        animation:
                scatterGlowPulse 2.2s ease-in-out infinite,
                wildMiddleOut var(--t-xfade-last) ease-out
                calc(var(--t-wild-start) + var(--t-wild-mid-hold)) forwards;
    }
    .scatter-wild-top{
        opacity: 0;
        visibility: hidden;
        will-change: opacity, transform;
        animation: wildTopIn var(--t-xfade-last) ease-out
        calc(var(--t-wild-start) + var(--t-wild-mid-hold) - var(--t-overlap-last)) forwards;
    }
    .tiger-p-overlay{
        position: fixed;
        left: 50%;
        top: var(--scatter-top);
        transform: translate(-50%, -50%);
        width: var(--scatter-w);
        aspect-ratio: 1 / 2;
        pointer-events: none;
        z-index: 30;
    }
    .tiger-p-overlay .tiger-p{
        position: absolute;
        left: 50%;
        top: 40.5%;
        transform: translate(-50%, -100%);
        width: var(--tiger-w);
        height: auto;
        object-fit: contain;
        pointer-events: none;
    }
}
@media (orientation: portrait) and (min-width: 540px) and (max-width: 1024px) {
    :root{
        --scatter-shift: -7svh;
    }
    .scatters-stack,
    .scatter-wild-stack{
        position: absolute;
        left: 50%;
        top: calc(var(--scatter-top) + var(--scatter-shift));
        transform: translate(-50%, -50%);
        width: var(--scatter-w);
        aspect-ratio: 1 / 2;
        height: auto;
        pointer-events: none;
        overflow: visible;
    }
    .tiger-p-overlay{
        position: fixed;
        left: 50%;
        top: calc(var(--scatter-top) + var(--scatter-shift));
        transform: translate(-50%, -50%);
        width: var(--scatter-w);
        aspect-ratio: 1 / 2;
        pointer-events: none;
        z-index: 30;
    }
    .tiger-p-overlay .tiger-p{
        position: absolute;
        left: 50%;
        top: 40.5%;
        transform: translate(-50%, -100%);
        width: var(--tiger-w);
        height: auto;
        object-fit: contain;
        pointer-events: none;
    }
    .stack {
        width: clamp(200px, calc(16svw + 14svh), 500px);
    }
}
@media (orientation: landscape) and (min-width: 700px) and (max-width: 740px)
and (min-height: 520px) and (max-height: 560px) {
    .tiger {
        position: absolute;
        left: 17%;
        top: 61%;
        transform: translate(-50%, -50%);
        height: 45svh;
        width: auto;
        object-fit: contain;
        pointer-events: none;
        z-index: 18;
    }
    .scatters-stack,
    .scatter-wild-stack {
        width: 80svh;
    }
    .background-image {
        object-fit: cover;
        transform: scale(1.2) translateY(-10%);
        transform-origin: 50% 50%;
    }
}

.scatter-wild-middle {
    animation-duration: 2.2s, 1.6s !important;
    animation-timing-function: ease-in-out, ease-in-out !important;
}
.scatter-wild-top {
    animation-duration: 1.2s !important;
    animation-delay: calc(var(--t-wild-start) + var(--t-wild-mid-hold) + 0.6s) !important;
    animation-timing-function: ease-in-out !important;
}