/* Animation KeyFrames */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes clipX {
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }
    100% {
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
    }
}
@keyframes clipY {
    0% {
        -webkit-clip-path: inset(100% 0 0 0);
        clip-path: inset(100% 0 0 0);
    }
    100% {
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
    }
}
@keyframes clipYDown {
    0% {
        -webkit-clip-path: inset(0 0 100% 0);
        clip-path: inset(0 0 100% 0);
    }
    100% {
        -webkit-clip-path: inset(0);
        clip-path: inset(0);
    }
}
@keyframes blurFadeUp {
    100% {
        filter: blur(0);
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes circleClip {
    0% {
        clip-path: circle(0% at center);
    }
    100% {
        clip-path: circle(150% at center);
    }
}
@keyframes drawBorderW {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
@keyframes drawBorderH {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}
@keyframes zoomFadeIn {
    0% {
        opacity: 0;
        transform: scale(2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomFadeInWithBg {
    0% {
        opacity: 0;
        --scale: 2;
    }
    100% {
        opacity: 1;
        --scale: 1;
    }
}
@keyframes marquee-ltr {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(50%);
    }
}
@keyframes marquee-rtl {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
@keyframes bg-move-ltr {
    0% {
        background-position: left;
    }
    100% {
        background-position: right;
    }
}
@keyframes scale-x {
    100% {
        transform: scaleX(100%);
    }
}
@keyframes scaleUpFadeInMid {
    0% {
        transform: scaleY(0);
    }
    50% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: scaleY(100%);
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes scaleOut {
    100% {
        transform: scaleY(0);
    }
}
@keyframes scaleIn {
    100% {
        transform: scale(1.18);
    }
}
@keyframes growInItalic {
    0% {
        opacity: 0;
        transform: scale(.8) matrix(1, 0, -0.24, 0.97, 0, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1) matrix(1, 0, -0.24, 0.97, 0, 0);
    }
}
@keyframes circleClipTopRight {
    0% {
        -webkit-clip-path: circle(0% at 100% 0);
        clip-path: circle(0% at 100% 0);
    }
    100% {
        -webkit-clip-path: circle(150% at 100% 0);
        clip-path: circle(150% at 100% 0);
    }
}
@keyframes scaleVerticalIn {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}
@keyframes slideInBlurRight {
    0% {
        transform: translateX(100%);
        filter: blur(4px);
    }
    100% {
        transform: translateX(0);
        filter: blur(0);
    }
}
@keyframes bgMoveRTL {
    0% {
        background-position: right;
    }
    100% {
        background-position: left;
    }
}
@keyframes zoomOut {
    100% {
        transform: scale(1);
    }
}
@keyframes slideFadeInRtl {
    0% {
        transform: translateX(10px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/* Base Animation Class */
.fade-in {
    opacity: 0;
}
.slide-up {
    opacity: 0;
    transform: translateY(50px);
}
.grow-in-italic {
    transform: scale(0) matrix(1, 0, -0.24, 0.97, 0, 0);
    transform-origin: center;
}
.scaleVerticalIn {
    transform: scaleY(0);
}
.slide-fade-in-rtl {
    transform: translateX(10px);
    opacity: 0;
}
/* Common pink animation */
.blur-fade-up {
    filter: blur(10px);
    opacity: 0;
    transform: translateY(clamp(0px, 10%, 5vh));
}
/* Common teal animation */
.banner-clip,
.banner-clip__text {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
}
/* Common orange animation for body text */
.weak-blur-fade-up,
.weak-blur-fade-up-fast {
    filter: blur(3px);
    opacity: 0;
    transform: translateY(20px);
}
.fade-in-letter {
    opacity: 0;
}
/* Common red animation for images */
.circle-clip {
    clip-path: circle(0% at center);
}
/* Common green animation */
.clip-up {
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    will-change: clip-path;
}
.clip-down {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    will-change: clip-path;
}
/* Common brown animation */
.border-heading {
    --border-heading-color: var(--base-color);
    position: relative;

    .border-heading__v,
    .border-heading__h {
        position: absolute;
        display: flex;
        inset: 0;
        justify-content: space-between;
        z-index: 3;
    }

    .border-heading__h {
        flex-direction: column;
    }

    .border-heading__v::before,
    .border-heading__v::after,
    .border-heading__h::before,
    .border-heading__h::after {
        content: "";
        background-color: var(--border-heading-color);
    }
    .border-heading__v::before,
    .border-heading__v::after {
        width: calc(1 * var(--vw-with-scrollbar) / 1920);
        height: 100%;
        transform: scaleX(0);
    }
    .border-heading__h::before,
    .border-heading__h::after {
        width: 100%;
        height: calc(1 * var(--vw-with-scrollbar) / 1920);
        transform: scaleY(0);
    }
    .border-heading__v::before {
        transform-origin: bottom;
    }
    .border-heading__v::after {
        transform-origin: top;
    }
    .border-heading__h::before {
        transform-origin: left;
    }
    .border-heading__h::after {
        transform-origin: right;
    }
}
.zoom-in-text {
    opacity: 0;
    transform: scale(2);
    display: inline-block;
    transform-origin: center;
}
/* Common purple animation */
.scale-in {
    transform: scale(1);
}
.banner-slide-in {
    overflow: hidden;
}
.banner-slide-in__content {
    position: relative;
    display: block;
    transform: translateX(-102%);
    transition: transform 0.3s ease;
}
.banner-slide-in__content::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--main-color);
    transition: none;
}
.scale-x-ltr {
    transform-origin: left;
    transform: scaleX(0);
}
/* Animation Activation Classes */
.fade-in.animate {
    animation: fadeIn 0.5s ease-in-out forwards;
}
.slide-up.animate {
    animation: slideUp 0.5s ease-in-out forwards;
}
/* Only trigger this animation using parent */
.animate .banner-clip {
    animation: clipX 0.4s ease-in-out forwards;
}
.animate .banner-clip .banner-clip__text {
    animation: clipX 0.4s 0.4s ease-in-out forwards;
}
.blur-fade-up.animate {
    animation: blurFadeUp 0.8s ease-in-out forwards;
}
.animate .blur-fade-up {
    animation: blurFadeUp 0.8s ease-in-out forwards;
}
.weak-blur-fade-up.animate {
    animation: blurFadeUp 1s ease-in-out forwards;
}
.weak-blur-fade-up-fast.animate {
    animation: blurFadeUp 0.4s ease-in-out forwards;
}
.animate .circle-clip {
    animation: circleClip 2s ease-in-out forwards;
}
.animate .fade-in-letter {
    animation: fadeIn 0.5s ease-in-out forwards;
}
.animate .zoom-in-text {
    animation: zoomFadeIn 0.3s ease-in-out forwards;
}
.animate .grow-in-italic {
    animation: growInItalic 1s ease-in-out forwards;
}
.scaleVerticalIn.animate {
    animation: scaleVerticalIn 0.5s ease forwards;
}
.scale-x-ltr.animate {
    animation: scale-x 0.5s ease forwards;
}
.slide-fade-in-rtl.animate {
    animation: slideFadeInRtl 1.2s ease-in-out forwards;
}

.slide-in-blur-right__wrapper {
    position: relative;
    overflow: hidden;
}

.slide-in-blur-right {
    filter: blur(4px);
    transform: translateX(100%);
}

.border-heading.animate {
    .border-heading__h::before {
        animation: drawBorderW 0.2s ease-in-out forwards;
    }
    .border-heading__v::after {
        animation: drawBorderH 0.2s 0.2s ease-in-out forwards;
    }
    .border-heading__h::after {
        animation: drawBorderW 0.2s 0.4s ease-in-out forwards;
    }
    .border-heading__v::before {
        animation: drawBorderH 0.2s 0.6s ease-in-out forwards;
    }
}

.animate .clip-up {
    animation: clipY 0.4s ease forwards;
}
.animate .clip-down {
    animation: clipYDown 1s ease forwards;
}
.banner-slide-in.animate .banner-slide-in__content {
    transform: translateX(0);
}
.banner-slide-in.animate .banner-slide-in__content::before {
    transform: translateX(150%);
    opacity: 0;
    transition: transform 0.45s ease 0.5s, opacity 0.45s ease 0.75s;
}

.section-animate {
    .banner-clip {
        animation: clipX 0.4s ease-in-out forwards;
    }
    .banner-clip .banner-clip__text {
        animation: clipX 0.4s 0.4s ease-in-out forwards;
    }
    .blur-fade-up {
        animation: blurFadeUp 0.8s ease-in-out forwards;
    }
    .weak-blur-fade-up {
        animation: blurFadeUp 1s ease-in-out forwards;
    }
    .weak-blur-fade-up-fast {
        animation: blurFadeUp 0.4s ease-in-out forwards;
    }
    .circle-clip {
        animation: circleClip 2s ease-in-out forwards;
    }
    .fade-in-letter {
        animation: fadeIn 0.5s ease-in-out forwards;
    }
    .zoom-in-text {
        animation: zoomFadeIn 0.3s ease-in-out forwards;
    }
    .grow-in-italic {
        animation: growInItalic 1s ease-in-out forwards;
    }
    .slide-up {
        animation: slideUp 1s ease-in-out forwards;
    }
    .scale-in {
        animation: scaleIn 10s linear forwards;
    }
    .clip-up {
        animation: clipY 0.4s ease forwards;
    }
    .scale-x-ltr {
        animation: scale-x 0.5s ease forwards;
    }
    .scaleVerticalIn {
        animation: scaleVerticalIn 0.5s ease forwards;
    }
    .clip-down {
        animation: clipYDown 1s ease forwards;
    }
    .slide-in-blur-right {
        animation: slideInBlurRight 0.25s ease forwards;
    }
    .banner-slide-in__content {
        transform: translateX(0);
    }
    .banner-slide-in__content::before {
        transform: translateX(150%);
        opacity: 0;
        transition: transform 0.45s ease 0.5s, opacity 0.45s ease 0.75s;
    }
    .slide-fade-in-rtl {
        animation: slideFadeInRtl 1.2s ease-in-out forwards;
    }
}

/* PC Animation Activation Classes */
@media (min-width: 1025px) {
    .animate-pc {
        .fade-in {
            animation: fadeIn 1s ease-in-out forwards;
        }
        .slide-up {
            animation: slideUp 1s ease-in-out forwards;
        }
        .banner-clip {
            animation: clipX 0.4s ease-in-out forwards;
        }
        .banner-clip__text {
            animation: clipX 0.4s 0.4s ease-in-out forwards;
        }

        .border-heading {
            .border-heading__h::before {
                animation: drawBorderW 0.2s ease-in-out forwards;
            }
            .border-heading__v::after {
                animation: drawBorderH 0.2s 0.2s ease-in-out forwards;
            }
            .border-heading__h::after {
                animation: drawBorderW 0.2s 0.4s ease-in-out forwards;
            }
            .border-heading__v::before {
                animation: drawBorderH 0.2s 0.6s ease-in-out forwards;
            }
        }

        .blur-fade-up {
            animation: blurFadeUp 0.8s ease-in-out forwards;
        }
        .weak-blur-fade-up {
            animation: blurFadeUp 1s ease-in-out forwards;
        }
        .circle-clip {
            animation: circleClip 2s ease-in-out forwards;
        }
        .fade-in-letter {
            animation: fadeIn 0.5s ease-in-out forwards;
        }
        .zoom-in-text {
            animation: zoomFadeIn 0.3s ease-in-out forwards;
        }
        .scale-x-ltr {
            animation: scale-x 0.5s ease forwards;
        }
        .scaleVerticalIn {
            animation: scaleVerticalIn 0.5s ease forwards;
        }
        .clip-up {
            animation: clipY 0.4s ease forwards;
        }
        .banner-slide-in__content {
            transform: translateX(0);
        }
        .banner-slide-in__content::before {
            transform: translateX(150%);
            opacity: 0;
            transition: transform 0.45s ease 0.5s, opacity 0.45s ease 0.75s;
        }
        .slide-fade-in-rtl {
            animation: slideFadeInRtl 1.2s ease-in-out forwards;
        }
    }
}
/* SP Animation Activation Classes */
@media (max-width: 1024px) {
    .fade-in.animate-sp {
        animation: fadeIn 1s ease-in-out forwards;
    }
    .slide-up.animate-sp {
        animation: slideUp 1s ease-in-out forwards;
    }
    .animate-sp .banner-clip {
        animation: clipX 0.4s ease-in-out forwards;
    }
    .animate-sp .banner-clip__text {
        animation: clipX 0.4s 0.4s ease-in-out forwards;
    }

    .border-heading.animate-sp {
        .border-heading__h::before {
            animation: drawBorderW 0.2s ease-in-out forwards;
        }
        .border-heading__v::after {
            animation: drawBorderH 0.2s 0.2s ease-in-out forwards;
        }
        .border-heading__h::after {
            animation: drawBorderW 0.2s 0.4s ease-in-out forwards;
        }
        .border-heading__v::before {
            animation: drawBorderH 0.2s 0.6s ease-in-out forwards;
        }
    }

    .blur-fade-up.animate-sp {
        animation: blurFadeUp 0.8s ease-in-out forwards;
    }
    .weak-blur-fade-up.animate-sp {
        animation: blurFadeUp 1s ease-in-out forwards;
    }
    .animate-sp .circle-clip {
        animation: circleClip 2s ease-in-out forwards;
    }
    .animate-sp > .fade-in-letter {
        animation: fadeIn 0.5s ease-in-out forwards;
    }
    .animate-sp > .zoom-in-text {
        animation: zoomFadeIn 0.3s ease-in-out forwards;
    }
    .animate-sp .clip-up {
        animation: clipY 0.4s ease forwards;
    }
    .scaleVerticalIn.animate-sp {
        animation: scaleVerticalIn 0.5s ease forwards;
    }
    .banner-slide-in.animate-sp .banner-slide-in__content {
        transform: translateX(0);
    }
    .banner-slide-in.animate-sp .banner-slide-in__content::before {
        transform: translateX(150%);
        opacity: 0;
        transition: transform 0.45s ease 0.5s, opacity 0.45s ease 0.75s;
    }
    .scale-x-ltr.animate-sp {
        animation: scale-x 0.5s ease forwards;
    }
    .slide-fade-in-rtl.animate-sp {
        animation: slideFadeInRtl 1.2s ease-in-out forwards;
    }
}