/* 照片墙公共样式：萌照合集与猫咪档案页共用 */

/* --- 瀑布流网格 --- */
.gallery-grid { columns: 3 300px; column-gap: 15px; }
.gallery-item {
    margin-bottom: 15px; break-inside: avoid; border-radius: 15px;
    overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    position: relative; background: #000; cursor: pointer;
}
.gallery-item img { width: 100%; display: block; transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1); }

/* --- 毛玻璃信息浮层 --- */
.glass-tag {
    position: absolute; bottom: 20px; left: 15px; right: 15px;
    padding: 15px 20px; background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff; z-index: 2; opacity: 0; transform: translateY(60px) scale(0.8);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex; justify-content: space-between; align-items: center;
}
.tag-info { flex: 1; margin-right: 10px; pointer-events: none; }
.tag-info h4 { margin: 0 0 4px 0; font-size: 1rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.tag-info p { margin: 0; font-size: 0.8rem; opacity: 0.85; }
/* 留言按钮必须能点：父级关掉了 pointer-events，这里单独打开 */
.tag-info .photo-comment-btn { pointer-events: auto; }

/* 桌面端悬浮展开，触摸设备由脚本切换 active 类 */
@media (hover: hover){
    .gallery-item:hover img { transform: scale(1.15); opacity: 0.7; filter: blur(4px); }
    .gallery-item:hover .glass-tag { opacity: 1; transform: translateY(0) scale(1); }
}
.active-img { transform: scale(1.15); opacity: 0.7; filter: blur(4px); }
.active-glass-tag { opacity: 1; transform: translateY(0) scale(1); }

/* --- 点赞盒 --- */
.like-box {
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer; pointer-events: auto; transition: all 0.3s;
    padding: 5px; min-width: 45px; position: relative;
}
.like-box span { font-size: 0.75rem; margin-top: 2px; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

.like-btn-container { position: absolute; bottom: 30px; right: 20px; z-index: 100; }
.like-btn {
    width: 56px; height: 56px; background: #ff4757;
    border-radius: 50%; border: none; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
    outline: none; -webkit-tap-highlight-color: transparent;
}
.like-btn:active { transform: scale(0.85); }
.like-btn svg { width: 28px; height: 28px; fill: white; }

/* --- 长按连发的飘心 --- */
.heart-zone {
    position: absolute; bottom: 40px; right: 25px;
    width: 100px; height: 400px;
    pointer-events: none; /* 防止遮挡点击 */
}
.heart {
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); opacity: 0;
}
@keyframes float-up {
    0% { transform: translate(-50%, 0) scale(0.6) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    /* 终点位置由脚本注入的 CSS 变量决定 */
    100% { transform: translate(var(--x-end), var(--y-end)) scale(var(--s-end)) rotate(var(--r-end)); opacity: 0; }
}

/* 用户在系统里关闭了动效时不再飘心 */
@media (prefers-reduced-motion: reduce) {
    .heart { display: none; }
    .gallery-item img, .glass-tag { transition: none; }
}

/* --- 时间线视图 --- */
.timeline-view { position: relative; padding: 20px 0; display: none; }
.timeline-view::before { content: ''; position: absolute; left: 50px; top: 0; bottom: 0; width: 2px; background: #ddd; }
.timeline-group { position: relative; margin-bottom: 40px; padding-left: 100px; }
.timeline-date { position: absolute; left: 0; top: 0; width: auto; text-align: right; }
.date-bubble { background: #333; color: #fff; padding: 5px 10px; border-radius: 8px; font-size: 0.8rem; display: inline-block; }
.timeline-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.timeline-item { border-radius: 12px; overflow: hidden; height: 200px; position: relative; }
.timeline-item img { width: 100%; height: 100%; object-fit: cover; }