@charset "utf-8";
/* CSS Document */

/* ── 仅保留 nav-pills 所需的变量，按需合并进你的 :root ── */
:root {
    --color-accent: #e8ff47;   /* 荧光黄 hover 色 */
    --color-muted:  #555;      /* 默认文字色 */
    --font-body:    'DM Sans', sans-serif; /* 可换成你的字体 */
}

/* ── nav-pills 核心样式 ── */
.nav-pills {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari 兼容 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 6px 12px;
}

.nav-pills a {
    color: var(--color-muted);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    transition: color 0.3s, background 0.3s;
    white-space: nowrap; /* 防止在窄屏换行 */
}

.nav-pills a:hover,
.nav-pills a.active {  /* .active 由 JS 动态添加，可选 */
    color: var(--color-accent);
    background: rgba(232, 255, 71, 0.08);
}


/* ==================== 淡出淡入 ==================== */
.fade,
.stagger-item {
    opacity: 0;
    transform: translateY(56px);
}

/* ==================== 视差背景 ==================== */
.parallax-container {
    position: relative;
    overflow: hidden; /* 隐藏超出容器的图片 */
}

.parallax-image {
    position: absolute;
    top: -40%; /* 预留上下溢出空间，防止滚动时露出白边 */
    left: 0;
    width: 100%;
    height: 120%; /* 图片高度要大于容器高度，才有空间移动 */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url("../images/IMG_2626.JPG");
    background-size: cover;
    /* background-position: center; */
    background-position: center top;
    z-index: 1;
    will-change: transform; /* 开启硬件加速，保证动画流畅 */
}

.parallax-content {
    position: relative;
    z-index: 2; /* 确保内容在图片上方 */
}

/* ==================== 滚动提示箭头 ==================== */
.sdh-scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 16px; */
    font-size: 10px;
    letter-spacing: 4px;
    color: #fff;
    position: absolute;
    bottom: -2%;
    right: 4%;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    z-index: 99;
}
.sdh-scroll-hint span{
    transform: rotate(90deg); /* 顺时针旋转 90 度 */
}
.sdh-scroll-arrow {
    margin-top: 16px;
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #fff);
    /* 上下循环动画：提示用户滚动 */
    animation: sdh-arrow-pulse 1.5s ease-in-out infinite;
}
@keyframes sdh-arrow-pulse {
    0%, 100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}
@media only screen and (max-width: 480px) {
    .sdh-scroll-hint {
        bottom: -8%;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* ============================================================
    ② CURSOR INTERACTION — 自定义鼠标系统
    类名前缀：.ci-
============================================================ */

/* 主光标：大圆圈，跟随有延迟（lerp） */
.ci-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(232,255,71,0.7);
  border-radius: 50%;
  pointer-events: none; /* 穿透：不阻挡鼠标事件 */
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, border-color .3s, background .3s, border-radius .3s;
  will-change: transform;
}

/* 中心点：快速跟随，精确指示位置 */
.ci-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  background: #e8ff47;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100000;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* hover 可交互元素时，光标变成大圆 */
.ci-cursor-ring.is-hovering {
  width: 70px; height: 70px;
  background: rgba(232,255,71,0.08);
  border-color: #e8ff47;
}

/* hover 磁吸按钮时显示"HOVER"文字 */
.ci-cursor-ring.is-magnetic {
  width: 80px; height: 80px;
  background: rgba(232,255,71,0.12);
  border-color: transparent;
}
.ci-cursor-ring.is-magnetic::after {
  content: 'HOVER';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  letter-spacing: 2px;
  color: #fff;
}

/* =====================================================
    ⑥ TEXT ANIMATION — 逐字淡入 + 上移（stagger错位）
    =====================================================
    核心技术：
    1. 用JS将文字拆分成单独的<span>，每个字一个span
    2. 每个span设置 animation-delay 递增（这就是stagger）
    3. CSS keyframe 定义 从下方淡入 的动画
    4. IntersectionObserver监听元素进入视口时触发
===================================================== */
/* 包裹文字的容器 */
.text-split-wrap {
    overflow: hidden; /* 防止初始偏移状态下文字可见 */
}
/* 拆分后每个字的span：初始状态不可见 */
.char-span {
    display: inline-block;
    opacity: 0;
    transform: translateY(28px); /* 初始位置：在下方 */
}
/* 触发动画后，每个span执行此keyframe */
@keyframes charReveal {
    0% {
        opacity: 0;
        transform: translateY(28px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 被IntersectionObserver激活后添加 .is-revealed class */
.is-revealed .char-span {
    animation: charReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    /* forwards：动画结束后保持最终状态 */
}
/* 确保单词作为一个整体，绝对不从中间折行 */
.word-wrap {
    display: inline-block;
    white-space: nowrap;
}


/* ==================== waterfall ==================== */
/* 页面标题 */
.waterfall-title {
    text-align: center;
    color: #ffffff;
    font-size: 2.5rem;
    margin-bottom: 32px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    animation: titleSlideDown 1s ease-out;
}

/* 标题入场动画 */
@keyframes titleSlideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 瀑布流主容器 - 核心组件 */
.waterfall-masonry-container {
    /* max-width: 1200px; */
    /* margin: 0 auto; */
    position: relative;
    /* padding: 0 8px; */
}

/* 瀑布流列容器 - 核心布局组件 */
.waterfall-columns {
    display: flex;
    gap: 16px; /* 列之间的间距 */
    align-items: flex-start; /* 顶部对齐 */
}

/* 单个列 - 核心组件 */
.waterfall-column {
    flex: 1; /* 等宽分布 */
    display: flex;
    flex-direction: column;
    gap: 16px; /* 卡片之间的垂直间距 */
}

/* 瀑布流图片卡片 - 核心组件 */
.waterfall-photo-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 流畅的缓动效果 */
    opacity: 0; /* 初始透明，用于入场动画 */
    transform: translateY(30px) scale(0.95); /* 初始位置和大小 */
    cursor: pointer;
    position: relative;
}

/* 卡片入场动画 - 从下方淡入 */
.waterfall-photo-card.animate-in {
    animation: cardFadeInUp 0.6s ease-out forwards;
}

@keyframes cardFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 卡片悬停效果 - 轻微上浮和阴影增强 */
.waterfall-photo-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

/* 图片容器 - 关键修改：自适应高度 */
.waterfall-photo-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* max-height: 500px; */ /* 设置最大高度限制 */
}

/* 图片元素 - 关键样式优化 */
.waterfall-photo {
    width: 100%; /* 宽度填满容器 */
    height: auto; /* 高度自适应 */
    /* max-height: 500px; */ /* 最大高度限制 */
    display: block;
    transition: transform 0.4s ease;
    object-fit: cover; /* 保持比例，居中裁剪 */
    object-position: top center; /* 定位到顶部中心 */
}

/* 图片加载时的占位背景 */
.waterfall-photo.loading {
    background: linear-gradient(45deg, #ff9a9e, #fecfef);
    background-size: 400% 400%;
    animation: gradientFlow 8s ease-in-out infinite;
    min-height: 200px; /* 加载时的最小高度 */
}

/* 占位背景动画 */
@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

/* 图片悬停时的放大效果 */
.waterfall-photo-card:hover .waterfall-photo {
    transform: scale(1.05);
}

/* 图片遮罩层 - 悬停时显示 */
.waterfall-photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* 悬停时显示遮罩 */
.waterfall-photo-card:hover .waterfall-photo-overlay {
    opacity: 1;
}

/* 遮罩中的内容 */
.waterfall-overlay-content {
    color: white;
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.waterfall-photo-card:hover .waterfall-overlay-content {
    transform: translateY(0);
}

/* 遮罩中的标题 */
.waterfall-overlay-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.7);
    line-height: 1.3;
}

/* 遮罩中的描述 */
.waterfall-overlay-description {
    font-size: 0.9rem;
    opacity: 0.9;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    line-height: 1.4;
}

/* 加载更多按钮 - 独立组件 */
.waterfall-load-trigger {
    display: block;
    margin: 40px auto;
    padding: 8px 40px;
    background: linear-gradient(45deg, #f72185, #eec717);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.waterfall-load-trigger:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(90, 5, 5, 0.3);
}

/* 加载中状态 */
.waterfall-load-trigger.loading {
    pointer-events: none;
    opacity: 0.7;
}

.waterfall-load-trigger.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: buttonSpinner 1s linear infinite;
}

@keyframes buttonSpinner {
    to { transform: rotate(360deg); }
}

/* 图片放大模态框 - 新增组件 */
.waterfall-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

.waterfall-modal.active {
    opacity: 1;
    visibility: visible;
}

/* 模态框内容 */
.waterfall-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.waterfall-modal.active .waterfall-modal-content {
    transform: scale(1);
}

/* 模态框图片 */
.waterfall-modal-image {
    /* width: 100%; */
    height: auto;
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    margin: 0 auto;
}

/* 模态框信息 */
.waterfall-modal-info {
    background: rgba(0, 0, 0, 0.95);
    padding: 15px 20px;
    border-radius: 0 0 8px 8px;
    backdrop-filter: blur(10px);
}

.waterfall-modal-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 5px;
}

.waterfall-modal-description {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* 关闭按钮 */
.waterfall-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.waterfall-modal-close:hover {
    transform: scale(1.2);
}

/* 响应式布局 */
@media (max-width: 1024px) {
    .waterfall-columns {
        gap: 12px;
    }
    .waterfall-column {
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .waterfall-columns {
        gap: 10px;
    }
    .waterfall-column {
        gap: 10px;
    }
    .waterfall-title {
        font-size: 2rem;
    }
    .waterfall-modal-image {
        max-height: 70vh;
    }
}

@media (max-width: 480px) {
    .waterfall-columns {
        flex-direction: column; /* 极小屏幕单列显示 */
    }
    .waterfall-masonry-container {
        padding: 0 5px;
    }
}

/* 图片加载失败时的样式 */
.waterfall-photo.error {
    background: linear-gradient(45deg, #ff9a9e, #fecfef);
    background-size: 400% 400%;
    animation: gradientFlow 8s ease-in-out infinite;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}