.fade-in {
    opacity: 1;
    transition: opacity 500ms linear, display 500ms linear allow-discrete;
}

@starting-style {
    .fade-in {
        opacity: 0;
    }
}

/* ----- FADE OUT ----- */
.fade-out {
    opacity: 0;
    transition: opacity 300ms linear;
}
/* ----- /FADE OUT ----- */



/* ----- SLIDE DOWN ----- */
.slide-down {
    animation: slide-down 300ms linear forwards;
}

@keyframes slide-down {
    from {
        transform: translate(0%, -100%);
    }
    to {
        transform: translate(0%, 0%);
    }
}
/* ----- /SLIDE DOWN ----- */

/* ----- SLIDE UP ----- */
.slide-up {
    animation: slide-up 200ms linear forwards;
}

@keyframes slide-up {
    from {
        transform: translate(0%, 0%);
    }
    to {
        transform: translate(0%, -100%);
    }
}
/* ----- /SLIDE UP ----- */



/* ----- slideup_frombottom ----- */
.slideup_frombottom {
    animation: slideup_frombottom 300ms ease-in-out 1 normal forwards;
}

@keyframes slideup_frombottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* ----- /slideup_frombottom ----- */

/* ----- slidedown_tobottom ----- */
.slidedown_tobottom {
    animation: slidedown_tobottom 200ms ease-in-out 1 normal forwards;
}

@keyframes slidedown_tobottom {
    0% {
        transform: translateY(0%);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}
/* ----- /slidedown_tobottom ----- */

/* ---------- hotslide ---------- */
.hotswipe {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.hotswipe.active {
    opacity: 1;
    transform: translateY(0);
}
/* ---------- hotslide ---------- */

/* ----- WAVE-OVER SLIDE-DOWN ----- */
@keyframes waveOverSlide {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.wave-over {
    background: linear-gradient(0deg, #e6f9ff 0%, #4ed7fd 61%, #10cbfd 100%);
    animation: waveOverSlide 0.5s ease-out forwards;
}
/* ----- /WAVE-OVER SLIDE-DOWN ----- */



/* ---------- wind blow ---------- */
.wind-flip {
    animation: wind-flip 200ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    transform-style: preserve-3d;
}

@keyframes wind-flip {
    from {
        transform: translate(0px, 0px) rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: translate(-200px, -200px) rotateX(55deg) rotateY(-90deg);
        display: none;
    }
}
/* ---------- flip end ---------- */

/* ----- FIRE FLIP ----- */
.fire-flip {
    animation: fire-flip 300ms linear 1 forwards;
    transition: display 300ms allow-discrete;
}

@keyframes fire-flip {
    0% {
        filter: sepia(0%);
        clip-path: polygon(
            0% 0%,
            100% 0%,
            100% 100%,
            94% 97%,
            88% 100%,
            81% 96%,
            74% 100%,
            68% 97%,
            62% 100%,
            55% 95%,
            48% 100%,
            41% 97%,
            34% 100%,
            27% 96%,
            20% 100%,
            13% 97%,
            6% 100%,
            0% 98%
        );
    }

    100% {
        display: none;
        filter: sepia(100%);
        clip-path: polygon(
            0% 0%,
            100% 0%,
            100% 0%,
            94% 0%,
            88% 0%,
            81% 0%,
            74% 0%,
            68% 0%,
            62% 0%,
            55% 0%,
            48% 0%,
            41% 0%,
            34% 0%,
            27% 0%,
            20% 0%,
            13% 0%,
            6% 0%,
            0% 0%
        );
    }
}
/* ----- /FIRE FLIP ----- */

/* ----- WATER FLIP ----- */
.water-flip {
    animation: water-flip 400ms linear 1 forwards;
}

@keyframes water-flip {
    from {
        transform: scale(1) rotateX(0deg);
        filter: opacity(75%) blur(0vw);
    }
    to {
        transform: scale(0.8) rotateX(-90deg);
        filter: opacity(0%) blur(5vw);
        display: none;
    }
}
/* ----- /WATER FLIP ----- */

/* ----- SVG WAVE ----- */
.svg-wave {
    mask-image: linear-gradient(
        90deg,
        #000000 46%,
        #00000066 50%,
        #000000 54%
    );
    mask-size: 250% 100%;
    mask-repeat: no-repeat;
    animation: svg-wave 0.7s linear 1s 1 forwards;
}

@keyframes svg-wave {
    from {
        mask-position: 100% 0;
    }
    to {
        mask-position: 0% 0;
    }
}
/* ----- /SVG WAVE ----- */

/* ----- tap WAVE ----- */
.tap-wave {
    mask-image: linear-gradient(
        90deg,
        #000000 49%,
        #00000066 50%,
        #000000 51%
    );
    mask-size: 250% 100%;
    mask-repeat: no-repeat;
    animation: tap-wave 3.5s linear 5.5s infinite alternate;
}

@keyframes tap-wave {
    from {
        mask-position: 100% 0;
    }
    to {
        mask-position: 0% 0;
    }
}
/* ----- /tap WAVE ----- */

/* ----- TEXT WAVE ----- */
@property --text-sweep {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.text-wave {
    position: relative;
    background: none;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    -webkit-hyphens: none;
    hyphens: none;
    --text-cover: var(--color-glass-bg);
    --text-tail: 1.2em;
    --text-cursor: 0.6em;
}

.text-wave::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: var(--text-cover);
}

.text-wave[data-text-ready]::after {
    --text-front: calc(var(--text-left) - var(--text-cursor) + (var(--text-width) + var(--text-tail) + var(--text-cursor)) * var(--text-sweep));
    background-color: transparent;
    background-image:
        linear-gradient(
            to right,
            transparent calc(var(--text-front) - var(--text-tail)),
            #ffffff var(--text-front),
            #ffffff calc(var(--text-front) + var(--text-cursor)),
            var(--text-cover) calc(var(--text-front) + var(--text-cursor))
        ),
        linear-gradient(var(--text-cover), var(--text-cover));
    background-size:
        100% var(--text-row-height),
        100% max(0px, calc(100% - var(--text-row-bottom)));
    background-position:
        0 var(--text-row-top),
        0 var(--text-row-bottom);
    background-repeat: no-repeat;
    animation: var(--text-animation) calc(225ms * var(--text-line-count)) linear 1 forwards;
}

.text-wave[data-text-complete]::after {
    display: none;
}

/* ----- /TEXT WAVE ----- */

/* ----- FIZZ EFFECT ----- */
.fizz-effect:hover,
.fizz-effect:active {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.4) 2px, transparent 3px),
        radial-gradient(circle, rgba(255, 255, 255, 0.9) 1.5px, transparent 2px);
    background-size: 20px 20px, 30px 30px, 40px 40px;
    animation: fizz-loop 2s linear infinite;
}

@keyframes fizz-loop {
    0% {
        background-position: 0 120px, 15px 120px, 25px 120px;
    }
    100% {
        background-position: 0 0, 15px 0, 25px 0;
    }
}
/* ----- /FIZZ EFFECT ----- */

/* ----- WIND BG ----- */
.wind-bg {
    position: relative;
    isolation: isolate;
    background-color: #FFFFFF;
    animation: wind-bg-color 0.3s linear forwards;
}

.wind-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../wind-edge.svg");
    background-size: 10% auto;
    background-repeat: repeat;
    animation: wind-image 0.5s linear forwards;
}

@keyframes wind-bg-color {
    from {
        background-color: #FFFFFF;
    }
    to {
        background-color: #9BAFCF;
    }
}

@keyframes wind-image {
    from {
        background-position: 0% 0%;
        opacity: 1;
    }
    to {
        background-position: -65% 0%;
        opacity: 0;
    }
}
/* ----- /WIND BG ----- */

/* ----- WAVE BG ----- */
@property --wave-startColor {
    syntax: "<color>";
    initial-value: #10cbfd00;
    inherits: false;
}

@property --wave-endColor {
    syntax: "<color>";
    initial-value: #10cbfd00;
    inherits: false;
}

.wave-bg {
    background: linear-gradient(var(--wave-startColor), var(--wave-endColor));
    animation: wave-bg 0.7s linear 1 forwards;
}

@keyframes wave-bg {
    0% {
        display: flex;
        --wave-startColor: #10cbfd40;
        --wave-endColor: #10cbfd00;
    }
    25% {
        --wave-startColor: #10cbfd80;
        --wave-endColor: #10cbfd40;
    }
    50% {
        --wave-startColor: #10cbfdbf;
        --wave-endColor: #10cbfd80;
    }
    75% {
        --wave-startColor: #10cbfdff;
        --wave-endColor: #10cbfdbf;
    }
    100% {
        display: flex;
        --wave-startColor: #10cbfdff;
        --wave-endColor: #10cbfdff;
    }
}
/* ----- /WAVE BG ----- */

/* ----- FIRE BG ----- */
.fire-bg {
    position: relative;
    isolation: isolate;
    background-color: #FFFFFF;
    animation: fire-bg-color 0.5s linear forwards;
}

@keyframes fire-bg-color {
    from {
        background-color: #FFFFFF;
    }
    to {
        background-color: #FF003F;
    }
}
/* ----- /FIRE BG ----- */

/* ----- BLACK HOLE ----- */
.black-hole {
    position: relative;
    isolation: isolate;
}

.black-hole::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #000000;
    animation: black-hole 400ms linear forwards;
}

@keyframes black-hole {
    from {
        clip-path: circle(0% at 50% 50%);
    }
    to {
        clip-path: circle(100% at 50% 50%);
    }
}
/* ----- /BLACK HOLE ----- */

/* ----- FALLING ----- */
.falling {
    animation: falling 350ms linear forwards;
}

@keyframes falling {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
    }
}
/* ----- /FALLING ----- */

/* ----- BACK2WHITE ----- */
#curtain {
    background-color: var(--current-bg-color);
}

#curtain.back2white {
    background-color: #FFFFFF;
    transition: background-color 200ms linear;
}
/* ----- /BACK2WHITE ----- */

/* ----- WHITE2GREEN ----- */
.white2green {
    animation: white2green 200ms linear forwards;
}

@keyframes white2green {
    from {
        background-color: #FFFFFF;
    }
    to {
        background-color: #A7DE10;
    }
}
/* ----- /WHITE2GREEN ----- */