/* --- 1. 彻底封死原生滚动 --- */
html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100vh; /* 严格锁死一屏 */
    overflow: hidden; /* 没收滚动条 */
    background-color: #000; /* 底色纯黑，照片溶解时不会露白 */
    font-family: 'Manrope', sans-serif;
    color: #fff;
    touch-action: none; /* 没收手机端的所有原生划动行为 */
}

/* --- 2. 悬浮 UI 层 --- */
.ui-layer {
    position: absolute; top: 0; left: 0; width: 100%;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 2rem 3vw; box-sizing: border-box;
    z-index: 100; pointer-events: none; /* 让鼠标穿透，防止挡住图片 */
}

.btn-back {
    color: rgba(255, 255, 255, 0.9); text-decoration: none;
    font-size: 1rem; letter-spacing: 0.2em; font-weight: 600;
    pointer-events: auto; transition: color 0.3s ease;
}
.btn-back:hover { color: #fff; }

.scroll-hint {
    font-size: 0.65rem; letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.4);
    writing-mode: vertical-rl; /* 竖排文字，增加日系画册的冷感 */
    animation: fadePulse 3s infinite;
}
@keyframes fadePulse {
    0%, 100% { opacity: 0.3; } 50% { opacity: 1; }
}

/* --- 专属的滑动引导线 --- */
.scroll-indicator {
    position: absolute;
    bottom: 3rem; /* 和两边的数据保持在同一水平线上 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    z-index: 100;
    pointer-events: none;
    /* 极其平滑的消散动画 */
    transition: opacity 1s ease-out, filter 1s ease-out; 
}

.indicator-text {
    font-size: 1rem; /* 极致的小 */
    letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 1);
}

.indicator-line {
    width: 1px; /* 极细的线 */
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
}

/* 这根纯白色的线会像水滴一样不断坠落 */
.line-progress {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: -100%;
    animation: scrollDrop 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollDrop {
    0% { top: -100%; }
    50% { top: 0; }
    100% { top: 100%; }
}

/* --- 3. 极简参数仪表盘 --- */
.data-layer {
    position: absolute; bottom: 2.5rem; left: 3vw; right: 3vw;
    display: flex; justify-content: space-between; align-items: flex-end;
    z-index: 100; pointer-events: none;
}

.label {
    display: block; font-size: 0.8rem; letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 0.7); margin-bottom: 0.5rem;
}

.altitude-box h2 {
    font-family: 'Playfair Display', serif; font-size: 3rem;
    font-weight: 400; margin: 0; line-height: 0.8;
    /* 极致平滑的文字切换过渡 */
    transition: all 0.5s ease; 
}

.exif-box { text-align: right; }
.exif-box p {
    font-size: 0.8rem; letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.8); margin: 0;
}

/* --- 4. 冰霜溶解核心引擎 (The Frost-Glass) --- */
.frozen-viewport {
    position: relative; width: 100vw; height: 100vh;
}

.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    /* 默认状态：透明且处于高斯大雾之中 */
    opacity: 0;
    filter: blur(25px) brightness(0.5) grayscale(30%); 
    /* 极其昂贵的长线过渡，这就是所谓的“呼吸感” */
    transition: opacity 1.8s ease-in-out, filter 1.8s ease-in-out;
    z-index: 1;
}

/* 当照片被激活时，从大雾中结像 */
.slide.active {
    opacity: 1;
    filter: blur(0px) brightness(1) grayscale(0%);
    z-index: 10;
}

.slide img {
    width: 100%; height: 100%;
    object-fit: cover; /* 保证无论手机电脑，图片都铺满全屏 */
    object-position: center 40%; /* 稍微偏上一点对齐，通常雪山构图中心偏上 */
}

/* 压暗蒙版：防止纯白色的雪导致前景的白色文字看不见 */
.vignette {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.4) 100%);
    z-index: 2; pointer-events: none;
}

/* --- 5. 手机端特化 --- */
@media (max-width: 768px) {
    .data-layer {
        flex-direction: column; align-items: flex-start; gap: 2rem;
        bottom: 2rem;
    }
    .altitude-box h2 { font-size: 3.5rem; }
    .exif-box { text-align: left; }
    .scroll-hint { display: none; } /* 手机屏太小，藏掉多余提示 */
    /* 滑动引力线转移到右侧 */
    .scroll-indicator {
        left: auto;             
        transform: none;        
        right: 6vw;             
        bottom: 3rem;           
        align-items: center;  /* 保持文字和线条居中对齐 */
    }

    /* 🎯 你的坚持：保留文字，并改为极简的竖排排版 */
    .indicator-text {
        writing-mode: vertical-rl; /* 竖排显示，不占横向空间 */
        margin-bottom: 0.5rem;     /* 和下方的线条拉开一点呼吸感 */
        letter-spacing: 0.3em;     /* 竖排时稍微收紧一点字间距 */
    }
}