/* 飞鼠遥控器 官网 · 动效增强版 (v2)
 * 在 tokens.css + style.css 之上叠加：首屏活体演示、滚动入场、氛围光晕。
 * 依赖 GSAP + ScrollTrigger。无 JS / reduced-motion 时全部内容默认可见（不隐藏）。
 * 演示：左=遥控手机(随模式切界面)，右=被控电脑(同步反应)。
 */

/* ---------- 氛围：柔和品牌光晕 + eyebrow 呼吸点 ---------- */
.hero { position: relative; overflow: hidden; padding-top: calc(var(--s7) + 10px); }
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 130%;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(40% 40% at 82% 18%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    radial-gradient(45% 45% at 16% 30%, color-mix(in srgb, var(--ok) 8%, transparent), transparent 70%);
  filter: blur(8px); z-index: 0; pointer-events: none;
  animation: glowFloat 14s var(--ease) infinite alternate;
}
@keyframes glowFloat { from { transform: translate3d(-1%,0,0) scale(1);} to { transform: translate3d(2%,-1.5%,0) scale(1.06);} }
.hero .wrap { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  animation: dotPulse 2.4s ease-out infinite;
}
@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- 入场：仅 JS 接管且非 reduced 时先隐藏 ---------- */
.js-anim .anim-hero, .js-anim .reveal-up { opacity: 0; }
.js-anim .anim-hero { transform: translateY(18px); }
.js-anim .reveal-up { transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) {
  .js-anim .anim-hero, .js-anim .reveal-up { opacity: 1 !important; transform: none !important; }
}

/* ====================================================================
   活体演示：600×440 设计尺寸，transform:scale 做响应式
   ==================================================================== */
.demo-stage { margin-top: var(--s6); display: flex; justify-content: center; }
.demo { position: relative; width: 640px; height: 440px; transform-origin: top center; }

/* 应用配色（手机宫格 / 电脑 dock 共用，按 data-app 对应） */
.demo { --c-music:#EC4899; --c-web:#0EA5E9; --c-ppt:#F59E0B; --c-file:#14B8A6; --c-mail:#6366F1; --c-code:#64748B; }

/* —— 右：被控电脑 —— */
.screen {
  position: absolute; right: 0; top: 12px; width: 460px; height: 316px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.screen-bar {
  height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px;
  background: color-mix(in srgb, var(--text) 4%, var(--surface)); border-bottom: 1px solid var(--line);
}
.screen-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.screen-bar i:nth-child(1){background:#FF5F57;} .screen-bar i:nth-child(2){background:#FEBC2E;} .screen-bar i:nth-child(3){background:#28C840;}
.screen-bar span { margin-left: 8px; font-size: 12px; color: var(--text-faint); letter-spacing: .02em; }
.screen-body { position: relative; height: calc(100% - 34px); padding: 20px 22px 12px; }

/* 电脑里的“窗口/文稿” */
.win {
  height: 178px; border-radius: 12px; background: var(--bg);
  border: 1px solid var(--line); overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.win-strip { height: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); transition: background .4s; }
.win-body { padding: 16px 18px; position: relative; height: calc(100% - 8px); }
.win-kicker { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--brand); margin-bottom: 8px; }
.win-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.win-text { margin-top: 10px; font-size: 15px; color: var(--text); min-height: 20px; white-space: pre-wrap; }
.win-caret { display: inline-block; width: 2px; height: 17px; background: var(--brand); vertical-align: -3px; animation: caretBlink 1s step-end infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
.win-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.win-lines b { height: 7px; border-radius: 5px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.win-lines b:nth-child(1){width:64%;} .win-lines b:nth-child(2){width:48%;}
.win-paste { opacity: 0; margin-top: 2px; }
.wt-line { font-size: 15px; color: var(--text); padding: 3px 6px; border-radius: 6px; margin-top: 6px; transition: background .7s ease; }
.copy-chip { position: absolute; top: 12px; right: 14px; padding: 4px 11px; border-radius: 999px;
  background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 600; opacity: 0; }
.copy-chip::before { content: "✓ "; }

/* dock */
.dock {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; gap: 10px; padding: 7px 10px; border-radius: 14px;
  background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line);
}
.dock-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 600; }
.dock-ic[data-app=music]{background:var(--c-music);} .dock-ic[data-app=web]{background:var(--c-web);}
.dock-ic[data-app=ppt]{background:var(--c-ppt);} .dock-ic[data-app=file]{background:var(--c-file);}
.dock-ic[data-app=mail]{background:var(--c-mail);}

/* 光标 + 涟漪 */
.cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 6;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)); will-change: transform; }
.ripple { position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--brand); opacity: 0; z-index: 5; transform: translate(-50%,-50%); }

/* —— 左：遥控手机 —— */
.phone {
  position: absolute; left: 0; bottom: 0; width: 208px; height: 420px;
  border-radius: 34px; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg), 0 0 0 6px color-mix(in srgb, var(--text) 5%, transparent);
  padding: 12px; z-index: 8;
}
.phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 62px; height: 6px; border-radius: 6px; background: var(--line-2); }
.phone-top { text-align: center; padding: 16px 0 10px; }
.phone-top small { font-size: 11px; color: var(--ok); }
.phone-top small::before { content: "● "; font-size: 8px; vertical-align: middle; }
.phone-mode {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px;
}

/* 模式切换舞台：所有模式叠放、始终占位（便于测坐标），靠 opacity 切换 */
.phone-screen { position: relative; height: 316px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.pm { position: absolute; inset: 0; padding: 16px; opacity: 0; }

/* 模式1：触控板 */
.pm-pad { background: linear-gradient(color-mix(in srgb, var(--brand) 5%, transparent), transparent); }
.pad-hint { position: absolute; top: 16px; left: 0; right: 0; text-align: center;
  font-size: 12px; color: var(--text-faint); letter-spacing: .1em; }
.pad-dots { position: absolute; inset: 44px 22px 22px; border-radius: 14px;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 12%, transparent) 1.2px, transparent 1.2px);
  background-size: 20px 20px; opacity: .5; }

/* 模式2：发送文字 */
.pm-text { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; }
.ti-field { min-height: 92px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  padding: 12px 14px; font-size: 15px; color: var(--text); line-height: 1.5; }
.ti-caret { display: inline-block; width: 2px; height: 16px; background: var(--brand); vertical-align: -3px; animation: caretBlink 1s step-end infinite; }
.ti-send { margin-top: auto; height: 44px; border: none; border-radius: 12px;
  background: var(--brand); color: var(--on-brand); font-size: 15px; font-weight: 600; }

/* 模式3：一键开程序 */
.pm-apps { padding-top: 24px; }
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; }
.app-ic { aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center;
  color: #fff; font-size: 20px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.app-ic[data-app=music]{background:var(--c-music);} .app-ic[data-app=web]{background:var(--c-web);}
.app-ic[data-app=ppt]{background:var(--c-ppt);} .app-ic[data-app=file]{background:var(--c-file);}
.app-ic[data-app=mail]{background:var(--c-mail);} .app-ic[data-app=code]{background:var(--c-code);}

/* 模式4：快捷键 */
.pm-keys { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 62px; gap: 12px; padding-top: 30px; align-content: start; }
.kbtn { border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  font-size: 15px; font-weight: 600; color: var(--text); display: grid; place-items: center; }
.kbtn-hl { border-color: var(--brand); color: var(--brand); }

/* 手机上的手指触点（在 .phone-screen 内绝对定位） */
.finger { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; z-index: 10;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--brand) 50%, transparent), color-mix(in srgb, var(--brand) 18%, transparent) 60%, transparent 72%);
  will-change: transform; pointer-events: none; }
.finger::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--brand); opacity: .9; }

/* 动作说明胶囊 */
.demo-caption { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }

/* ---------- 响应式 ---------- */
/* 缩放后的演示布局盒仍占原始宽度，用 overflow-x:clip 兜住横向溢出（不建滚动容器、不破坏 sticky 顶栏）*/
body { overflow-x: clip; }

/* 平板/大屏手机横向：仍左右并排，整体缩放 */
@media (max-width: 760px) { .demo { transform: scale(0.62); } .demo-stage { height: 300px; align-items: flex-start; margin-top: var(--s5); } }

/* 手机竖屏：演示改为上下堆叠（手机在上、电脑在下），各自更大、交互看得清 */
@media (max-width: 560px) {
  .demo-stage { height: 548px; }
  .demo { width: 460px; height: 812px; transform: scale(0.66); }
  .demo .phone  { left: 50%; right: auto; top: 0;   bottom: auto; transform: translateX(-50%); }
  .demo .screen { left: 50%; right: auto; top: 448px;             transform: translateX(-50%); }
  .demo-caption { left: 50%; bottom: auto; top: 782px; }
}

.tile { will-change: transform, opacity; }