/* ============================================================================
   COMPONENT: LIGHTBOX (MODAL)
   Description: 全屏大图查看器，支持深色背景与交互按钮
   Dependencies: design-tokens.css
   ============================================================================ */

/* 1. CONTAINER (The Overlay)
   ------------------------------------------------------------------
   默认状态是隐藏的，通过 .is-visible 类名切换显示
   ------------------------------------------------------------------
*/

:root {
  /* [Color] */
  /* 使用全局定义的背景色或特定遮罩色 */
  --lightbox-bg-backdrop: rgba(10, 10, 10, 0.95); /* 稍微加深以保证可读性 */
  
  /* [Button Styling] */
  --lightbox-bg-close: hsl(var(--color-primary-h), 40%, var(--color-primary-l));
  --trigger-line: var(--color-text-main);
}


.lightbox {
  position: fixed;
  inset: 0; /* top:0, right:0, bottom:0, left:0 */
  z-index: var(--layer-toast) !important;
  
  /* 深色磨砂玻璃背景 */
  background-color: var(--lightbox-bg-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  /* Flex 布局保证图片永远居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* 初始状态: 隐形且不可点击 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
  /* 优雅的淡入淡出 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* State: Active */
.lightbox.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* 2. CONTENT WRAPPER
   ------------------------------------------------------------------
*/
.lightbox__content {
  position: relative;
  /* 限制最大尺寸，给四周留出呼吸空间 */
  max-width: 90vw;
  max-height: 85vh;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox__image {
  display: block;
  /* 保持图片比例 */
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  
  /* 阴影增加层次感 */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  
  /* 禁止用户拖拽图片，提升交互质感 */
  user-select: none;
}

.lightbox__caption {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: #888; /* 灰色说明文字 */
  text-align: center;
  letter-spacing: 0.05em;
}


/* 3. CONTROLS (Buttons)
   ------------------------------------------------------------------
   Prev / Next
   ------------------------------------------------------------------
*/
.lightbox__prev,
.lightbox__next {
  position: absolute;
  z-index: alc(var(--layer-toast) + 10) !important;
  
  background: transparent;
  border: none;
  cursor: pointer;
  
  /* 字体图标颜色 */
  color: var(--color-bg-surface, #1E1E1E);
  opacity: 0.6;
  
  transition: opacity 0.2s ease, transform 0.2s ease;
  
  /* 增大点击区域，方便手指触摸 */
  padding: 20px;
}

/* Hover Effects */
.lightbox__prev:hover,
.lightbox__next:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.2);
}

/* Icons via CSS Pseudo-elements (Clean & Fast) */

.lightbox__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox__prev::before { content: '‹'; font-size: 48px; line-height: 0.5; }

.lightbox__next { right: 10px; top: 50%; transform: translateY(-50%); }
.lightbox__next::before { content: '›'; font-size: 48px; line-height: 0.5; }

/* 3. CONTROLS: CLOSE BUTTON
   ------------------------------------------------------------------
   Close
   ------------------------------------------------------------------
*/

.lightbox__close {
  /* 1. 位置：Fixed, 与菜单按钮完全重合 */
  position: fixed;
  top: var(--trigger-offset, 24px);
  right: var(--trigger-offset, 24px);
  
  /* 2. 尺寸 */
  width: var(--trigger-size, 50px);
  height: var(--trigger-size, 50px);
  
  /* 3. 层级：确保高于一切 */
  /* 使用 calc() 修复语法错误 */
  z-index: calc(var(--layer-toast) + 10) !important;
  
  /* 4. 外观 */
  background-color: var(--lightbox-bg-close, #AAAAAA);
  border: none;
  cursor: pointer;
  padding: 0;
  
  /* [NEW ANIMATION]
     这里只处理按钮本体的背景色和轻微缩放过渡。
     线条的旋转过渡移到了伪元素里。
  */
  transition: transform 0.3s ease;
}

.lightbox__close:hover {
  transform: scale(1.05); /* 鼠标悬停时整体微微放大 */
}

/* ICON: 使用伪元素绘制线条
   基础设置：定位、粗细、颜色
*/
.lightbox__close::before,
.lightbox__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 15%;
  width: 70%;
  height: 2px;
  background-color: var(--trigger-line, #1E1E1E);
  
  /* [NEW ANIMATION] 核心动画定义
     为 transform 添加过渡。使用 cubic-bezier 制造一点"回弹"效果，更有动感。
     你也可以改回简单的 '0.4s ease-out'。
  */
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* [NEW ANIMATION] 状态 1：初始状态 (Hidden)
   当灯箱隐藏时，线条构成一个正十字 (+号)
*/
.lightbox__close::before {
  /* translateY(-50%) 用于垂直居中，rotate(0deg) 是水平线 */
  transform: translateY(-50%) rotate(0deg);
}

.lightbox__close::after {
  /* rotate(-90deg) 是垂直线 */
  transform: translateY(-50%) rotate(-90deg);
}


/* [NEW ANIMATION] 状态 2：激活状态 (Visible)
   当父级 .lightbox 拥有 .is-visible 类时，触发旋转动画变成 X 号
*/
.lightbox.is-visible .lightbox__close::before {
  /* 0deg 旋转到 45deg */
  transform: translateY(-50%) rotate(45deg);
}

.lightbox.is-visible .lightbox__close::after {
  /* -90deg 旋转到 -45deg。
     两条线向不同方向旋转，形成更有张力的动画效果。
  */
  transform: translateY(-50%) rotate(-45deg);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .lightbox__prev, .lightbox__next {
    padding: 10px; /* 手机上减小边距防止挡住图片 */
  }
}