/* ============================================================
   回忆录 · 动效层 motion.css  (2026-10-09)
   ------------------------------------------------------------
   甜宝取向：温柔甜系 · 氛围感 · 深夜与月亮 · 轻柔治愈

   包含：
   1. 相册拍立得样式恢复 + 照片「显影」动效基态
   2. 微交互（悬停抬升 / 音乐播放柔光）
   3. 月亮模式（暖夜微光 深色皮肤，含主要玻璃组件覆写）
   4. 月亮 / 萤火 / 首次提示 / 流星
   5. 首屏微光视频背景（进入网站自动无缝循环）
   6. #videos 视频模块升级（播放片 / 灯箱）
   7. 结尾小猫彩蛋
   8. prefers-reduced-motion 守卫

   规则：本文件后于 style.css 加载 —— 同特异性下覆盖后者；
   所有规则不依赖 JS（JS 只负责显影/擦洗等动效增强）。
   ============================================================ */

/* ------------------------------------------------------------
   1. 相册：拍立得卡片（恢复丢失样式并升级为暖调）
   ------------------------------------------------------------ */
.gallery-card {
  background: #fffdf9;
  border: 1px solid rgba(201, 138, 130, 0.16);
  border-radius: 2px;
  padding: 10px 10px 34px;
  box-shadow: 0 12px 30px -14px rgba(74, 51, 68, 0.22);
  position: relative;
  cursor: zoom-in;
  transition: transform 480ms cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 480ms cubic-bezier(0.25, 1, 0.5, 1),
              border-color 300ms ease;
}
.gallery-card:nth-child(4n + 1) { transform: rotate(-1.1deg); }
.gallery-card:nth-child(4n + 3) { transform: rotate(1.2deg); }
.gallery-card:nth-child(7n)    { transform: rotate(-0.4deg); }
.gallery-card:hover {
  transform: translateY(-6px) rotate(0deg);
  box-shadow: 0 26px 48px -18px rgba(232, 90, 130, 0.34);
  border-color: rgba(232, 90, 130, 0.35);
  z-index: 2;
}
.gallery-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1px;
  background: linear-gradient(135deg, #f6ece2, #efe2d6);
}
.gallery-card .photo-caption {
  position: absolute;
  left: 12px; right: 12px; bottom: 7px;
  font-family: var(--font-handwriting);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-card .photo-del {
  position: absolute;
  top: 7px; right: 7px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(30, 18, 24, 0.45);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity 240ms ease, background 240ms ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gallery-card:hover .photo-del { opacity: 1; }
.gallery-card .photo-del:hover { background: rgba(232, 90, 130, 0.85); }

/* 月份分组标题 */
.gallery-month-block { margin-bottom: clamp(44px, 6vw, 72px); }
.gallery-month-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(232, 90, 130, 0.30);
  scroll-margin-top: 96px;
}
.gallery-month-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rose-deep);
  margin: 0;
}
.gallery-month-count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* 「显影」基态（JS 添加 .dev-wait 后由 GSAP 显影；无 JS 则完全可见） */
.dev-wait { opacity: 0; }

/* ------------------------------------------------------------
   2. 微交互
   ------------------------------------------------------------ */
/* 时间轴配图 */
.t-media img { border-radius: 2px; }
.timeline-item .t-media img {
  transition: filter 480ms ease,
              transform 620ms cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 620ms ease;
}
.timeline-item:hover .t-media img { box-shadow: 0 22px 44px -20px rgba(74, 51, 68, 0.35); }


/* 时间轴线随滚动生长（JS 设置 --tl-grow；默认 1 = 无 JS 时完整） */
.timeline-list::before {
  transform-origin: top center;
  transform: scaleY(var(--tl-grow, 1));
}

/* ------------------------------------------------------------
   3. 月亮模式（暖夜微光）—— 深色皮肤
   ------------------------------------------------------------ */
body.dark {
  --ink:            #f3e7e4;
  --ink-soft:       #cbb4b2;
  --ink-mute:       #9a8285;
  --cream:          #1b1318;
  --plum:           #b79cc0;
  --plum-deep:      #d9c3de;
  --rose-deep:      #f088a4;
  --rose-darker:    #e0678c;
  --rose-soft:      #5a3644;
  --gold-soft:      #e9d5a0;
  --surface:        rgba(43, 30, 39, 0.55);
  --surface-strong: rgba(38, 26, 34, 0.92);
  --surface-line:   rgba(240, 136, 164, 0.20);
  --surface-line-soft: rgba(255, 255, 255, 0.09);
  --line-soft:      rgba(255, 255, 255, 0.10);

  background-color: #1b1318;
  background-image:
    radial-gradient(ellipse 52% 38% at 86% 2%, rgba(232, 178, 138, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 42% at 50% 0%, rgba(120, 70, 96, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(232, 90, 130, 0.06) 0%, transparent 65%);
  color: var(--ink);
}

/* 星野：由 CSS 统一接管透明度（JS 不再干预） */
#starfield { transition: opacity 1400ms ease; }
body.dark #starfield { opacity: 0.9; }

/* —— 导航 —— */
body.dark .nav { background: rgba(20, 13, 18, 0.86); }
body.dark .nav-inner {
  background: linear-gradient(180deg, rgba(24, 16, 21, 0.82), rgba(24, 16, 21, 0.55));
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(240, 136, 164, 0.10), 0 8px 24px -16px rgba(0, 0, 0, 0.6);
}
body.dark .nav-toggle {
  background: linear-gradient(135deg, rgba(32, 22, 28, 0.85), rgba(28, 19, 25, 0.65));
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px -3px rgba(0, 0, 0, 0.5);
}
body.dark .nav-links.open {
  background: linear-gradient(135deg, rgba(32, 22, 28, 0.9), rgba(28, 19, 25, 0.72));
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
body.dark .night-toggle::before { box-shadow: inset -4px -2px 0 0 #1b1318; }

/* —— 章节标头 / 章号胶囊 —— */
body.dark .section + .section::before {
  background: linear-gradient(135deg, rgba(32, 22, 28, 0.72), rgba(28, 19, 25, 0.55));
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.dark .section-title {
  background: linear-gradient(180deg, rgba(32, 22, 28, 0.80), rgba(28, 19, 25, 0.62));
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 28px -10px rgba(0, 0, 0, 0.5);
}

/* —— 同步状态 —— */
body.dark .sync-status {
  background: linear-gradient(135deg, rgba(32, 22, 28, 0.75), rgba(28, 19, 25, 0.55));
  border-color: rgba(255, 255, 255, 0.10);
}

/* —— 计数器 / 故事 —— */
body.dark .counter-card {
  background: linear-gradient(180deg, rgba(33, 23, 29, 0.86), rgba(28, 19, 25, 0.72));
  border-color: rgba(255, 255, 255, 0.08);
}

/* —— 时间轴 —— */
body.dark .timeline-list::before { background: rgba(240, 136, 164, 0.22); }
body.dark .timeline-list .timeline-item.in-view::before { background: var(--rose-deep); }
body.dark .timeline-list .timeline-item.in-view .t-dot { background: var(--rose-deep); }
body.dark .t-media img { border-color: rgba(255, 255, 255, 0.10); }

/* —— 相册 —— */
body.dark .gallery-drop { border-color: rgba(240, 136, 164, 0.28); }
body.dark .gallery-card {
  background: #241a21;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.55);
}
body.dark .gallery-card img { background: linear-gradient(135deg, #2b2027, #241a21); }
body.dark .gallery-card:hover {
  border-color: rgba(240, 136, 164, 0.4);
  box-shadow: 0 26px 48px -18px rgba(232, 90, 130, 0.28);
}
body.dark .gallery-month-chip {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.03);
}

/* —— 情书 —— */
body.dark .letter-paper {
  background: rgba(32, 22, 29, 0.78);
  border-color: rgba(255, 255, 255, 0.07);
}
body.dark .bubble-body { background: rgba(255, 255, 255, 0.08); }
body.dark .bubble-b .bubble-body { background: rgba(240, 136, 164, 0.20); }

/* —— 心声 / 愿望 —— */
body.dark .reasons-tag { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.09); }
body.dark .reasons-tag:hover { background: rgba(240, 136, 164, 0.14); }
body.dark .reasons-input input,
body.dark .wishes-input input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}
body.dark .wish-item:hover,
body.dark .wish-item:focus-within { background: rgba(255, 255, 255, 0.05); }

/* —— 时间胶囊 —— */
body.dark .capsule-card { border-color: rgba(255, 255, 255, 0.08); }
body.dark .capsule-card.locked { background: linear-gradient(180deg, rgba(30, 20, 26, 0.95), rgba(24, 16, 21, 0.9)); }

/* —— 足迹地图 —— */
body.dark .map-controls,
body.dark .map-legend {
  background: linear-gradient(135deg, rgba(32, 22, 28, 0.75), rgba(28, 19, 25, 0.6));
  border-color: rgba(255, 255, 255, 0.09);
}
body.dark .map-ctrl { color: var(--ink-soft); }

/* —— 心情日记 —— */
body.dark .diary-entry:hover { background: rgba(255, 255, 255, 0.04); }

/* —— 翻页相册 —— */
body.dark .flipbook-page { background: #241a21; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6); }
body.dark .flipbook-btn { border-color: rgba(255, 255, 255, 0.14); color: var(--ink-soft); }

/* —— 签名 / 语音 —— */
body.dark .signature-canvas { background: rgba(255, 255, 255, 0.04); }
body.dark .voice-message { background: rgba(255, 255, 255, 0.05); }
body.dark .voice-wave span { background: var(--rose-deep); opacity: 0.55; }


/* —— 季节选择器 —— */
body.dark .season-picker {
  background: linear-gradient(135deg, rgba(32, 22, 28, 0.7), rgba(28, 19, 25, 0.5));
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* —— 弹窗 / 登录 —— */
body.dark .modal-box {
  background: #241a21;
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--ink);
}
body.dark .modal-box input,
body.dark .modal-box textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}
body.dark .auth-overlay {
  background: linear-gradient(180deg, rgba(20, 13, 18, 0.97), rgba(17, 11, 15, 0.94));
}
body.dark .auth-card {
  background: linear-gradient(180deg, rgba(36, 25, 32, 0.98), rgba(30, 20, 27, 0.94));
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 28px 80px -20px rgba(0, 0, 0, 0.6);
}
body.dark .auth-field input { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
body.dark .auth-field input:focus { background: rgba(255, 255, 255, 0.08); }

/* —— Loader —— */
body.dark .loader { background: #1b1318; }

/* ------------------------------------------------------------
   4. 月亮 / 萤火 / 首次提示 / 流星
   ------------------------------------------------------------ */
#moon {
  position: fixed;
  top: 9vh;
  right: 9vw;
  width: clamp(74px, 9vw, 118px);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(30px) scale(0.92);
  transition: opacity 1600ms ease, transform 1800ms cubic-bezier(0.22, 1, 0.36, 1);
  background:
    radial-gradient(circle at 38% 36%, #fff7ea 0%, #f6e3bd 42%, #e8c48a 72%, #d8ab6e 100%);
  box-shadow:
    0 0 34px 6px rgba(246, 227, 189, 0.38),
    0 0 90px 30px rgba(232, 178, 138, 0.20),
    0 0 180px 70px rgba(232, 178, 138, 0.10);
}
#moon::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 30%, rgba(212, 166, 118, 0.35) 0%, transparent 26%),
    radial-gradient(circle at 34% 62%, rgba(212, 166, 118, 0.28) 0%, transparent 22%),
    radial-gradient(circle at 58% 74%, rgba(212, 166, 118, 0.22) 0%, transparent 18%);
  opacity: 0.8;
}
body.dark #moon { opacity: 1; transform: translateY(0) scale(1); }

#fireflies {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1600ms ease 200ms;
}
body.dark #fireflies { opacity: 1; }
.ff {
  position: absolute;
  left: var(--fx, 50vw);
  top: var(--fy, 70vh);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 152, 0.95) 0%, rgba(255, 216, 152, 0) 72%);
  animation:
    ff-float var(--fd, 16s) ease-in-out var(--fdel, 0s) infinite,
    ff-twinkle calc(var(--fd, 16s) / 4) ease-in-out var(--fdel, 0s) infinite;
}
@keyframes ff-float {
  0%   { transform: translate3d(0, 0, 0); }
  30%  { transform: translate3d(22px, -34px, 0); }
  60%  { transform: translate3d(-14px, -62px, 0); }
  100% { transform: translate3d(6px, -110px, 0); }
}
@keyframes ff-twinkle {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.9; }
}

/* 首次提示（月亮模式彩蛋） */
#moon-hint {
  position: fixed;
  top: 58px;
  right: 14px;
  z-index: 101;
  padding: 7px 13px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  background: var(--surface-strong);
  border: 1px solid var(--surface-line-soft);
  border-radius: 4px;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 10px 30px -12px rgba(60, 40, 40, 0.35);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
#moon-hint.show { opacity: 1; transform: translateY(0); }
body.dark #moon-hint {
  background: rgba(38, 26, 34, 0.94);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}

/* 进入月亮模式时的一颗流星（一次性；rotate 用独立属性，避免与 GSAP x/y 冲突） */
.moon-streak {
  position: fixed;
  top: 16vh;
  right: 22vw;
  width: 130px;
  height: 1.5px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 240, 220, 0), rgba(255, 240, 220, 0.9));
  rotate: -24deg;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 232, 200, 0.8));
}

/* ------------------------------------------------------------
   5. 首屏微光视频背景（进入网站 → 自动无缝循环 · 完整月弧正放）
   ------------------------------------------------------------ */
.cover { --entry-fade: #fff8f0; }
body.dark .cover { --entry-fade: #1b1318; }

.cover-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.cover-poster,
.cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover-poster {
  background-image: url("../assets/vid/moon-poster.jpg?v=moon3");
  background-size: cover;
  background-position: center;
}
.cover-video {
  opacity: 0;
  transition: opacity 1600ms ease;
}
.cover-video.is-ready { opacity: 1; }

.cover-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 44% at 50% 46%, rgba(16, 10, 15, 0.55) 0%, rgba(16, 10, 15, 0.30) 56%, rgba(16, 10, 15, 0) 100%),
    linear-gradient(180deg, rgba(18, 11, 17, 0.42) 0%, rgba(18, 11, 17, 0) 22%, rgba(18, 11, 17, 0) 54%, var(--entry-fade) 100%);
}

/* —— 星闪层：极克制的小星光（缓明缓灭，不喧宾夺主；reduced-motion 隐藏） —— */
.cover-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.95;
}
.cover-stars i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #fff6ea;
  opacity: 0.1;
  animation: cover-twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
  will-change: opacity;
}
.cover-stars i.glow { box-shadow: 0 0 6px rgba(255, 232, 205, 0.55); }
@keyframes cover-twinkle {
  0%, 100% { opacity: 0.08; }
  50% { opacity: var(--peak, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .cover-stars { display: none; }
}

/* —— 流星：右上 → 左下，缓缓划过名字区块（约每 10.5s 一颗，谢幕后静默） —— */
.cover-stars i { z-index: 1; }
.cover-meteor {
  --mx: -62vw;      /* 位移与拖尾严格同轴：桌面 ≈ 20° 俯角 */
  --my: 23vw;
  --ma: 159.65deg;
  position: absolute;
  z-index: 2;
  left: 88%;
  top: 11%;
  width: 185px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 246, 234, 0) 0%, rgba(255, 246, 234, 0.32) 42%, rgba(255, 248, 238, 0.78) 78%, rgba(255, 250, 240, 0.98) 100%);
  filter: drop-shadow(0 0 7px rgba(255, 240, 214, 0.5));
  transform: rotate(var(--ma));
  transform-origin: 100% 50%;
  opacity: 0;
  pointer-events: none;
  animation: cover-meteor-fly 10.5s linear 2s infinite;
  will-change: transform, opacity;
}
.cover-meteor::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 0 12px 3px rgba(255, 238, 210, 0.6);
}
@keyframes cover-meteor-fly {
  0%, 2% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--ma)); }
  6% { opacity: 0.95; }
  23% { opacity: 0.9; }
  27%, 100% { opacity: 0; transform: translate3d(var(--mx), var(--my), 0) rotate(var(--ma)); }
}
@media (max-width: 860px) {
  /* 窄屏：更陡的 ≈48° 俯角，位移仍用 vw 保证拖尾与轨迹同轴 */
  .cover-meteor { --my: 70vw; --ma: 131.5deg; }
}

/* —— 视频之上：文案与玻璃件（明暗两态通用） —— */
.cover.on-video .cover-content { z-index: 2; }
.cover.on-video .scroll-hint { z-index: 2; }

.cover.on-video .name {
  color: #fdf6ef;
  text-shadow: 0 2px 18px rgba(12, 6, 12, 0.78), 0 1px 60px rgba(12, 6, 12, 0.5);
}
.cover.on-video .amp {
  color: #f088a4;
  text-shadow: 0 2px 26px rgba(15, 8, 14, 0.5);
}
.cover.on-video .scroll-hint { color: rgba(244, 233, 228, 0.62); }
.cover.on-video .scroll-hint::after { background: rgba(244, 233, 228, 0.5); }

/* —— 封面角饰：月牙与星芒（呼应夜空与主题；无框、无字） —— */
.cover-emblem {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  color: #f3e7e4;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(255, 238, 214, 0.5));
}
.cover-emblem svg { display: block; }
.cover-emblem-moon { top: clamp(26px, 5vh, 48px); left: clamp(28px, 4vw, 48px); }
.cover-emblem-star { top: clamp(32px, 5.8vh, 56px); right: clamp(30px, 4.2vw, 50px); color: #fff8ec; }
@media (prefers-reduced-motion: reduce) {
  .cover-emblem { filter: drop-shadow(0 0 6px rgba(255, 238, 214, 0.35)); }
}
.cover.on-video #start-date { color: #f3e7e4; text-shadow: 0 1px 14px rgba(12, 6, 12, 0.6); }

/* —— CTA 去框后的动效层：外观在此，驱动在 motion.js（GSAP）
      —— 首屏 CTA 与各页站尾的"下一站"邀请共用同一套 —— */
.cover-cta .cta-halo,
.outro-next .cta-halo {
  position: absolute;
  z-index: 0;
  inset: -30px -44px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 243, 226, 0.4), rgba(255, 243, 226, 0.16) 55%, rgba(255, 243, 226, 0) 100%);
  opacity: 0.28;
  filter: blur(6px);
}
.cover-cta .cta-label,
.cover-cta .cta-arrow,
.outro-next .cta-label,
.outro-next .cta-arrow { position: relative; z-index: 1; }
.cover-cta .cta-ripple,
.outro-next .cta-ripple {
  position: absolute;
  z-index: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 246, 232, 0.6), rgba(255, 246, 232, 0) 100%);
  opacity: 0;
}
.cover.on-video .cover-cta { text-shadow: 0 1px 16px rgba(12, 6, 12, 0.6); }
.cover-cta:focus-visible { outline: 2px solid rgba(240, 136, 164, 0.55); outline-offset: 8px; border-radius: 6px; }
.cover-cta:focus-visible .cta-halo { opacity: 0.85 !important; }
.sky .outro-next { text-shadow: 0 1px 16px rgba(12, 6, 12, 0.6); }
@media (prefers-reduced-motion: reduce) {
  .cover-cta .cta-halo,
  .outro-next .cta-halo { display: none; }
}

/* ------------------------------------------------------------
   6. #videos 模块升级
   ------------------------------------------------------------ */
.video-frame { position: relative; width: 100%; height: 100%; }
.video-card video { display: block; }
.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  pointer-events: none;
}
.video-play::before,
.video-play::after { grid-area: 1 / 1; align-self: center; justify-self: center; }
.video-play::before {
  content: "";
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(22, 13, 18, 0.38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  transition: transform 420ms cubic-bezier(0.25, 1, 0.5, 1), background 420ms ease, border-color 420ms ease;
}
.video-play::after {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.95);
}
.video-card:hover .video-play::before {
  transform: scale(1.1);
  background: rgba(232, 90, 130, 0.42);
  border-color: rgba(255, 255, 255, 0.9);
}
.video-card { cursor: pointer; }
.video-card .video-del { color: rgba(255, 255, 255, 0.85); }
.video-card:hover .video-del { opacity: 1; }

/* 加片虚线卡（空态） */
.video-add-card {
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px dashed var(--surface-line);
  aspect-ratio: 16/9;
  border-radius: 0;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.video-add-card:hover { border-color: var(--rose-deep); color: var(--ink); }

/* 视频灯箱 */
#video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(14, 9, 13, 0.93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}
#video-lightbox.open { opacity: 1; pointer-events: auto; }
.video-lightbox-box { width: min(960px, 94vw); }
.video-lightbox-box video {
  width: 100%;
  max-height: 74vh;
  background: #000;
  box-shadow: 0 34px 90px -24px rgba(0, 0, 0, 0.7);
  transform: scale(0.97);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
#video-lightbox.open .video-lightbox-box video { transform: scale(1); }
.video-lightbox-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 14px;
  color: #f4e9e4;
  font-family: var(--font-display);
}
.video-lightbox-title { font-size: var(--text-base); letter-spacing: 0.06em; }
.video-lightbox-date { font-style: italic; font-size: var(--text-xs); opacity: 0.65; }
.video-lightbox-close {
  position: absolute;
  top: 20px; right: 22px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 240ms ease, border-color 240ms ease, transform 240ms ease;
}
.video-lightbox-close:hover {
  background: rgba(232, 90, 130, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
  transform: rotate(90deg);
}

/* ------------------------------------------------------------
   7. 结尾小猫彩蛋（她喜欢胖乎乎的小猫）
   ------------------------------------------------------------ */
.ending-cat {
  position: relative;
  display: block;
  margin: 26px auto 6px;
  width: 96px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-soft);
  opacity: 0.82;
  transition: opacity 300ms ease;
}
.ending-cat:hover { opacity: 1; }
.ending-cat svg { width: 100%; height: auto; display: block; overflow: visible; }
.ending-cat .cat-eyes-open { opacity: 0; }
.ending-cat.awake .cat-eyes-open { opacity: 1; }
.ending-cat.awake .cat-eyes-closed { opacity: 0; }
.cat-zz {
  position: absolute;
  margin: -34px 0 0 68px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
}
.ending-cat.awake .cat-zz { opacity: 0.9; transform: translateY(-6px); }

/* ------------------------------------------------------------
   8. prefers-reduced-motion 守卫
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #moon, #fireflies, .cover-video, .cover-poster,
  #starfield, #moon-hint, #video-lightbox, .video-play::before, .ending-cat {
    transition: none !important;
    animation: none !important;
  }
  .ff { animation: none !important; opacity: 0.5; }
  .moon-streak { display: none !important; }
  .gallery-card { transform: none !important; transition: none !important; }
  .timeline-list::before { transform: none !important; }
  .dev-wait { opacity: 1 !important; }
}