/* ============================================================
   Photo Wall + Water Reflection Effect
   照片墙水中倒影 - Apple CoverFlow 风格展示效果
   ============================================================ */

/* --- 3D 展台舞台 --- */
.cover-3d-stage {
    perspective: 1200px;
    perspective-origin: 50% 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    padding-bottom: 8px;
}

/* --- 3D 封面包裹层 (透视 + 曲面倾斜) --- */
.cover-3d-wrap {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(4deg);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
    /* 使用 -webkit-box-reflect 创建水中倒影 */
    -webkit-box-reflect: below 2px linear-gradient(to bottom,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.12) 25%,
            rgba(255, 255, 255, 0.04) 50%,
            transparent 75%);
}

/* 曲面高光叠加层 */
.cover-3d-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.08) 25%,
            transparent 50%,
            rgba(0, 0, 0, 0.03) 75%,
            rgba(0, 0, 0, 0.08) 100%);
    pointer-events: none;
    z-index: 10;
    opacity: 0.75;
}

/* --- 封面下方环境光晕 --- */
.cover-glow {
    position: absolute;
    inset: -35%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
            var(--glow-color, rgba(26, 188, 156, 0.3)) 0%,
            var(--glow-color-mid, rgba(26, 188, 156, 0.12)) 35%,
            transparent 65%);
    filter: blur(var(--glow-blur, 45px));
    opacity: var(--glow-opacity, 0.65);
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.8s ease, background 1.2s ease;
    animation: glowPulse 5s ease-in-out infinite alternate;
}

@keyframes glowPulse {
    0% {
        opacity: var(--glow-opacity, 0.65);
        transform: scale(1);
    }

    100% {
        opacity: calc(var(--glow-opacity, 0.65) * 1.25);
        transform: scale(1.06);
    }
}

/* --- 反射面（倒影备用方案，兼容非WebKit浏览器） --- */
.cover-reflection {
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
    position: relative;
    z-index: 0;
    margin-top: -1px;
    height: 0;
    overflow: hidden;
    /* 仅在不支持 -webkit-box-reflect 时显示 */
}

/* 如果浏览器不支持 box-reflect 则显示 JS 倒影 */
@supports not (-webkit-box-reflect: below 0px transparent) {
    .cover-reflection {
        height: var(--reflection-height, 90px);
        overflow: visible;
    }

    .cover-reflection__mirror {
        width: var(--reflection-width, 200px);
        height: var(--reflection-source-height, 200px);
        background-size: cover;
        background-position: center bottom;
        border-radius: 16px;
        transform: scaleY(-1);
        transform-origin: top center;
        -webkit-mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.28) 0%,
                rgba(0, 0, 0, 0.1) 35%,
                transparent 70%);
        mask-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.28) 0%,
                rgba(0, 0, 0, 0.1) 35%,
                transparent 70%);
        filter: blur(1.5px) saturate(0.65) brightness(0.65);
        opacity: 0.8;
        transition: opacity 0.6s ease;
    }
}

/* 水面分隔线（微妙光泽线） */
.cover-reflection::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--reflection-width, 200px) + 60px);
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.04) 20%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.04) 80%,
            transparent 100%);
    z-index: 2;
    display: none;
}

@supports not (-webkit-box-reflect: below 0px transparent) {
    .cover-reflection::before {
        display: block;
    }
}

/* 反射面底部的水面微光 */
.cover-reflection__mirror {
    display: none;
}

@supports not (-webkit-box-reflect: below 0px transparent) {
    .cover-reflection__mirror {
        display: block;
    }
}

/* ============================================================
   桌面端覆盖 (≥ 769px)
   ============================================================ */
@media (min-width: 769px) {
    .cover-3d-stage {
        perspective: 1600px;
        perspective-origin: 50% 30%;
    }

    .cover-3d-wrap {
        transform: rotateX(5deg);
        -webkit-box-reflect: below 3px linear-gradient(to bottom,
                rgba(255, 255, 255, 0.3) 0%,
                rgba(255, 255, 255, 0.15) 20%,
                rgba(255, 255, 255, 0.05) 45%,
                transparent 70%);
    }

    .cover-3d-wrap:hover {
        transform: rotateX(2deg) scale(1.03);
    }

    .cover-glow {
        --glow-blur: 55px;
    }
}

/* ============================================================
   手机端覆盖 (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    .cover-3d-stage {
        perspective: 900px;
        perspective-origin: 50% 38%;
    }

    .cover-3d-wrap {
        transform: rotateX(3deg);
        -webkit-box-reflect: below 1px linear-gradient(to bottom,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0.08) 30%,
                transparent 60%);
    }

    .cover-glow {
        --glow-blur: 30px;
        --glow-opacity: 0.5;
    }
}