/* =========================================
   独立模块：无限遮罩相册样式
   ========================================= */

/* 容器设定 */
.infinite-gallery-section {
    position: relative;
    padding: 60px 0 100px 0;
    width: 100%;
    /* 防止移动端横向溢出 */
    overflow-x: hidden; 
}

#banner-container {
    position: relative;
    width: 100%;
    height: 400px; /* 相册高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

/* 核心遮罩层：决定相册的形状 */
#banner-mask {
    width: 100vw;
    height: 100%;
    
    /* 遮罩形状：胶囊/波浪形 */
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDE0NDAgNTAwIiBpZD0iaiI+CiAgPHBhdGggZmlsbD0icmdiKDIwMCwyMDAsMjAwKSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAwczI3NS4wNCAxMDAgNzIwIDEwMFMxNDQwIDAgMTQ0MCAwdjUwMHMtMjc1LjA0LTEwMC03MjAtMTAwUzAgNTAwIDAgNTAwVjB6Ii8+Cjwvc3ZnPgo=);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    
    /* 兼容性前缀 */
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDQwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDE0NDAgNTAwIiBpZD0iaiI+CiAgPHBhdGggZmlsbD0icmdiKDIwMCwyMDAsMjAwKSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAwczI3NS4wNCAxMDAgNzIwIDEwMFMxNDQwIDAgMTQ0MCAwdjUwMHMtMjc1LjA0LTEwMC03MjAtMTAwUzAgNTAwIDAgNTAwVjB6Ii8+Cjwvc3ZnPgo=);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    
    /* 轨道背景色：使用变量以适配黑夜模式 */
    background: var(--track-bg);
    overflow: hidden;
    position: relative;
}

/* 图片长轨道 */
.img-wrapper {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    align-items: center; /* 垂直居中图片 */
}

/* 单个图片盒子 */
.img-box {
    width: 280px;  /* 图片宽度 */
    height: 100%;
    flex-shrink: 0; 
    margin-right: 20px; /* 图片间隔 */
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.img-box:hover {
    transform: scale(0.98); /* 点击感 */
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证填满不拉伸 */
    display: block;
}

/* 图片悬停文字信息 */
.img-box .info {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-family: 'ZCOOL KuaiLe', cursive; /* 沿用你的字体 */
    opacity: 0;
    transition: opacity 0.3s;
}

.img-box:hover .info {
    opacity: 1;
}

/* 按钮组 */
.gallery-btn-group {
    position: absolute;
    bottom: -60px; /* 放在下方 */
    display: flex;
    gap: 30px;
    z-index: 10;
}

.btn-round {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #555;
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 4px 4px 0px var(--accent-pink); /* 引用主CSS变量 */
}

.btn-round:hover {
    background: #555;
    transform: translateY(-3px) scale(1.1);
}

.btn-round svg {
    width: 24px;
    height: 24px;
    fill: #555;
    transition: fill 0.3s;
}

.btn-round:hover svg {
    fill: white;
}

/* =========================================
   ⭐ 新增：图片点击聚焦 + 影院级飞跃特效 (Hero Transition)
   ========================================= */

/* 1. 克隆出来的替身 (Ghost Element) */
.clone-overlay-img {
    position: fixed; 
    z-index: 1005;   
    transform-origin: center center;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    
    /* 核心动画配置 */
    /* 使用 cubic-bezier 让飞跃动作有“起步慢、中间快、刹车稳”的物理质感 */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), 
                box-shadow 0.5s ease,
                border-radius 0.5s ease;
    
    /* 初始状态变量 (JS会修改它们) */
    --tx: 0px;
    --ty: 0px;
    --scale: 1;
    
    /* 初始状态：原地不动 */
    transform: translate(0px, 0px) scale(1);
    
    overflow: visible !important;
    pointer-events: none; /* 飞的过程中不响应点击，飞到位了再响应 */
}

.clone-overlay-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* 2. 替身激活状态 (飞到屏幕中心) */
.clone-overlay-img.active {
    /* 应用 JS 计算出的位移和缩放 */
    transform: translate(var(--tx), var(--ty)) scale(var(--scale));
    
    /* 飞起来时阴影变大 */
    box-shadow: 0 30px 80px rgba(0,0,0,0.8);
    z-index: 1006;
    pointer-events: auto; /* 飞到位了，允许点击关闭 */
}

/* 3. 替身里的文字信息框 (注释卡片) */
.clone-overlay-img .info {
    position: absolute;
    top: 100%; 
    left: 50%;
    /* 初始位置：紧贴图片底部，透明 */
    transform: translate(-50%, -40px) scale(0.8); 
    
    width: 120%; 
    min-width: 200px; /* 防止字太少框太窄 */
    padding: 15px 25px;
    
    background-color: var(--card-bg); 
    color: var(--text-color);
    border: 1px solid var(--accent-green);
    
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    font-size: 1.2rem;
    font-family: 'ZCOOL KuaiLe', cursive;
    
    opacity: 0;
    /* 文字出现的动画：比图片飞跃稍微慢一点点，显得有层次感 */
    transition: all 0.4s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.4;
}

/* 4. 激活时，文字框滑出 */
.clone-overlay-img.active .info {
    opacity: 1;
    transform: translate(-50%, 20px) scale(1); /* 向下弹出 20px */
}

/* 小三角箭头 */
.clone-overlay-img .info::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--card-bg);
}

/* =========================================
   移动端适配 (针对 gallery.css)
   ========================================= */
@media screen and (max-width: 768px) {
    
    /* 1. 正常状态下的图片 (保持不变) */
    .img-box.active {
        transform: scale(1.1) !important; 
    }

    /* 2. ⭐ 核心修复：替身里的文字框 */
    .clone-overlay-img .info {
        /* 原理：JS把父元素放大了约1.8倍，所以这里我们要除以1.8 
           宽度：设为 105% (视觉上大约是屏幕的 75%)
           字号：设为 0.6rem (视觉上大约是 16px)
        */
        width: 105%;        /* 不要设太大，防止出屏 */
        font-size: 0.65rem; /* 关键：写很小，放大后才正常 */
        padding: 6px 10px;  /* 内边距也要减小 */
        border-radius: 6px; /* 圆角减小 */
        line-height: 1.3;
        min-width: unset;   /* 取消最小宽度限制 */
        
        /* 初始位置修正 */
        transform: translate(-50%, -10px) scale(0.8);
    }
    
    /* 3. 激活时的弹出位置 */
    /* 因为位移距离(20px)也会被放大，所以这里要改成 10px */
    .clone-overlay-img.active .info {
        transform: translate(-50%, 12px) scale(1); 
    }
}