/* wedding-hero 视差图层：定位与层叠（构建产物 static/css/sections/public/wedding-hero.css）
 * 命名：组件写完整（wedding-hero / wedding-hero-layer），内部子元素短名（inner/title/...），变体用 -- */
.wedding-hero {
    position: relative;
    overflow: clip;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    aspect-ratio: 9 / 19;
    max-height: 2280px;
    padding: 0;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    background-color: #527ba4;

    .wedding-hero-layer {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;

        /* JS 只修改这个变量 */
        --parallax-y: 0px;
        transform: translate3d(0, var(--parallax-y), 0);

        backface-visibility: hidden;
        will-change: transform;
    }

    /* 图层变体 z-index：显式类名（& 后缀在 Chrome<120 / Safari<17.2 不解析，
     * 会导致 mid/front 的 z-index 失效、文字错位到最顶层） */
    .wedding-hero-layer--fallback {
        z-index: 0;
    }

    .wedding-hero-layer--back {
        z-index: 1;
    }

    .wedding-hero-layer--mid {
        z-index: 3;
    }

    .wedding-hero-layer--front {
        z-index: 4;
    }

    /* 文字融入画面：定位在上端 30%，去掉卡片背景，白色文字 */
    .inner {
        position: absolute;
        top: 30%;
        left: 50%;
        width: 100%;
        padding: var(--space-9) var(--space-6);
        z-index: 2;
        /* 顶层统一文字颜色：hero 内所有文字继承白色，无需逐元素设置 */
        color: var(--wedding-on-image);
        filter: drop-shadow(rgba(0, 72, 112, 0.7) 0px 2px 6px);

        --parallax-y: 0px;

        /*
         * 保留原来的：
         * translate(-50%, -50%)
         *
         * 再叠加视差位移。
         */
        transform: translate3d(-50%,
                calc(-50% + var(--parallax-y)),
                0);

        backface-visibility: hidden;
        border: 0;
        background: transparent;
        box-shadow: none;

        will-change: transform;

        @media (max-width: 1080px) {
            padding: var(--space-8) 18px;
        }
    }

    /* 文字排版（眉题 .kicker 的共享排版在 wedding.css 与 .eyebrow 合并定义） */
    .title {
        margin: 0;
        font-size: clamp(36px, 10vw, 72px);
        font-weight: 400;
        letter-spacing: var(--letter-spacing-wide);
    }

    .subtitle {
        margin: var(--space-6) 0 0;
        font-size: var(--font-size-md);
        letter-spacing: var(--letter-spacing-wide);
    }

    .date {
        display: inline-flex;
        gap: 14px;
        align-items: center;
        margin-top: var(--space-8);
        padding-top: 18px;
        border-top: 1px solid var(--wedding-on-image);
        font-family: Georgia, serif;
        font-size: var(--font-size-sm);
        letter-spacing: var(--letter-spacing-wide);
    }

    /* 首屏下滑提示层：以 small viewport height 为基准，手机浏览器地址栏显示时也不会压住提示。 */
    .wedding-hero-scroll-cue {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 99;
        background: linear-gradient(to top, var(--wedding-paper) 0%, transparent 30%);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        height: 100vh;
        height: 100svh;
        max-height: 100%;
        padding: 0 var(--space-4) max(var(--space-6), env(safe-area-inset-bottom));
        pointer-events: none;
    }

    .wedding-hero-scroll-cue__link {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-5);
        color: var(--wedding-accent);
        font-size: var(--font-size-sm);
        font-weight: bold;
        letter-spacing: var(--letter-spacing-wide);
        text-decoration: none;
        pointer-events: auto;
        touch-action: manipulation;
        /* 闪烁提示：纯 opacity 动画，合成器属性零重绘，任何设备都流畅 */
        animation: wedding-hero-scroll-cue-link 1.6s ease-in-out infinite;
    }

    .wedding-hero-scroll-cue__arrow {
        width: var(--space-3);
        height: var(--space-3);
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        transform: rotate(45deg);
        animation: wedding-hero-scroll-cue 2.2s ease-in-out infinite;
    }

    /* 进入动画：上移淡入（替代原 blur-in 模糊方案）。
     * 只加在文字子元素上——图片图层与 .inner 都有视差 transform，
     * 若动画带 transform 会覆盖 JS 的 --parallax-y 位移。
     *
     * 为什么用纯 opacity+transform 而非 filter: blur：
     * 手机 GPU 扛不住每帧重算高斯模糊（电脑不卡、手机卡）；
     * opacity/transform 是合成器属性，动画期间零重绘，任何设备都流畅。
     *
     * 注意：不能写静态 opacity: 0 —— backwards 模式下动画结束后元素回落自身样式，
     * 静态 opacity: 0 会导致文字在动画放完后消失；隐藏交给 backwards 的 0% 帧 */
    .rise-in {
        animation: wedding-hero-rise-in 0.5s cubic-bezier(0, 0, 0, 1) backwards;

        &.delay-1 {
            animation-delay: 0.12s;
        }

        &.delay-2 {
            animation-delay: 0.24s;
        }

        &.delay-3 {
            animation-delay: 0.36s;
        }
    }
}

/* 上移淡入 keyframes（独立命名，避免与站点全局同名动画冲突） */
@keyframes wedding-hero-rise-in {
    0% {
        transform: translateY(24px);
        opacity: 0;
    }

    100% {
        transform: none;
        opacity: 1;
    }
}

@keyframes wedding-hero-scroll-cue {

    0%,
    100% {
        opacity: 0.55;
        transform: translateY(0) rotate(45deg);
    }

    50% {
        opacity: 1;
        transform: translateY(var(--space-1)) rotate(45deg);
    }
}

/* 下滑提示文字闪烁（独立命名，避免与站点全局同名动画冲突） */
@keyframes wedding-hero-scroll-cue-link {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

/* 尊重系统「减少动态效果」设置：直接显示，不做入场动画 */
@media (prefers-reduced-motion: reduce) {
    .wedding-hero .rise-in {
        animation: none;
    }

    .wedding-hero .wedding-hero-scroll-cue__arrow {
        animation: none;
    }

    .wedding-hero .wedding-hero-scroll-cue__link {
        animation: none;
    }
}