/* ============================================================
   第二页 work moments —— 场景 1920x1080（16:9），等比缩放居中
   布局由总体图模板匹配得出（2560x1440 × 0.75）
   ============================================================ */

body.page2 .backdrop {
  background: url("../assets/img/bg2.png") center / cover no-repeat;
}

body.page2 .scene { width: 1920px; height: 1080px; }
/* 手账统一：以第一页手账渲染位置/大小为标准（内容整体仿射变换，内部相对布局不变） */
body.page2 .content { transform: translate(-39.74px, -33.46px) scale(1.0644375); transform-origin: 0 0; }

/* ---------------- 手账本 ---------------- */
.notebook2 { left: 315px; top: 171px; width: 1280px; z-index: 1; }

/* ---------------- 左页 ---------------- */
.txt.tree    { left: 462px; top: 238px; width: 269px; z-index: 4; }
.txt.clip    { left: 431px; top: 206px; width: 78px;  z-index: 5; }
.txt.notes2  { left: 473px; top: 738px; width: 275px; z-index: 4; }

/* 复古电视：播放器在电视框之下，透过透明屏幕显示 */
.tv2-video {
  position: absolute;
  left: 495px;
  top: 466px;
  width: 235px;
  height: 204px;
  z-index: 2;
}
.tv2-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 铺满电视屏幕，不留黑边 */
  background: #000;
  border-radius: 20px;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: auto;
}
.tv2-video.has-video video { opacity: 1; }

.tv2-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  text-align: center;
  pointer-events: none;
}
.tv2 .play-btn { pointer-events: auto; }

.tv2 { left: 459px; top: 422px; width: 382px; z-index: 3; }

/* ---------------- 右页 ---------------- */
/* CCD：照片在相机框之下，透过透明屏幕显示 */
.ccd-photo {
  position: absolute;
  left: 1046px;
  top: 356px;
  width: 208px;
  height: 160px;
  z-index: 2;
}
.ccd-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .35s ease;
}
.ccd-photo.has-photo img { opacity: 1; }
.ccd-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: #7a6d5c;
  padding: 6px;
}
.ccd-hint b { color: #9c4a3a; font-weight: 600; }

.ccd { left: 998px; top: 246px; width: 404px; z-index: 3; }

/* ---------------- ccd 提示贴纸与放大按钮 ---------------- */
/* “点击切换查看下一张”贴纸（位置来自更新后的总体图） */
.switchtip {
  position: absolute;
  left: 970px;
  top: 545px;
  width: 204px;
  z-index: 6;
  pointer-events: auto;
  animation: tipBounce 2.2s ease-in-out 1s infinite;
}
.switchtip[hidden] { display: none; }
@keyframes tipBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-1.5deg); }
}

/* 放大按钮：与视频播放键同款红圆钮，挂照片右下角 */
.ccd-zoom-btn {
  position: absolute;
  right: -20px;
  bottom: -20px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(173, 32, 32, .92);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  animation: zoomPulse 2.4s ease-in-out 1s infinite;
  transition: background .18s ease, transform .18s ease;
}
.ccd-zoom-btn:hover { background: #b62a2a; transform: scale(1.1); }
@keyframes zoomPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(173,32,32,.5); }
  50%      { box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 10px rgba(173,32,32,0); }
}

/* ---------------- 照片灯箱（放大查看） ---------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 38, 28, .62);
  backdrop-filter: blur(3px);
}
.lightbox-card {
  position: relative;
  max-width: min(88vw, 1280px);
  max-height: 88vh;
  margin: 0;
  padding: 14px 14px 10px;
  background: #fffdf6;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  animation: lbPop .28s ease both;
}
@keyframes lbPop { from { opacity: 0; transform: scale(.92); } }
.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
#lbImg {
  max-width: 100%;
  max-height: calc(88vh - 90px);
  display: block;
  border-radius: 6px;
  user-select: none;
  cursor: zoom-in;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(58, 47, 36, .78);
  color: #fffdf6;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease, transform .2s ease;
}
.lightbox-nav:hover { background: #9c4a3a; transform: translateY(-50%) scale(1.1); }
.lightbox-nav.prev { left: -12px; }
.lightbox-nav.next { right: -12px; }
.lightbox-close {
  position: absolute;
  right: -14px;
  top: -14px;
  width: 36px;
  height: 36px;
  border: 2px solid #fffdf6;
  border-radius: 50%;
  background: #9c4a3a;
  color: #fffdf6;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: transform .2s ease, background .2s ease;
}
.lightbox-close:hover { transform: rotate(90deg); background: #7d3a2e; }
.lightbox-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 0 4px;
  color: #7a6d5c;
  font-size: 14px;
}
.lightbox-caption #lbTitle { font-weight: 600; color: #4a3f32; }
.lightbox-counter { font-variant-numeric: tabular-nums; color: #a89a86; }

/* 响应式：小窗口时箭头收进卡片内 */
@media (max-width: 720px) {
  .lightbox-nav { width: 36px; height: 36px; font-size: 20px; }
  .lightbox-nav.prev { left: 6px; }
  .lightbox-nav.next { right: 6px; }
  .lightbox-card { padding: 10px 10px 8px; }
}

.txt.worktext { left: 1019px; top: 604px; width: 348px; z-index: 4; }
.txt.stars    { left: 986px;  top: 659px; width: 410px; z-index: 4; }
.txt.dog      { left: 1386px; top: 494px; width: 142px; z-index: 5; }

/* 右下角环绕文字：缓慢旋转 */
.circletext {
  position: absolute;
  left: 1579px;
  top: 758px;
  width: 221px;
  z-index: 4;
  animation: spinSlow 24s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ---------------- 动态效果（与第一页一致的克制感） ---------------- */
.txt.dog     { animation: floatA 4.6s ease-in-out .6s infinite; }
.txt.tree    { animation: sway 7.5s ease-in-out .3s infinite; }
/* 新增持续微动：手账本呼吸 + 星星闪烁 + 便签与手写字的轻摆动。
   一律用 transform / filter，不要用 animation 动 opacity —— 入场淡入占着它。
   ⚠️ 给"带 hover 反馈"的素材（.txt.notes2/.txt.worktext/.txt.stars）只上 sway / twinkle，
      不要上 floatA / floatB：那类位移动画有 ±11~16px 行程，鼠标追着移动目标很难点中。
      sway 只转 ±1.2°，边缘位移约 3px，可忽略。 */
.notebook2   { animation: breathe 11s ease-in-out infinite; }
.txt.stars   { animation: twinkle 4.2s ease-in-out infinite; }
.txt.notes2  { animation: sway 8.8s ease-in-out .6s infinite; }
.txt.worktext { animation: sway 8.5s ease-in-out .7s infinite; }

/* ---------------- 素材入场编排（左页 → 右页，上 → 下） ----------------
   机制与注意事项见 style.css 的「素材落位」一节。 */
/* 成对图层：只位移不缩放，否则视频层会从外壳贴图的窗口里滑出来 */
.tv2-video, .tv2                      { --ss: 1; --sr: 0deg; }
.ccd-photo, .ccd, .txt.switchtip      { --ss: 1; --sr: 0deg; }

.notebook2     { --d: 0s;   --sy: 18px;  --ss: .982; --sr: 0deg; }
.txt.tree      { --d: .12s; --sy: -18px;               --sr: -2deg; }
.txt.clip      { --d: .28s; --sy: -14px;               --sr: 4deg; }
.tv2-video,
.tv2           { --d: .32s; --sy: 24px; }
.ccd-photo,
.ccd,
.txt.switchtip { --d: .42s; --sx: 22px;  --sy: 0px; }
.txt.notes2    { --d: .46s; --sy: 18px; }
.txt.worktext  { --d: .54s; --sx: 16px;  --sy: 0px; }
.txt.stars     { --d: .60s; --sy: 20px;                --sr: -2deg; }
.txt.dog       { --d: .68s; --sx: 22px;  --sy: 0px;    --sr: 3deg; }
.circletext    { --d: .74s; --ss: .86;                 --sr: 0deg; }

/* 鼠标触碰反馈
   ⚠️ 必须带上 opacity / translate 的入场过渡：这条与 style.css 的
      `.content > *` 同特异性且写在后面，会整条覆盖入场过渡。
      scale / rotate 的延迟留 0s，否则悬停要等一次入场延迟才响应。 */
.txt.notes2, .txt.worktext, .txt.stars {
  pointer-events: auto;
  transition:
    scale     .22s ease 0s,
    rotate    .22s ease 0s,
    opacity   var(--settle-dur) ease               var(--d, 0s),
    translate var(--settle-dur) var(--settle-ease) var(--d, 0s);
}
.txt.notes2:hover   { scale: 1.05; rotate: -2deg; }
.txt.worktext:hover { scale: 1.05; rotate: 1.5deg; }
.txt.stars:hover    { scale: 1.04; rotate: 1deg; }

/* ---------------- 返回首页标签 ---------------- */
.back-chip {
  position: fixed;
  left: 22px;
  top: 20px;
  z-index: 50;
  display: inline-block;
  padding: 8px 16px;
  background: #fffdf6;
  border: 1px solid #e0d3bd;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  color: #9c4a3a;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.back-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }

/* 右页跳转第三页：悬停右下区域浮现角标（样式与第一页 .goto-page2::after 完全一致） */
.goto-page3 {
  position: absolute;
  left: 965px;    /* 手账本中缝右侧起 */
  top: 171px;
  width: 955px;   /* 一直延伸到画布右缘 1920（含环绕贴纸的桌面区域） */
  height: 909px;  /* 一直延伸到画布底缘 1080 */
  z-index: 6;
  pointer-events: none; /* 不挡右页 ccd 的点击换图 */
}
.goto-page3 .page-pill {
  position: absolute;
  /* 尺寸按 1080/1440 = 0.75 缩小，与第一页角标（1440 画布中 14px）同屏视觉大小一致 */
  right: 18px;
  bottom: 15px;
  padding: 5px 11px;
  background: rgba(255, 253, 246, .95);
  border: 1px solid #e0d3bd;
  border-radius: 999px;
  box-shadow: 0 3px 9px rgba(0,0,0,.14);
  color: #9c4a3a;
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: auto; /* 角标本身可点击跳转 */
}
.goto-page3.hover .page-pill { opacity: 1; transform: translateY(0); }
.goto-page3 .page-pill:hover { background: #fffdf6; }

/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  .txt.dog, .txt.tree, .circletext { animation: none; }
  .switchtip { animation: none; }
  .ccd-zoom-btn { animation: none; }
  .notebook2, .txt.stars, .txt.notes2, .txt.worktext { animation: none; }
  /* 入场走 transition，animation:none 关不掉，要单独去过渡（详见 style.css） */
  .content > * { transition: none; }
}