/* =========================================
   MAIN HERO SLIDE - CLEAN FINAL
   Scope: latest.skin.php
========================================= */

/* layout */
#slide_container,
#slide_container.hero-container,
#slide_container.container_wr {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}

@supports not (height: 100svh) {
    #slide_container,
    #slide_container.hero-container,
    #slide_container.container_wr {
        height: 100vh;
        min-height: 100vh;
    }
}

#slide_container .hero-swiper,
#slide_container .hero-swiper .swiper-wrapper,
#slide_container .hero-swiper .swiper-slide,
#slide_container .slide-media,
#slide_container .slide-link {
    width: 100%;
    height: 100%;
}

#slide_container .hero-swiper {
    margin: 0 auto;
    overflow: hidden;
}

#slide_container .hero-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
}

#slide_container .slide-link {
    position: relative;
    display: block;
}

/* media */
#slide_container .slide-media {
    position: relative;
    overflow: hidden;
    background: #000;
}

#slide_container .hero-swiper .swiper-slide img,
#slide_container .slide-link img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    transition: transform 6.8s ease-out;
    animation: none !important;
    will-change: transform;
}

#slide_container .slide-video,
#slide_container .slide-iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

#slide_container .slide-video {
    object-fit: cover;
    object-position: 50% 50%;
    transform: none;
    background: #000;
}

#slide_container .slide-media.youtube-wrap .slide-iframe {
    top: 50%;
    left: 50%;
    width: 177.78vh;
    height: 56.25vw;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* overlay */
#slide_container .hero-swiper .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .26) 76%, rgba(0, 0, 0, .42) 100%),
        linear-gradient(to bottom, rgba(10, 14, 18, .18) 0%, rgba(10, 14, 18, .05) 30%, rgba(10, 14, 18, .08) 58%, rgba(10, 14, 18, .34) 100%);
}

/* caption */
#slide_container .slide-caption {
    position: absolute;
    z-index: 13;
    color: #fff;
    pointer-events: none;
}

#slide_container .caption-title,
#slide_container .caption-subtitle {
    display: -webkit-box;
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px);
    word-break: keep-all;
    -webkit-box-orient: vertical;
    will-change: opacity, transform;
}

#slide_container .caption-title {
    font-family: var(--font-title);
}

#slide_container .caption-subtitle {
    font-family: var(--font-subtitle);
}

#slide_container .swiper-slide-active .caption-title {
    animation: captionElegant .9s cubic-bezier(.22, .61, .36, 1) forwards;
}

#slide_container .swiper-slide-active .caption-subtitle {
    animation: captionElegant .9s cubic-bezier(.22, .61, .36, 1) .16s forwards;
}

@keyframes captionElegant {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* navigation */
#slide_container .slide-nav {
    position: absolute;
    inset: 0;
    z-index: 14;
    pointer-events: none;
}

#slide_container .hero-swiper-prev,
#slide_container .hero-swiper-next {
    position: absolute;
    top: 50%;
    z-index: 15;
    width: 44px;
    height: 44px;
    margin-top: 0;
    border-radius: 999px;
    color: #fff;
    transform: translateY(-50%);
    pointer-events: auto;
    transition: color .28s ease, transform .28s ease, opacity .28s ease;
}

#slide_container .hero-swiper-prev:hover {
    color: var(--color-main);
    transform: translateY(-50%) translateX(-2px);
}

#slide_container .hero-swiper-next:hover {
    color: var(--color-main);
    transform: translateY(-50%) translateX(2px);
}

#slide_container .hero-swiper-prev::after,
#slide_container .hero-swiper-next::after {
    font-size: 50px;
    font-weight: 400;
}

#slide_container .swiper-pagination {
    position: absolute;
    left: 0;
    bottom: 18px;
    z-index: 10;
    width: 100%;
    text-align: center;
}

#slide_container .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .7);
    opacity: 1;
}

#slide_container .swiper-pagination-bullet-active {
    background: #fff;
}

/* timer */
#slide_container .slide-timer {
    position: absolute;
    left: 50%;
    bottom: 42px;
    z-index: 12;
    width: min(520px, calc(100% - 48px));
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .24);
    transform: translateX(-50%);
    pointer-events: none;
}

#slide_container .slide-timer .fill {
    display: block;
    width: 0%;
    height: 100%;
    background: rgba(255, 255, 255, .95);
    transform-origin: left center;
    transition: width .1s linear;
}

#slide_container .slide-timer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .18);
}

/* scroll hint */
#slide_container .scroll_text,
#slide_container .scroll-hint {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
}

#slide_container .scroll_text {
    position: absolute;
    left: 50%;
    bottom: 60px;
    z-index: 14;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .24);
    animation: scrollTextBlink 1.5s ease-in-out infinite;
}

#slide_container .scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 110px;
    z-index: 14;
    width: 28px;
    height: 46px;
    border: 2px solid rgba(255, 255, 255, .82);
    border-radius: 999px;
    transform: translateX(-50%);
}

#slide_container .scroll-hint .wheel {
    position: absolute;
    left: 50%;
    top: 9px;
    width: 4px;
    height: 8px;
    border-radius: 999px;
    background: #fff;
    animation: wheelMove 1.5s ease-in-out infinite;
}

#slide_container .scroll-hint .chev {
    position: absolute;
    left: 50%;
    bottom: -18px;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255, 255, 255, .85);
    border-bottom: 2px solid rgba(255, 255, 255, .85);
    animation: chev 1.5s ease-in-out infinite;
}

@keyframes scrollTextBlink {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, 2px);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    70% {
        opacity: .25;
        transform: translate(-50%, 4px);
    }
}

@keyframes wheelMove {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 12px);
    }
}

@keyframes chev {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, 0) rotate(45deg);
    }
    20% {
        opacity: 1;
    }
    70% {
        opacity: 0;
        transform: translate(-50%, 6px) rotate(45deg);
    }
}

/* image motion - desktop */
@media (min-width: 769px) {
    #slide_container .slide-caption {
        left: 7%;
        bottom: 15%;
        top: auto;
        max-width: min(760px, 72vw);
        text-align: left;
        transform: none;
    }

    #slide_container .caption-title {
        margin-bottom: 14px;
        font-size: clamp(40px, 4.2vw, 50px);
        font-weight: 700;
        line-height: 1.18;
        letter-spacing: -.035em;
        text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
        -webkit-line-clamp: 2;
    }

    #slide_container .caption-subtitle {
        max-width: 680px;
        margin-top: 0;
        color: rgba(255, 255, 255, .94);
        font-size: clamp(20px, 2vw, 25px);
        font-weight: 400;
        line-height: 1.7;
        letter-spacing: .01em;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .14);
        -webkit-line-clamp: 3;
    }

    #slide_container .hero-swiper-prev {
        left: 6%;
    }

    #slide_container .hero-swiper-next {
        right: 6%;
    }

    #slide_container .swiper-slide.d-focus-left img {
        object-position: left center;
        transform-origin: left center;
    }

    #slide_container .swiper-slide.d-focus-right img {
        object-position: right center;
        transform-origin: right center;
    }

    #slide_container .swiper-slide.d-focus-top img {
        object-position: center top;
        transform-origin: center top;
    }

    #slide_container .swiper-slide.d-focus-bottom img {
        object-position: center bottom;
        transform-origin: center bottom;
    }

    #slide_container .swiper-slide.d-motion-pan-left img,
    #slide_container .swiper-slide.d-motion-pan-right img,
    #slide_container .swiper-slide.d-motion-zoom-pan img {
        width: 142%;
        height: 100%;
    }

    #slide_container .swiper-slide.d-motion-pan-up img,
    #slide_container .swiper-slide.d-motion-pan-down img {
        width: 100%;
        height: 142%;
    }

    #slide_container .swiper-slide.d-motion-zoom-out img {
        transform: scale(1.15);
    }

    #slide_container .swiper-slide-active.d-motion-zoom-in img {
        transform: scale(1.13);
    }

    #slide_container .swiper-slide-active.d-motion-zoom-out img {
        transform: scale(1);
    }

    #slide_container .swiper-slide.d-motion-pan-left img {
        transform: translateX(-28%);
    }

    #slide_container .swiper-slide-active.d-motion-pan-left img {
        transform: translateX(0);
    }

    #slide_container .swiper-slide-active.d-motion-pan-right img {
        transform: translateX(-28%);
    }

    #slide_container .swiper-slide-active.d-motion-pan-up img {
        transform: translateY(-28%);
    }

    #slide_container .swiper-slide.d-motion-pan-down img {
        transform: translateY(-28%);
    }

    #slide_container .swiper-slide-active.d-motion-pan-down img {
        transform: translateY(0);
    }

    #slide_container .swiper-slide.d-motion-zoom-pan img {
        transform: translateX(0) scale(1.04);
    }

    #slide_container .swiper-slide-active.d-motion-zoom-pan img {
        transform: translateX(-26%) scale(1.14);
    }
}

/* image motion - mobile */
@media (max-width: 768px) {
    #slide_container,
    #slide_container.hero-container,
    #slide_container.container_wr,
    #slide_container .hero-swiper,
    #slide_container .hero-swiper .swiper-wrapper,
    #slide_container .hero-swiper .swiper-slide,
    #slide_container .slide-media,
    #slide_container .slide-link {
        height: 100svh !important;
    }

    #slide_container .hero-swiper .swiper-slide::after {
        background:
            radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 43%, rgba(0, 0, 0, .22) 75%, rgba(0, 0, 0, .34) 100%),
            linear-gradient(to bottom, rgba(10, 14, 18, .16) 0%, rgba(10, 14, 18, .04) 32%, rgba(10, 14, 18, .08) 68%, rgba(10, 14, 18, .28) 100%);
    }

    #slide_container .slide-caption {
        left: 50%;
        top: 48%;
        bottom: auto;
        width: calc(100% - 32px);
        text-align: center;
        transform: translate(-50%, -50%);
    }

    #slide_container .caption-title {
        margin-bottom: 8px;
        color: #fff;
        font-size: clamp(26px, 7.6vw, 36px);
        font-weight: 800;
        line-height: 1.28;
        text-shadow: 0 3px 3px rgba(0, 0, 0, .58);
        -webkit-line-clamp: 2;
    }

    #slide_container .caption-subtitle {
        margin-top: 0;
        color: rgba(255, 255, 255, .96);
        font-size: clamp(15px, 4vw, 18px);
        font-weight: 500;
        line-height: 1.6;
        text-shadow: 0 2px 3px rgba(0, 0, 0, .56);
        -webkit-line-clamp: 3;
    }

    #slide_container .hero-swiper .swiper-slide img,
    #slide_container .slide-link img {
        transition-duration: 5.8s;
    }

    #slide_container .hero-swiper-prev {
        left: 4%;
    }

    #slide_container .hero-swiper-next {
        right: 4%;
    }

    #slide_container .hero-swiper-prev::after,
    #slide_container .hero-swiper-next::after {
        display: none;
    }

    #slide_container .slide-timer {
        bottom: 26px;
        width: calc(100% - 32px);
    }

    #slide_container .scroll_text {
        bottom: 40px;
        font-size: 12px;
    }

    #slide_container .scroll-hint {
        bottom: 84px;
        width: 24px;
        height: 40px;
    }

    #slide_container .scroll-hint .wheel {
        top: 8px;
    }

    #slide_container .swiper-slide.m-focus-left img {
        object-position: left center;
        transform-origin: left center;
    }

    #slide_container .swiper-slide.m-focus-right img {
        object-position: right center;
        transform-origin: right center;
    }

    #slide_container .swiper-slide.m-motion-pan-left img,
    #slide_container .swiper-slide.m-motion-pan-right img,
    #slide_container .swiper-slide.m-motion-zoom-pan img {
        width: 155%;
        height: 100%;
    }

    #slide_container .swiper-slide.m-motion-pan-up img,
    #slide_container .swiper-slide.m-motion-pan-down img {
        width: 100%;
        height: 155%;
    }

    #slide_container .swiper-slide.m-motion-zoom-out img {
        transform: scale(1.18);
    }

    #slide_container .swiper-slide-active.m-motion-zoom-in img {
        transform: scale(1.16);
    }

    #slide_container .swiper-slide-active.m-motion-zoom-out img {
        transform: scale(1);
    }

    #slide_container .swiper-slide.m-motion-pan-left img {
        transform: translateX(-32%);
    }

    #slide_container .swiper-slide-active.m-motion-pan-left img {
        transform: translateX(0);
    }

    #slide_container .swiper-slide-active.m-motion-pan-right img {
        transform: translateX(-32%);
    }

    #slide_container .swiper-slide-active.m-motion-pan-up img {
        transform: translateY(-32%);
    }

    #slide_container .swiper-slide.m-motion-pan-down img {
        transform: translateY(-32%);
    }

    #slide_container .swiper-slide-active.m-motion-pan-down img {
        transform: translateY(0);
    }

    #slide_container .swiper-slide.m-motion-zoom-pan img {
        transform: translateX(0) scale(1.04);
    }

    #slide_container .swiper-slide-active.m-motion-zoom-pan img {
        transform: translateX(-30%) scale(1.18);
    }

    #slide_container .slide-video {
        object-fit: cover;
        object-position: 50% 50% !important;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    #slide_container .slide-timer {
        bottom: 34px;
    }

    #slide_container .scroll_text {
        bottom: 60px;
    }

    #slide_container .scroll-hint {
        bottom: 98px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #slide_container .scroll_text,
    #slide_container .scroll-hint .wheel,
    #slide_container .scroll-hint .chev,
    #slide_container .swiper-slide-active .caption-title,
    #slide_container .swiper-slide-active .caption-subtitle,
    #slide_container .hero-swiper .swiper-slide img {
        animation: none !important;
        transition: none !important;
    }

    #slide_container .caption-title,
    #slide_container .caption-subtitle {
        opacity: 1;
        transform: none;
    }

    #slide_container .hero-swiper .swiper-slide img {
        transform: none !important;
    }
}