/* FunIDC v350: shared Infrastructure Deck hero system. */

.home-hero-section {
    background: #ffffff !important;
    border-top: 0 !important;
}

.home-hero-section::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Homepage v310: seamless UCloud-style carousel rhythm and pagination. */
.home-hero-section[data-hero-carousel] {
    cursor: grab;
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
}

.home-hero-section[data-hero-carousel] .home-hero-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.home-hero-section[data-hero-carousel].is-dragging {
    cursor: grabbing;
    user-select: none;
}

.home-hero-section[data-hero-carousel] .home-hero-track {
    display: flex !important;
    width: 100% !important;
    transform: translate3d(0, 0, 0);
    transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    will-change: transform;
    backface-visibility: hidden;
}

.home-hero-section[data-hero-carousel].is-dragging .home-hero-track,
.home-hero-section[data-hero-carousel].is-jumping .home-hero-track {
    transition: none !important;
}

.home-hero-section[data-hero-carousel] .home-hero-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    backface-visibility: hidden;
}

.home-hero-section[data-hero-carousel] .home-hero-visual img {
    user-select: none;
    -webkit-user-drag: none;
}

.home-hero-section[data-hero-carousel] .home-hero-progress {
    bottom: 26px !important;
    z-index: 20;
    display: flex !important;
    gap: 16px !important;
    opacity: 1 !important;
    pointer-events: auto;
}

.home-hero-section[data-hero-carousel] .home-hero-progress button {
    width: 30px !important;
    height: 20px !important;
}

.home-hero-section[data-hero-carousel] .home-hero-progress button::before,
.home-hero-section[data-hero-carousel] .home-hero-progress span {
    height: 4px !important;
}

.home-hero-section[data-hero-carousel] .home-hero-progress button::before {
    background: #d8e3f0 !important;
}

.home-hero-section[data-hero-carousel] .home-hero-progress button.is-active span {
    animation: heroProgress 4s linear forwards;
}

.home-hero-section[data-hero-carousel].is-paused .home-hero-progress button.is-active span {
    animation-play-state: paused;
}

.home-hero-section + .product-section.home-section {
    border-top: 0 !important;
    background: linear-gradient(180deg, #ffffff 0, #f8fafc 150px) !important;
}

@media (min-width: 761px) {
    .home-hero-section,
    .home-hero-inner,
    .home-hero-track,
    .home-hero-slide,
    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        height: 560px !important;
        min-height: 560px !important;
    }

    .home-hero-copy,
    .home-hero-slide:not(:first-child) .home-hero-copy {
        left: max(32px, calc((100vw - 1200px) / 2 + 60px)) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .home-hero-visual img,
    .home-hero-slide:not(:first-child) .home-hero-visual img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
    }

    .home-hero-slide::after {
        background: none !important;
    }
}

.product-page .product-hero,
.product-page .product-hero-inner,
.about-hero,
.about-hero-inner,
.legal-hero,
.legal-hero-inner {
    min-height: 560px;
}

.product-page-cloud .product-hero,
.product-page-metal .product-hero,
.product-page-seo .product-hero,
.about-hero {
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}

.product-page-cloud .product-hero {
    background-image: url("/web/funidc/static/images/home-hero-cloud-v372-ucloud.webp");
}

.product-page-metal .product-hero {
    background-image: url("/web/funidc/static/images/home-hero-metal-v385-ucloud-orange.webp");
}

.product-page-seo .product-hero {
    background-image: url("/web/funidc/static/images/home-hero-seo-v378-aligned.webp");
}

.product-page .product-hero::before,
.about-hero::before {
    display: none;
}

.about-hero {
    background-image: url("/web/funidc/static/images/about-hero-v350-deck.webp");
}

.legal-hero {
    background-color: #ffffff;
}

.legal-hero::before {
    background-image: var(--legal-hero-image, url("/web/funidc/static/images/legal-hero-v350-deck.webp"));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}

.legal-hero::after {
    display: none;
}

.legal-tabs {
    margin: 24px auto 0;
}

@media (max-width: 760px) {
    .home-hero-section,
    .home-hero-inner,
    .home-hero-track,
    .home-hero-slide,
    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        height: 540px !important;
        min-height: 540px !important;
    }

    .home-hero-visual img,
    .home-hero-slide:not(:first-child) .home-hero-visual img {
        object-fit: cover !important;
        object-position: center bottom !important;
        transform: none !important;
    }

    .home-hero-slide::after {
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 56%, rgba(255, 255, 255, 0.72) 62%, rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0) 76%) !important;
    }

    .home-hero-section[data-hero-carousel] .home-hero-progress {
        bottom: 14px !important;
        gap: 12px !important;
    }

    .home-hero-section[data-hero-carousel] .home-hero-progress button {
        width: 26px !important;
        height: 18px !important;
    }

    .home-hero-section[data-hero-carousel] .home-hero-progress button::before,
    .home-hero-section[data-hero-carousel] .home-hero-progress span {
        height: 3px !important;
    }

    .product-page .product-hero,
    .product-page .product-hero-inner,
    .about-hero,
    .about-hero-inner,
    .legal-hero,
    .legal-hero-inner {
        min-height: 820px;
    }

    .product-page-cloud .product-hero,
    .product-page-metal .product-hero,
    .product-page-seo .product-hero,
    .about-hero {
        background-position: center bottom;
        background-size: cover;
    }

    .product-page-cloud .product-hero {
        background-image: url("/web/funidc/static/images/home-hero-cloud-v372-ucloud-mobile.webp");
    }

    .product-page-metal .product-hero {
        background-image: url("/web/funidc/static/images/home-hero-metal-v385-ucloud-orange-mobile.webp");
    }

    .product-page-seo .product-hero {
        background-image: url("/web/funidc/static/images/home-hero-seo-v378-aligned-mobile.webp");
    }

    .about-hero {
        background-image: url("/web/funidc/static/images/about-hero-v350-deck-mobile.webp");
    }

    .product-page .product-hero::before,
    .about-hero::before {
        display: block;
        opacity: 1;
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, rgba(255, 255, 255, 0.72) 64%, rgba(255, 255, 255, 0.08) 71%, rgba(255, 255, 255, 0) 76%);
    }

    .legal-hero::before {
        background-image:
            linear-gradient(180deg, #ffffff 0%, #ffffff 58%, rgba(255, 255, 255, 0.72) 64%, rgba(255, 255, 255, 0.08) 71%, rgba(255, 255, 255, 0) 76%),
            var(--legal-hero-image-mobile, url("/web/funidc/static/images/legal-hero-v350-deck-mobile.webp"));
        background-position: center bottom;
        background-size: cover;
    }

    .legal-tabs {
        margin: 16px auto 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-section[data-hero-carousel] .home-hero-track {
        transition: none !important;
    }

    .home-hero-section[data-hero-carousel] .home-hero-progress button.is-active span {
        animation: none !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .home-hero-section,
    .home-hero-inner,
    .home-hero-track,
    .home-hero-slide,
    .home-hero-visual,
    .home-hero-slide:not(:first-child) .home-hero-visual {
        height: 520px !important;
        min-height: 520px !important;
    }
}