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

body.page3 .backdrop {
  background: url("../assets/img/bg3.jpg") center / cover no-repeat;
}

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

/* ---------------- 手账本 ---------------- */
.notebook3 { left: 283px; top: 163px; width: 1313px; z-index: 1; }

/* ---------------- 左页 ---------------- */
.txt.newspaper { left: 447px; top: 241px; width: 392px; z-index: 3; }
.txt.newstext  { left: 470px; top: 372px; width: 344px; z-index: 4; }
.txt.kid       { left: 304px; top: 571px; width: 335px; z-index: 4; }
.txt.tart      { left: 607px; top: 610px; width: 81px;  z-index: 5; }
.txt.phone3    { left: 703px; top: 590px; width: 113px; z-index: 5; }
.txt.pizza     { left: 670px; top: 815px; width: 175px; z-index: 3; }

/* ---------------- 右页 ---------------- */
/* 电脑：播放器在电脑框之下，透过透明屏幕显示 */
.pc-video {
  position: absolute;
  left: 1050px;
  top: 496px;
  width: 257px;
  height: 189px;
  z-index: 2;
}
.pc-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 铺满电脑屏幕，不留黑边 */
  background: #000;
  border-radius: 8px;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: auto;
}
.pc-video.has-video video { opacity: 1; }

.pc-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;
}
.play-btn { pointer-events: auto; }

.computer { left: 931px; top: 461px; width: 527px; z-index: 3; }

.txt.p3text { left: 971px; top: 242px; width: 413px; z-index: 4; }

/* 右下角电话贴纸（在桌面上） */
/* 电话贴纸：位置补偿（保持右缘屏幕位置，避免被统一变换推出画布） */
.txt.phonesticker { left: 1521px; top: 720px; width: 316px; z-index: 4; }

/* ---------------- 动态效果（与前两页一致的克制感） ---------------- */
/* ⚠️ 2026-09-15：下面 floatB 原本全站都没有定义（style.css 只有 floatA/zap/sway），
   所以 .txt.phone3 与 .txt.phonesticker 一直是静止的。现在把 floatB 补在了
   style.css 的共享动画区，这两处才真正动起来。 */
.txt.kid    { animation: sway 8s ease-in-out .5s infinite; }
.txt.tart   { animation: floatA 5.5s ease-in-out .3s infinite; }
.txt.phone3 { animation: floatB 6.5s ease-in-out .8s infinite; }
.txt.pizza  { animation: floatA 7s ease-in-out 1.2s infinite; }
.txt.phonesticker { animation: floatB 8s ease-in-out .4s infinite; }

/* 新增持续微动：手账本呼吸 + 报纸（含报上文字，必须同一条动画同延迟才不会错位）
   + 手写字轻摆。一律用 transform / filter，别用 animation 动 opacity。
   ⚠️ 带 hover 反馈的 .txt.newspaper/.txt.newstext/.txt.p3text 只上 sway：
      floatA/floatB 有 ±11~16px 行程，鼠标追移动目标很难点中，sway 只转 ±1.2°。 */
.notebook3 { animation: breathe 10.5s ease-in-out infinite; }
.txt.newspaper, .txt.newstext { animation: sway 9.5s ease-in-out .5s infinite; }
.txt.p3text { animation: sway 9s ease-in-out 1.1s infinite; }

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

.notebook3     { --d: 0s;   --sy: 18px;  --ss: .982; --sr: 0deg; }
.txt.newspaper,
.txt.newstext  { --d: .12s; --sy: -18px;               --sr: -2deg; }
.txt.kid       { --d: .28s; --sx: -20px; --sy: 20px;   --sr: -3deg; }
.pc-video,
.computer      { --d: .34s; --sx: 22px;  --sy: 0px; }
.txt.tart      { --d: .44s; --sx: -18px; --sy: 0px;    --sr: 3deg; }
.txt.phone3    { --d: .50s; --sy: 22px;                --sr: -2deg; }
.txt.p3text    { --d: .56s; --sx: 18px;  --sy: 0px; }
.txt.pizza     { --d: .64s; --sy: 18px;                --sr: 2deg; }
.txt.phonesticker { --d: .72s; --sx: 24px; --sy: 0px;  --sr: 3deg; }

/* 鼠标触碰反馈
   ⚠️ 必须带上 opacity / translate 的入场过渡：这条与 style.css 的
      `.content > *` 同特异性且写在后面，会整条覆盖入场过渡。
      scale / rotate 的延迟留 0s，否则悬停要等一次入场延迟才响应。 */
.txt.newstext, .txt.p3text, .txt.newspaper {
  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.newstext:hover  { scale: 1.04; rotate: -1.5deg; }
.txt.p3text:hover    { scale: 1.05; rotate: 1.5deg; }
.txt.newspaper:hover { scale: 1.02; rotate: .8deg; }

/* ---------------- 返回上一页标签（右上角） ---------------- */
.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); }

/* 返回上一页标签：与第二页"返回首页"同款（左上角） */

/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  .txt.kid, .txt.tart, .txt.phone3, .txt.pizza, .txt.phonesticker,
  .notebook3, .txt.newspaper, .txt.newstext, .txt.p3text { animation: none; }
  /* 入场走 transition，animation:none 关不掉，要单独去过渡（详见 style.css） */
  .content > * { transition: none; }
}

/* 悬停右下区域浮现"下一页"角标（尺寸与第二页一致的缩小版胶囊） */
.goto-page4 {
  position: absolute;
  left: 965px;    /* 手账本中缝右侧起 */
  top: 171px;
  width: 955px;   /* 延伸至画布右缘 */
  height: 909px;  /* 延伸至画布底缘 */
  z-index: 6;
  pointer-events: none; /* 不挡右页电脑视频的交互 */
}
.goto-page4 .page-pill {
  position: absolute;
  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-page4.hover .page-pill { opacity: 1; transform: translateY(0); }
.goto-page4 .page-pill:hover { background: #fffdf6; }