/* Content positioning uses a separate box, leaving animated layers untouched. */
/* 覆盖式页头由运行时量出实际高度；没有覆盖态时该值为 0，不改变旧布局。 */
[data-blox-banner] [data-blox-banner-content] {
    box-sizing: border-box;
    padding-block-start: var(--blox-banner-safe-top, 0px);
}

@media (min-width: 768px) {
    [data-blox-banner] [data-blox-layout-desktop="1"] {
        display: flex;
        align-items: var(--blox-layout-desktop-vertical);
        justify-content: var(--blox-layout-desktop-horizontal);
        box-sizing: border-box;
        padding: max(calc(40px + max(var(--blox-layout-desktop-y), calc(-1 * var(--blox-layout-desktop-y)))), calc(var(--blox-banner-safe-top, 0px) + 16px))
            calc(24px + max(var(--blox-layout-desktop-x), calc(-1 * var(--blox-layout-desktop-x))));
    }
    [data-blox-banner] [data-blox-layout-desktop="1"] [data-blox-banner-shell] { display: contents; }
    [data-blox-banner] [data-blox-layout-desktop="1"] [data-blox-banner-box] {
        width: var(--blox-layout-desktop-width);
        max-width: 100%;
        min-width: 0;
        max-height: 100%;
        overflow: auto;
        pointer-events: auto;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        text-align: var(--blox-layout-desktop-align);
        transform: translate(var(--blox-layout-desktop-x), var(--blox-layout-desktop-y));
        overflow-wrap: anywhere;
    }
    [data-blox-banner] [data-blox-layout-desktop="1"] [data-blox-banner-box] > [data-blox-layer] {
        max-width: 100%;
        margin-inline: 0;
    }
    [data-blox-banner] [data-blox-layout-desktop="1"] [data-blox-banner-box] > p { margin-bottom: 0; }
    [data-blox-banner] [data-blox-layout-desktop="1"] [data-blox-banner-buttons] {
        display: flex;
        flex-wrap: wrap;
        justify-content: var(--blox-layout-desktop-buttons);
        gap: 12px;
        margin-top: var(--blox-layout-desktop-gap);
    }
}
@media (max-width: 767px) {
    [data-blox-banner] [data-blox-layout-mobile="1"] {
        display: flex;
        align-items: var(--blox-layout-mobile-vertical);
        justify-content: var(--blox-layout-mobile-horizontal);
        box-sizing: border-box;
        padding: max(calc(40px + max(var(--blox-layout-mobile-y), calc(-1 * var(--blox-layout-mobile-y)))), calc(var(--blox-banner-safe-top, 0px) + 16px))
            calc(24px + max(var(--blox-layout-mobile-x), calc(-1 * var(--blox-layout-mobile-x))));
    }
    [data-blox-banner] [data-blox-layout-mobile="1"] [data-blox-banner-shell] { display: contents; }
    [data-blox-banner] [data-blox-layout-mobile="1"] [data-blox-banner-box] {
        width: var(--blox-layout-mobile-width);
        max-width: 100%;
        min-width: 0;
        max-height: 100%;
        overflow: auto;
        pointer-events: auto;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        text-align: var(--blox-layout-mobile-align);
        transform: translate(var(--blox-layout-mobile-x), var(--blox-layout-mobile-y));
        overflow-wrap: anywhere;
    }
    [data-blox-banner] [data-blox-layout-mobile="1"] [data-blox-banner-box] > [data-blox-layer] {
        max-width: 100%;
        margin-inline: 0;
    }
    [data-blox-banner] [data-blox-layout-mobile="1"] [data-blox-banner-box] > p { margin-bottom: 0; }
    [data-blox-banner] [data-blox-layout-mobile="1"] [data-blox-banner-buttons] {
        display: flex;
        flex-wrap: wrap;
        justify-content: var(--blox-layout-mobile-buttons);
        gap: 12px;
        margin-top: var(--blox-layout-mobile-gap);
    }
}

[data-blox-banner] {
    --blox-banner-speed: 700ms;
    --blox-banner-stagger: 120ms;
    --blox-banner-hold: 5700ms;
    --blox-banner-height-pc: 650px;
    --blox-banner-height-mobile: 300px;
    --blox-banner-offset: 70px;
    --blox-banner-safe-top: 0px;
}

@media (max-width: 767px) {
    [data-blox-banner][data-blox-mobile-mode="hidden"] {
        display: none;
    }

    [data-blox-banner][data-blox-mobile-mode="fixed"] {
        height: var(--blox-banner-height-mobile);
        min-height: 0;
    }
}

[data-blox-banner][data-blox-height-mode="fixed"] {
    height: var(--blox-banner-height-mobile);
    min-height: 0;
}

[data-blox-banner][data-blox-height-mode="screen"] {
    height: max(240px, calc(100vh - var(--blox-banner-offset)));
    height: max(240px, calc(100svh - var(--blox-banner-offset)));
    min-height: 240px;
}

[data-blox-banner][data-blox-height-mode="cover-header"] {
    height: max(320px, 100vh);
    height: max(320px, 100svh);
    min-height: 320px;
}

@media (min-width: 768px) {
    [data-blox-banner][data-blox-height-mode="fixed"] {
        height: var(--blox-banner-height-pc);
    }
}

/* 传统分组的 fullscreen 历史契约只影响桌面端。 */
[data-blox-banner][data-blox-height-mode="screen"][data-blox-screen-desktop="1"] {
    height: var(--blox-banner-height-mobile);
    min-height: 0;
}

@media (min-width: 768px) {
    [data-blox-banner][data-blox-height-mode="screen"][data-blox-screen-desktop="1"] {
        height: max(240px, calc(100vh - var(--blox-banner-offset)));
        height: max(240px, calc(100svh - var(--blox-banner-offset)));
        min-height: 240px;
    }
}

[data-blox-banner] .swiper-slide {
    overflow: hidden;
}

[data-blox-banner-video] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    transition: opacity 240ms ease-out;
}

[data-blox-banner-video].blox-banner-video-ready {
    opacity: 1;
}

[data-blox-banner-content] {
    z-index: 2;
}

[data-blox-navigation="0"] .swiper-button-prev,
[data-blox-navigation="0"] .swiper-button-next,
[data-blox-pagination="0"] .swiper-pagination {
    display: none;
}

[data-blox-banner] [data-blox-layer],
[data-blox-banner] [data-blox-banner-bg] {
    will-change: opacity, transform, filter, clip-path;
}

[data-blox-content-motion="fade-up"] .swiper-slide-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.swiper-slide-active[data-blox-slide-content-motion="fade-up"] [data-blox-layer],
[data-blox-content-motion="fade-up"].blox-banner-static-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.blox-banner-static-active[data-blox-slide-content-motion="fade-up"] [data-blox-layer] {
    animation: blox-banner-fade-up var(--blox-banner-speed) cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--blox-layer-order, 0) * var(--blox-banner-stagger));
}

[data-blox-content-motion="slide-left"] .swiper-slide-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.swiper-slide-active[data-blox-slide-content-motion="slide-left"] [data-blox-layer],
[data-blox-content-motion="slide-left"].blox-banner-static-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.blox-banner-static-active[data-blox-slide-content-motion="slide-left"] [data-blox-layer] {
    animation: blox-banner-slide-left var(--blox-banner-speed) cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--blox-layer-order, 0) * var(--blox-banner-stagger));
}

[data-blox-content-motion="slide-right"] .swiper-slide-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.swiper-slide-active[data-blox-slide-content-motion="slide-right"] [data-blox-layer],
[data-blox-content-motion="slide-right"].blox-banner-static-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.blox-banner-static-active[data-blox-slide-content-motion="slide-right"] [data-blox-layer] {
    animation: blox-banner-slide-right var(--blox-banner-speed) cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--blox-layer-order, 0) * var(--blox-banner-stagger));
}

[data-blox-content-motion="zoom-in"] .swiper-slide-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.swiper-slide-active[data-blox-slide-content-motion="zoom-in"] [data-blox-layer],
[data-blox-content-motion="zoom-in"].blox-banner-static-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.blox-banner-static-active[data-blox-slide-content-motion="zoom-in"] [data-blox-layer] {
    animation: blox-banner-zoom-in var(--blox-banner-speed) cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--blox-layer-order, 0) * var(--blox-banner-stagger));
}

[data-blox-content-motion="clip-reveal"] .swiper-slide-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.swiper-slide-active[data-blox-slide-content-motion="clip-reveal"] [data-blox-layer],
[data-blox-content-motion="clip-reveal"].blox-banner-static-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.blox-banner-static-active[data-blox-slide-content-motion="clip-reveal"] [data-blox-layer] {
    animation: blox-banner-clip-reveal var(--blox-banner-speed) cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--blox-layer-order, 0) * var(--blox-banner-stagger));
}

[data-blox-content-motion="blur-up"] .swiper-slide-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.swiper-slide-active[data-blox-slide-content-motion="blur-up"] [data-blox-layer],
[data-blox-content-motion="blur-up"].blox-banner-static-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.blox-banner-static-active[data-blox-slide-content-motion="blur-up"] [data-blox-layer] {
    animation: blox-banner-blur-up var(--blox-banner-speed) cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--blox-layer-order, 0) * var(--blox-banner-stagger));
}

[data-blox-content-motion="pop-in"] .swiper-slide-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.swiper-slide-active[data-blox-slide-content-motion="pop-in"] [data-blox-layer],
[data-blox-content-motion="pop-in"].blox-banner-static-active:not([data-blox-slide-content-motion]) [data-blox-layer],
.blox-banner-static-active[data-blox-slide-content-motion="pop-in"] [data-blox-layer] {
    animation: blox-banner-pop-in var(--blox-banner-speed) cubic-bezier(.16, 1.35, .3, 1) both;
    animation-delay: calc(var(--blox-layer-order, 0) * var(--blox-banner-stagger));
}

[data-blox-background-motion="zoom-in"] .swiper-slide-active:not([data-blox-slide-background-motion]) [data-blox-banner-bg],
[data-blox-background-motion="zoom-in"].blox-banner-static-active:not([data-blox-slide-background-motion]) [data-blox-banner-bg],
.swiper-slide-active[data-blox-slide-background-motion="zoom-in"] [data-blox-banner-bg],
.blox-banner-static-active[data-blox-slide-background-motion="zoom-in"] [data-blox-banner-bg] {
    animation: blox-banner-bg-zoom-in var(--blox-banner-hold) linear both;
}

[data-blox-background-motion="zoom-out"] .swiper-slide-active:not([data-blox-slide-background-motion]) [data-blox-banner-bg],
[data-blox-background-motion="zoom-out"].blox-banner-static-active:not([data-blox-slide-background-motion]) [data-blox-banner-bg],
.swiper-slide-active[data-blox-slide-background-motion="zoom-out"] [data-blox-banner-bg],
.blox-banner-static-active[data-blox-slide-background-motion="zoom-out"] [data-blox-banner-bg] {
    animation: blox-banner-bg-zoom-out var(--blox-banner-hold) linear both;
}

.swiper-slide-active[data-blox-slide-background-motion="none"] [data-blox-banner-bg],
.blox-banner-static-active[data-blox-slide-background-motion="none"] [data-blox-banner-bg] {
    animation: none;
}

@keyframes blox-banner-fade-up {
    from { opacity: 0; transform: translate3d(0, 28px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes blox-banner-slide-left {
    from { opacity: 0; transform: translate3d(44px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes blox-banner-slide-right {
    from { opacity: 0; transform: translate3d(-44px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes blox-banner-zoom-in {
    from { opacity: 0; transform: scale(.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes blox-banner-clip-reveal {
    from { opacity: .35; clip-path: inset(0 100% 0 0); transform: translate3d(12px, 0, 0); }
    to { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); }
}

@keyframes blox-banner-blur-up {
    from { opacity: 0; filter: blur(10px); transform: translate3d(0, 22px, 0); }
    to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}

@keyframes blox-banner-pop-in {
    from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.76); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes blox-banner-bg-zoom-in {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

@keyframes blox-banner-bg-zoom-out {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    [data-blox-banner] [data-blox-layer],
    [data-blox-banner] [data-blox-banner-bg] {
        animation: none !important;
        transform: none !important;
    }

    [data-blox-banner-video] {
        display: none;
    }
}