/* ============================================================
   第五页 Joe's Portfolio · 创意作品集（六个文件夹）
   设计画布 1920x1080（源素材 2560x1440，×0.75）
   总体图作为完整设计稿整层铺底，六个文件夹单独抠出做交互层
   ============================================================ */

/* 底图背景（整屏铺满，与其他页一致：纯背景图，不含前景元素） */
body.page5 .backdrop {
  background: url("../assets/img/p5_bg.jpg") center / cover no-repeat;
}

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

/* 前景层：手账/人物/电话/贴纸等（透明 PNG，叠在底图上） */
.p5fg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  z-index: 1;
  pointer-events: none;
}

/* ---------------- 六个文件夹（交互层） ---------------- */
.folder {
  position: absolute;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 4;
  animation: folderBreathe 5.5s ease-in-out infinite;
}
.folder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transition: transform .22s ease, filter .22s ease;
}
/* 悬浮：居中放大 + 阴影，不位移（避免露出底图里原位置的文件夹） */
.folder:hover img {
  transform: scale(1.06);
  filter: drop-shadow(0 8px 16px rgba(60, 40, 20, .25)) brightness(1.04);
}
.folder:active img { transform: scale(1.02); }

/* 轻微错落呼吸（克制，仅居中缩放不位移） */
@keyframes folderBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}
.folder:nth-child(even) { animation-delay: 1.1s; }
.folder:nth-child(3n)   { animation-delay: 2.2s; }

/* ---------------- 素材入场编排 ----------------
   机制与通用注意事项见 style.css 的「素材落位」一节。
   content 的子元素顺序 = p5fg(1) + 六个文件夹(2~7)，
   文件夹按"左上→右上→中左→中右→左下→右下"的行序落位，
   来向取各自的外侧，形成向内收拢的"归位"感。

   底图 p5fg 只做淡入、不做缩放：它正好铺满 1920×1080 的 content，
   一旦缩放就会在边缘露出背景，或溢出到场景之外。 */
.p5fg { --d: .06s; --ss: 1; --sy: 0px; --sr: 0deg; }

/* 两件小物：只做淡入，**不带位移 / 缩放 / 旋转**，时机与底板一致。
   因为底板里还留着它们本身（拆层时刻意保留轮廓内侧，只挖了外圈环带），
   图层只要离开原位，淡入过程中就会出现「底板原件 + 半透明的新位置」重影；
   原地淡入则与原图逐像素重合，观感 = 它们随手账一起显影，与本次改动前完全一致。
   （其余素材的错峰位移照旧，见上面 .folder。） */
.content > img.p5trinket { --d: .06s; --ss: 1; --sy: 0px; --sr: 0deg; }

.content > .folder:nth-child(2) { --d: .12s; --sx: -26px; --sy: -18px; --sr: -3deg; }
.content > .folder:nth-child(3) { --d: .20s; --sx:  26px; --sy: -18px; --sr:  3deg; }
.content > .folder:nth-child(4) { --d: .28s; --sx: -28px; --sy:   0px; --sr: -2deg; }
.content > .folder:nth-child(5) { --d: .36s; --sx:  28px; --sy:   0px; --sr:  2deg; }
.content > .folder:nth-child(6) { --d: .44s; --sx: -26px; --sy:  20px; --sr: -3deg; }
.content > .folder:nth-child(7) { --d: .52s; --sx:  26px; --sy:  20px; --sr:  3deg; }

/* 悬停出现的"▶ 播放"小标签 */
.folder-hint {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translate(-50%, 50%);
  padding: 3px 10px;
  background: #9c4a3a;
  color: #fffdf6;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.folder:hover .folder-hint { opacity: 1; }

/* ---------------- 挂在手账上的两件小物（独立图层） ----------------
   底板 p5_fg.png 里已经把「透明电话」和「小翅膀挂件」抹掉了，改由这两层承担，
   于是它们能各自动，而不必把整张底板一起推走（那正是上次"位置大小全乱"的原因）。

   位置 / 尺寸 / 支点都来自拆层时的实测导出，**不要凭感觉调**：
     电话 269×250 @ (275,774)，支点 60.2% 95.2%  = 机身底边中点
     翅膀 156×294 @ (1538,599)，支点 16.4% 0%     = 登山扣顶端（挂在皮盖上的那一点）

   ⚠️ 这两个 <img> 落在 .scene 里，会命中 style.css 的 `.scene img`
      （那条把 pointer-events 设成了 none）。它特异性 (0,1,1)，比单个类名高，
      所以下面必须写到 `.content > img.xxx` (0,2,1) 才压得住。

   ⚠️ 活动预算：图层能挪多远而不把底板里残留的原件露出来，取决于拆层脚本的环带宽度
      （电话 R=40px、翅膀 R=56px）。当前两段动效实测最深露出 14.0 / 23.0px，
      静止态已逐像素等于原图（最终 RGB 差平均 0.0011、最大 8/255）。
      **改振幅之前先跑 verify_motion.py**，它会给出「实体原件挪开后仍留在原地」的像素数，
      越接近 0 越好（当前 247px / 5.2 万实体像素）。 */
.content > img.p5trinket {
  position: absolute;
  display: block;
  z-index: 2;              /* 夹在 p5fg(1) 与 .folder(4) 之间 */
  pointer-events: none;
}
.content > img.p5phone {
  left: 275px;  top: 774px;  width: 269px; height: 250px;
  transform-origin: 60.2% 95.2%;
  pointer-events: auto;    /* 只有电话需要被鼠标碰到 */
}
.content > img.p5wing {
  left: 1538px; top: 599px; width: 156px; height: 294px;
  transform-origin: 16.4% 0%;
}

/* ---- 电话：鼠标碰上去「叮」地晃一下，自己回正 ----
   刻意做成单次播放而不是 infinite 循环：循环动画被鼠标移开打断时，
   会从当时的任意角度硬跳回 0deg；而这一段首尾都停在 0deg，
   进场、播完、移开三种情形都不会跳。 */
@keyframes phoneTwang {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(4.2deg); }
  42%  { transform: rotate(-2.9deg); }
  64%  { transform: rotate(1.8deg); }
  82%  { transform: rotate(-0.9deg); }
  100% { transform: rotate(0deg); }
}
.content > img.p5phone:hover { animation: phoneTwang .95s ease-out both; }

/* ---- 翅膀：挂在扣上一直轻轻左右晃 ----
   首尾都取 0deg，所以加 animation-delay 也不会在起摆那一刻"啪"地跳一下；
   四分之一周期到一侧 → 这样左右各用相同时长，才是钟摆的节奏。
   delay .9s：等底板淡入（.06s + .78s）走完再起摆 ——
   否则入场那 0.8 秒里会看到「底板里那只静止的 + 半透明正在晃的这只」重在一起。 */
@keyframes wingSway {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-5deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
.content > img.p5wing { animation: wingSway 5.6s ease-in-out .9s infinite; }

/* ---------------- 视频浮层 ----------------
   样式已抽到 css/style.css 统一维护（第四页的胶卷框放大复用了同一套类名）。
   本页只负责"点文件夹打开它"，不再重复定义外观。 */

/* ---------------- 返回标签（与前页同款，不随场景缩放） ---------------- */
.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) {
  .folder { animation: none; }
  /* 两件小物的动效也一并停掉（选择器特异性要与上面的声明一致，否则压不住） */
  .content > img.p5phone,
  .content > img.p5wing { animation: none; }
  /* 浮层卡片的动画在 css/style.css 的 reduce 分支里关掉 */
  /* 入场走 transition，animation:none 关不掉，要单独去过渡（详见 style.css） */
  .content > * { transition: none; }
}