:root {
    --space-x: 2rem;
    --width-c: 240rem;
    --vhs: calc(var(--vh, 1vh) * 100);
}

@media (width >=1024px) {
    :root {
        --space-x: 5rem;
    }
}

@media (width >=1280px) {
    :root {
        --space-x: 14rem;
    }
}

html.lenis,
html.lenis body {
    height: auto
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
    overscroll-behavior: contain
}

.lenis.lenis-smooth iframe {
    pointer-events: none
}

.lenis.lenis-autoToggle {
    transition-property: overflow;
    transition-duration: 1ms;
    transition-behavior: allow-discrete
}

.sw-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-top: 2.5rem;
}

.sw-btn {
    width: 5rem;
    height: 5rem;
    background-color: #E7F2F8;
    color: #C0D0DA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: all;
    font-size: 2.2rem;
}

.sw-btn.swiper-button-disabled {
    opacity: 0.4;
}

.sw-btn:active,
.desktop .sw-btn:hover {
    color: var(--c-primary);
}

/* SplitText line wrapper with overflow hidden */
.split-line-wrap {
    overflow: hidden;
    display: block;
}

/* Inner line content */
.split-line {
    display: block;
    transform-origin: bottom;
}

/* header */
.footer-wrapper .container {
    max-width: var(--width-c);
    padding: 0 2rem;
    margin: 0 auto;
}

.header-primary .container {
    max-width: var(--width-c);
    padding: 0 2rem;
    margin: 0 auto;
}


/* preload */
#preload {
    position: fixed;
    inset: 2rem;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    display: none;
}

#preload-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

#preload-circle svg {
    width: 100%;
    height: 100%;
}

#preload #preload-logo {
    width: 25rem;
}

#preload-logo {
    fill: #fff;
    display: none;
}

#preload-logo svg {
    width: 100%;
    height: 100%;
}

#preload-logo .preload-logo__item {
    /* opacity: 0; */
    transform: translateY(0rem) rotateX(-90deg);
    transform-origin: bottom;
}

/* preload logo animation */
@keyframes preloadItemUp {
    from {
        /* opacity: 0; */
        transform: translateY(0rem) rotateX(-90deg);
    }

    to {
        /* opacity: 1; */
        transform: translateY(0) rotateX(0);
    }
}

.preload-logo__item {
    animation: preloadItemUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform, opacity;
}

.preload-logo__item:nth-child(1) {
    animation-delay: 0s;
}

.preload-logo__item:nth-child(2) {
    animation-delay: 0.15s;
}

.preload-logo__item:nth-child(3) {
    animation-delay: 0.3s;
}

.preload-logo__item:nth-child(4) {
    animation-delay: 0.45s;
}

.preload-logo__item:nth-child(5) {
    animation-delay: 0.6s;
}

.preload-logo__item:nth-child(6) {
    animation-delay: 0.75s;
}

.flip-completed svg {
    /* fill: var(--c-primary) !important; */
    /* transition: fill 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); */
}

#header-logo #preload-logo g {
    animation: unset !important;
    transform: unset !important;
}



.flip-completed svg g {
    /* animation: unset !important; */
    /* animation: preloadItemUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; */
}



@media (width >=1024px) {
    .header-primary .container {
        padding: 0 5rem;
    }

    .footer-wrapper .container {
        padding: 0 calc(var(--space-x) / 2);
    }
}

@media (width>=1200px) {
    #preload {
        display: flex
    }

    #header {
        position: fixed;
        background: transparent;
        box-shadow: none;
        --h: -100%;
    }

    #header-logo .img-logo {
        display: none;
    }

    #preload-logo {
        display: block;
    }

    #header::before {
        content: '';
        position: absolute;
        background: #fff;
        inset: 0;
        z-index: -1;
        transform: translateY(var(--h));
    }

    .header-primary .item {
        opacity: 0;
    }

    /* slider */
    .sec-slider__nav {
        opacity: 0;
    }

    .sec-slider__content {
        opacity: 0;
    }
}