/* ============================================================
   世界大战数字展 —— 全站统一动效系统
   设计原则：庄严肃穆、低频率、低速度、低强度
   禁止炫酷娱乐化特效，禁用弹跳、抖动、闪烁
   ============================================================ */

/* ============================================================
   CSS 自定义属性
   ============================================================ */
:root {
  --motion-duration-base: 400ms;
  --motion-duration-slow: 600ms;
  --motion-duration-very-slow: 800ms;
  --motion-duration-hover: 300ms;
  --motion-duration-peace-cycle: 6000ms;
  --motion-duration-ambient: 30s;
  --motion-ease: ease-out;
  --motion-ease-smooth: ease;
  --motion-fade-distance: 30px;
  --motion-modal-distance: -10px;
}

/* ============================================================
   全局基础动效
   ============================================================ */

/* 禁止弹跳、抖动动画 —— 全局默认行为 */
.motion-no-bounce {
  animation-timing-function: ease-out !important;
  transition-timing-function: ease-out !important;
}
* {
  animation-iteration-count: 1;
}

/* 页面滚动进入视口时，内容由下缓慢淡入上浮 */
/* 默认可见（无JS降级安全），JS加载后添加 .motion-pending 再逐一激活 */
.motion-fade-up {
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity;
}

.motion-fade-up.motion-pending {
  opacity: 0;
  transform: translateY(var(--motion-fade-distance));
}

.motion-fade-up.motion-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-duration-slow) var(--motion-ease),
              transform var(--motion-duration-slow) var(--motion-ease);
}

/* 文字/段落整段淡入 */
.motion-fade-in {
  opacity: 1;
  will-change: opacity;
}

.motion-fade-in.motion-pending {
  opacity: 0;
}

.motion-fade-in.motion-active {
  opacity: 1;
  transition: opacity var(--motion-duration-base) var(--motion-ease);
}

/* 标题逐字淡入（配合JS，每个字符span单独控制延迟） */
/* 默认可见，JS加载后添加 .motion-pending 再逐一激活 */
.motion-reveal-char .motion-char {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
  will-change: transform, opacity;
}

.motion-reveal-char.motion-pending .motion-char {
  opacity: 0;
  transform: translateY(8px);
}

.motion-reveal-char .motion-char.motion-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease);
}

/* 图片/卡片鼠标悬浮缓慢放大 */
.motion-hover-scale {
  will-change: transform;
  transition: transform var(--motion-duration-hover) var(--motion-ease-smooth);
}

.motion-hover-scale:hover {
  transform: scale(1.05);
}

/* ============================================================
   时间线动效
   ============================================================ */

/* 时间节点圆点缓慢亮起 */
.timeline-dot {
  opacity: 0.3;
  will-change: opacity, box-shadow;
}

.timeline-dot.timeline-active {
  opacity: 1;
  transition: opacity 500ms var(--motion-ease),
              box-shadow 500ms var(--motion-ease);
}

.timeline-dot-glow.timeline-active {
  opacity: 1;
  box-shadow: 0 0 12px 2px rgba(180, 160, 120, 0.6);
  transition: opacity 500ms var(--motion-ease),
              box-shadow 500ms var(--motion-ease);
}

/* 时间线文字伴随节点淡入 */
.timeline-text-reveal {
  opacity: 0;
  transform: translateX(-15px);
  will-change: transform, opacity;
}

.timeline-text-reveal.timeline-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 500ms var(--motion-ease),
              transform 500ms var(--motion-ease);
}

/* ============================================================
   地图交互动效
   ============================================================ */

/* 鼠标悬浮区域低透明度底色缓慢高亮 */
.map-zone-hover {
  will-change: background-color;
  transition: background-color var(--motion-duration-hover) var(--motion-ease-smooth);
}

.map-zone-hover:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* 弹窗卡片自上而下淡入 */
.map-popup-enter {
  opacity: 0;
  transform: translateY(-10px);
  will-change: transform, opacity;
}

.map-popup-enter.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 350ms var(--motion-ease),
              transform 350ms var(--motion-ease);
}

/* 背景暗化蒙层淡入 */
.map-overlay-fade {
  opacity: 0;
  will-change: opacity;
}

.map-overlay-fade.active {
  opacity: 1;
  transition: opacity var(--motion-duration-hover) var(--motion-ease);
}

/* ============================================================
   弹窗动效
   ============================================================ */

/* 弹窗居中弹出 */
.modal-enter {
  opacity: 0;
  transform: scale(0.95);
  will-change: transform, opacity;
}

.modal-enter.active {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--motion-duration-hover) var(--motion-ease),
              transform var(--motion-duration-hover) var(--motion-ease);
}

/* 弹窗关闭（反向） */
.modal-leave {
  opacity: 1;
  transform: scale(1);
  will-change: transform, opacity;
}

.modal-leave.closing {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 200ms ease-in,
              transform 200ms ease-in;
}

/* ============================================================
   史料馆档案卡片动效
   ============================================================ */

/* 纸张翻页平移过渡 */
.archive-card-flip {
  will-change: transform;
  transition: transform 400ms var(--motion-ease);
}

.archive-card-flip.flipped {
  transform: translateX(-8px);
}

/* 图纸放大预览居中淡入 */
.archive-preview-enter {
  opacity: 0;
  transform: scale(0.9);
  will-change: transform, opacity;
}

.archive-preview-enter.active {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--motion-duration-base) var(--motion-ease),
              transform var(--motion-duration-base) var(--motion-ease);
}

/* ============================================================
   尾厅动效
   ============================================================ */

/* 和平语录文字缓慢循环淡显 */
.peace-quote-cycle {
  opacity: 0;
  will-change: opacity;
  transition: opacity var(--motion-duration-very-slow) var(--motion-ease);
}

.peace-quote-cycle.active {
  opacity: 1;
}

@keyframes peaceQuoteFade {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  65% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.2;
  }
}

.peace-quote-cycle.animating {
  animation: peaceQuoteFade var(--motion-duration-peace-cycle) ease-in-out infinite;
}

/* 背景微光极缓慢平移 */
.peace-ambient-glow {
  background-size: 200% 200%;
  animation: peaceAmbientPan var(--motion-duration-ambient) linear infinite;
  will-change: background-position;
}

@keyframes peaceAmbientPan {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ============================================================
   通用关键帧定义（全局备用）
   ============================================================ */

@keyframes fadeUpIn {
  from {
    opacity: 0;
    transform: translateY(var(--motion-fade-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ============================================================
   可访问性降级 —— 尊重用户系统偏好
   prefers-reduced-motion: reduce 时禁用所有动画
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .motion-fade-up,
  .motion-fade-in,
  .motion-reveal-char .motion-char,
  .motion-fade-up.motion-active,
  .motion-fade-in.motion-active,
  .motion-reveal-char .motion-char.motion-active {
    opacity: 1;
    transform: none;
  }

  .motion-fade-up.motion-pending,
  .motion-fade-in.motion-pending,
  .motion-reveal-char.motion-pending .motion-char {
    opacity: 1;
    transform: none;
  }

  .motion-hover-scale:hover {
    transform: none;
  }

  .timeline-dot,
  .timeline-dot-glow,
  .timeline-text-reveal {
    opacity: 1;
    transform: none;
  }

  .modal-enter,
  .modal-leave {
    opacity: 1;
    transform: none;
  }

  .archive-card-flip.flipped {
    transform: none;
  }

  .archive-preview-enter {
    opacity: 1;
    transform: none;
  }

  .peace-quote-cycle,
  .peace-quote-cycle.active {
    opacity: 1;
  }

  .peace-quote-cycle.animating {
    animation: none;
  }

  .peace-ambient-glow {
    animation: none;
  }
}