/* =========================================================================
 * css/pages/room.css — 界面 1 · 矢量房间（#/room）
 * 作用域：全部选择器以 .page-room 为前缀，禁止全局污染。
 * 依赖：css/tokens.css 的变量（--bg-0/--ink/--muted/--accent/--accent-cyan），
 *       均带兜底值，tokens.css 缺失时页面仍可独立呈现。
 * 动效约束：主运动仅 transform / opacity；描边绘入用 stroke-dashoffset，
 *           屏幕滚动用 clip-path 裁剪；统一缓动 cubic-bezier(.22,1,.36,1)。
 * 降级：所有无限循环动画与入场/扫描/转场重效果均包在
 *       @media (prefers-reduced-motion: no-preference) 内；
 *       reduce 偏好下直接呈现最终状态，转场由 JS 立即跳转。
 * ======================================================================= */

/* ---- 页面容器：此页无全局毛玻璃背景，房间自带底色铺满 ---- */
.page-room {
  position: relative; /* 供 .room-flash 转场闪白层定位 */
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 40px 48px 32px;
  background: var(--bg-0, #070b14);
  color: var(--ink, #e6ecf7);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  overflow: hidden;
}

/* ---- 顶部引导文案 ---- */
.page-room .room-hint {
  flex: 0 0 auto;
  max-width: 640px;
}

.page-room .room-hint__title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink, #e6ecf7);
}

.page-room .room-hint__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--muted, #8a97b1);
}

/* ---- 房间舞台：SVG 充满剩余区域 ---- */
.page-room .room-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding-top: 16px;
}

.page-room .room-svg {
  display: block;
  width: 100%;
  max-width: 1080px;
  height: auto;
  max-height: calc(100vh - 220px);
}

.page-room .room-svg text {
  font-family: inherit;
  letter-spacing: .1em;
}

/* ---- ① 入场描边层：基础态即最终态（完整描边），绘入动画见 no-preference 块 ---- */
.page-room .room-draw .draw {
  stroke: rgba(77, 141, 255, .5);
  stroke-width: 2;
}

.page-room .room-draw .draw--soft {
  stroke: rgba(140, 170, 255, .22);
  stroke-width: 1.5;
}

/* ---- ② 环境生机：微尘 / 月光 / 屏幕 基础态 ---- */
.page-room .dust {
  opacity: .18;
}

.page-room .moon {
  opacity: .85;
}

/* ---- ④ 场景扫描线：默认不可见，动画周期内短暂现身 ---- */
.page-room .scanline {
  opacity: 0;
}

/* ---- 热点：悬停高亮（发光描边 + 轻微浮起）+ HUD 标签 ---- */
.page-room .hotspot {
  cursor: pointer;
  outline: none;
}

.page-room .hotspot__body {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1),
              filter .25s cubic-bezier(.22, 1, .36, 1),
              opacity .25s cubic-bezier(.22, 1, .36, 1);
}

.page-room .hotspot:hover .hotspot__body,
.page-room .hotspot:focus-visible .hotspot__body {
  transform: translateY(-6px); /* ③ 悬停浮起 */
  filter: drop-shadow(0 0 10px rgba(77, 141, 255, .9))
          drop-shadow(0 0 28px rgba(53, 224, 255, .35));
}

/* 呼吸脉冲圈（基础态；动画在 no-preference 块内） */
.page-room .hotspot__pulse {
  opacity: .15;
}

.page-room .hotspot:hover .hotspot__pulse,
.page-room .hotspot:focus-visible .hotspot__pulse {
  animation: none;
  opacity: .55;
}

/* ③ 雷达脉冲环：基础态不可见，扩散循环动画在 no-preference 块内 */
.page-room .hotspot__radar {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* HUD 信息标签：锐角括号框 + 游戏名 + 编号，默认隐藏，悬停浮现 */
.page-room .hotspot__label {
  pointer-events: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(6px);
  transition: opacity .2s cubic-bezier(.22, 1, .36, 1),
              transform .2s cubic-bezier(.22, 1, .36, 1);
}

.page-room .hotspot__label .label-frame {
  stroke: var(--accent, #4d8dff);
  stroke-width: 2;
}

.page-room .hotspot__label .label-name {
  fill: var(--ink, #e6ecf7);
  font-size: 15px;
  letter-spacing: .18em;
}

.page-room .hotspot__label .label-code {
  fill: var(--accent-cyan, #35e0ff);
  font-size: 8.5px;
  letter-spacing: .22em;
  opacity: .8;
}

.page-room .hotspot:hover .hotspot__label,
.page-room .hotspot:focus-visible .hotspot__label {
  opacity: 1;
  transform: translateY(0);
}

/* ---- ⑤ 点击转场：闪白层（基础态透明；动画在 no-preference 块内） ---- */
.page-room .room-flash {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: #eaf2ff;
  opacity: 0;
}

/* =========================================================================
 * 动效区：仅在「无减少动效偏好」时启用
 * （入场绘入 / 家具淡入 / 雷达脉冲 / 屏幕闪烁与滚动 / 微尘 / 月光 / 扫描线 / 转场）
 * ======================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* ---- ① 入场：轮廓描边绘入（约 0.05s–0.95s），随后家具/热点淡入（至约 1.2s） ---- */
  .page-room .room-draw .draw {
    stroke-dasharray: 1000;
    animation: room-draw .5s cubic-bezier(.22, 1, .36, 1) both;
  }
  .page-room .room-draw .draw--1 { animation-delay: .05s; animation-duration: .45s; }
  .page-room .room-draw .draw--2 { animation-delay: .15s; animation-duration: .35s; }
  .page-room .room-draw .draw--3 { animation-delay: .20s; animation-duration: .35s; }
  .page-room .room-draw .draw--4 { animation-delay: .25s; animation-duration: .35s; }
  .page-room .room-draw .draw--5 { animation-delay: .30s; animation-duration: .35s; }
  .page-room .room-draw .draw--6 { animation-delay: .35s; animation-duration: .40s; }
  .page-room .room-draw .draw--7 { animation-delay: .40s; animation-duration: .40s; } /* 桌面 */
  .page-room .room-draw .draw--8 { animation-delay: .50s; animation-duration: .45s; } /* 门框 */

  @keyframes room-draw {
    from { stroke-dashoffset: 1000; }
    to   { stroke-dashoffset: 0; }
  }

  .page-room .decor {
    animation: room-fadein .45s cubic-bezier(.22, 1, .36, 1) .60s both;
  }
  .page-room .dust-layer {
    animation: room-fadein .45s cubic-bezier(.22, 1, .36, 1) .70s both;
  }
  .page-room .hotspot {
    animation: room-fadein .40s cubic-bezier(.22, 1, .36, 1) .80s both;
  }
  .page-room .room-hint {
    animation: room-fadein .4s cubic-bezier(.22, 1, .36, 1) .1s both;
  }

  @keyframes room-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ---- 呼吸脉冲圈（常驻，提示可交互） ---- */
  .page-room .hotspot__pulse {
    animation: room-pulse 2.6s ease-in-out infinite;
  }
  @keyframes room-pulse {
    0%, 100% { opacity: .12; }
    50%      { opacity: .5;  }
  }

  /* ---- ③ 雷达脉冲环：圆环扩散淡出，a/b 双环错半周期，三个热点再错峰 ---- */
  .page-room .hotspot__radar {
    animation: room-radar 2.4s cubic-bezier(.22, 1, .36, 1) infinite;
  }
  .page-room .hotspot__radar--b { animation-delay: 1.2s; }
  .page-room .hotspot--solitaire .hotspot__radar--a { animation-delay: .8s; }
  .page-room .hotspot--solitaire .hotspot__radar--b { animation-delay: 2s; }
  .page-room .hotspot--escape    .hotspot__radar--a { animation-delay: 1.6s; }
  .page-room .hotspot--escape    .hotspot__radar--b { animation-delay: 2.8s; }

  @keyframes room-radar {
    0%   { transform: scale(.55);  opacity: .5; }
    70%  {                         opacity: .12; }
    100% { transform: scale(1.35); opacity: 0; }
  }

  /* ---- ② 屏幕：轻微闪烁 / 亮度呼吸 ---- */
  .page-room .screen {
    animation: room-flicker 4.5s linear infinite;
  }
  @keyframes room-flicker {
    0%, 100% { opacity: .92; }
    8%       { opacity: 1; }
    9%       { opacity: .76; }
    10%      { opacity: 1; }
    46%      { opacity: .88; }
    50%      { opacity: 1; }
    82%      { opacity: .95; }
  }

  /* ---- ② 屏幕：代码行无缝上滚（clip-path 裁剪在 SVG 内，动画仅 transform） ---- */
  .page-room .screen-scroll {
    animation: room-scroll 3.2s linear infinite;
  }
  @keyframes room-scroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-72px); }
  }

  /* ---- ② 微尘：缓慢漂移（错峰时长与负延迟） ---- */
  .page-room .dust {
    animation: room-drift 10s ease-in-out infinite alternate;
  }
  .page-room .dust--1 { animation-duration: 9s;  animation-delay: 0s; }
  .page-room .dust--2 { animation-duration: 12s; animation-delay: -3s; }
  .page-room .dust--3 { animation-duration: 10s; animation-delay: -6s; }
  .page-room .dust--4 { animation-duration: 14s; animation-delay: -2s; }
  .page-room .dust--5 { animation-duration: 11s; animation-delay: -8s; }
  .page-room .dust--6 { animation-duration: 13s; animation-delay: -5s; }

  @keyframes room-drift {
    from { transform: translate(0, 0);        opacity: .12; }
    50%  {                                    opacity: .45; }
    to   { transform: translate(14px, -26px); opacity: .2; }
  }

  /* ---- ② 窗外月光：微光脉动 ---- */
  .page-room .moon {
    animation: room-moon 5s ease-in-out infinite alternate;
  }
  @keyframes room-moon {
    from { opacity: .85; }
    to   { opacity: .45; }
  }

  /* ---- ④ 场景扫描：每 9s 一道竖直扫描线过场（前 ~22% 扫过，其余时间隐匿） ---- */
  .page-room .scanline {
    animation: room-scan 9s linear infinite;
  }
  @keyframes room-scan {
    0%   { transform: translateX(-12px); opacity: 0; }
    3%   {                               opacity: .12; }
    20%  { transform: translateX(970px); opacity: .12; }
    24%  { transform: translateX(970px); opacity: 0; }
    100% { transform: translateX(970px); opacity: 0; }
  }

  /* ---- ⑤ 点击转场：闪白 + 扫描爆闪（约 0.3s，JS 加 .page-room--exiting 触发） ---- */
  .page-room--exiting .room-flash {
    animation: room-flash .3s ease-out both;
  }
  @keyframes room-flash {
    0%   { opacity: 0; }
    35%  { opacity: .85; }
    100% { opacity: 1; }
  }

  .page-room--exiting .scanline {
    animation: room-scan-burst .28s linear both;
  }
  @keyframes room-scan-burst {
    0%   { transform: translateX(-12px); opacity: 0; }
    15%  {                               opacity: .5; }
    100% { transform: translateX(970px); opacity: .1; }
  }
}

/* ---- 无障碍：减少动效偏好（过渡降级为即时） ---- */
@media (prefers-reduced-motion: reduce) {
  .page-room .hotspot__pulse { animation: none; }
  .page-room .hotspot__body,
  .page-room .hotspot__label { transition: none; }
}