/* =========================================================================
   gallery.css —— 生日照片展示区
   ========================================================================= */

.gallery-section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--color-bg-deep);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 16px 0;
}

/* 横向滚动视口：占满剩余高度，内部多行垂直居中 */
.gallery-viewport {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 0;
}

/* 单行轨道容器：横向溢出由外层 section 裁切，纵向不裁切以允许放大 */
.gallery-row {
  position: relative;
  width: 100%;
  overflow: visible;
  padding: 2vmin 0;
  z-index: 1;
}

/* 当行内有照片被悬停/自动悬停时，提升整行层级，避免被相邻行覆盖 */
.gallery-row:has(.gallery-item:hover),
.gallery-row:has(.gallery-item.is-auto-hover) {
  z-index: 20;
}

/* 左右边缘渐隐遮罩（用伪元素替代 mask-image，避免裁切放大的照片） */
.gallery-row::before,
.gallery-row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8%;
  z-index: 6;
  pointer-events: none;
}
.gallery-row::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-deep, #1a0f2e), transparent);
}
.gallery-row::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-deep, #1a0f2e), transparent);
}

/* 背景装饰 */
.gallery-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 183, 197, 0.08), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.06), transparent 50%),
    var(--color-bg-deep);
  pointer-events: none;
}

.gallery-inner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  padding: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* 头部 */
.gallery-header {
  text-align: center;
  margin-bottom: 12px;
  padding: 0 16px;
  flex-shrink: 0;
  animation: gallery-fade-in 0.8s ease both;
}

.gallery-title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 6vw, 1.8rem);
  letter-spacing: 0.2em;
  margin-bottom: 2px;
}

.gallery-subtitle {
  font-size: 11px;
  color: var(--color-text-soft);
  letter-spacing: 0.3em;
}

/* 照片轨道 —— 横向无限滚动 */
.gallery-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 0 3px;
  animation: gallery-scroll 60s linear infinite;
}

/* 反向滚动行 */
.gallery-grid--reverse {
  animation-direction: reverse;
}

/* 鼠标悬停在轨道上时暂停滚动 */
.gallery-grid.is-scrolling:hover {
  animation-play-state: paused;
}

/* 单张照片卡片 —— 固定较小尺寸，一行排列多张 */
.gallery-item {
  position: relative;
  flex: 0 0 auto;
  width: 20vmin;
  height: 20vmin;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  /* 默认状态：轻微半透明 + 减弱灰度遮罩 */
  opacity: 0.65;
  filter: grayscale(0.5) brightness(0.9);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease;
}

/* 悬停：恢复正常显示 + 放大 */
.gallery-item:hover,
.gallery-item.is-auto-hover {
  opacity: 1;
  filter: grayscale(0) brightness(1.1);
  transform: scale(1.6);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.3);
  z-index: 10;
}

.gallery-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 照片描述 —— 浮层样式 */
.gallery-item__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 10px;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.08em;
  text-align: center;
  font-family: var(--font-title);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item__caption,
.gallery-item.is-auto-hover .gallery-item__caption {
  opacity: 1;
}

/* 大图查看器 */
.gallery-viewer {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.gallery-viewer.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.gallery-viewer__img {
  max-width: 95vw;
  max-height: 85vh;
  border-radius: var(--radius-md);
}
.gallery-viewer__close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 32px;
  color: var(--color-text-soft);
  cursor: pointer;
  z-index: 1;
}
.gallery-viewer__caption {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-title);
  font-size: 14px;
  color: var(--color-text-gold);
  letter-spacing: 0.2em;
  text-align: center;
}

/* 底部 */
.gallery-footer {
  text-align: center;
  margin-top: 8px;
  padding: 0 16px;
  flex-shrink: 0;
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.15em;
  animation: gallery-fade-in 0.8s ease 0.3s both;
}

@keyframes gallery-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 横向无限滚动动画：轨道整体平移自身一半宽度（照片列表已复制一份） */
@keyframes gallery-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}