/* --- 3. Hardware Onboarding Appearance & Component Callouts (#device) --- */
.device-art.onboarding-stage {
  position: relative;
  height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.device-art.onboarding-stage .device-circle {
  position: absolute;
  width: 520px;
  height: 520px;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(239, 210, 192, 0.35) 0%, rgba(239, 210, 192, 0.12) 48%, rgba(239, 210, 192, 0) 74%);
  pointer-events: none;
  z-index: 1;
}

/* 舞台中央主设备机身容器：全程竖立。开场镜头略远（App brandFar = 亮相位 ×1.08），
   渲染浮现时缓推到 1（App deviceReveal 运镜 1500ms easeOutCubic）。 */
.device-rig {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 546px; /* 312:1218 */
  margin-left: -70px;
  margin-top: -273px;
  z-index: 2;
  transform-origin: 50% 50%;
  transform: scale(0.926);
  transition: transform 1500ms cubic-bezier(0.33, 1, 0.68, 1), opacity 450ms ease-in;
  will-change: transform;
}
.device-rig.is-pushed {
  transform: scale(1);
}

/* 品牌字：先在舞台中央横排亮相，再收缩、转正落到机身印字位（App logoShrink 700ms）。
   盒子 = logo 墨迹包围盒（logo.png 墨迹 x113–916 / y105–230，按 200px 墨迹长缩放）；
   落位 = 渲染图印字中心 (159.5, 934.5)/312×1218，墨迹长 79.3px → scale 0.393。 */
.device-brand-print {
  position: absolute;
  top: 76.73%;
  left: 51.12%;
  width: 200px;
  height: 31.13px;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  /* 横排亮相位 = 机身中心（相对印字 dx -1.6px / dy -145.9px） */
  transform: translate(-50%, -50%) translate(-1.6px, -145.9px) rotate(0deg) scale(1);
  transition: opacity 500ms ease-out, transform 700ms cubic-bezier(0.33, 1, 0.68, 1);
}
.device-brand-print img {
  position: absolute;
  left: -28.15px;
  top: -26.15px;
  width: 261.5px;
  max-width: none;
  height: auto;
}
.device-brand-print.is-shown {
  opacity: 1;
}
.device-brand-print.is-morphed {
  transform: translate(-50%, -50%) translate(0px, 0px) rotate(-90deg) scale(0.393);
}
.device-brand-print.is-gone {
  opacity: 0;
  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* HLR 矢量折线线稿生长 Canvas */
.device-lineart-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  transition: opacity 650ms ease-out;
}
.device-rig.is-lines-hidden .device-lineart-canvas {
  opacity: 0;
}

/* 真机高清渲染与光圈容器（App 渲染浮现 900ms easeIn） */
.device-render-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  transition: opacity 900ms cubic-bezier(0.42, 0, 1, 1);
}
.device-rig.is-revealed .device-render-wrap {
  opacity: 1;
}

/* 重播：整体淡出 → 无过渡复位 → 重新出现 */
.device-art.onboarding-stage .app-leader-svg,
.device-art.onboarding-stage .callout-group {
  transition: opacity 450ms ease-in;
}
.device-art.onboarding-stage.is-clearing .device-rig,
.device-art.onboarding-stage.is-clearing .app-leader-svg,
.device-art.onboarding-stage.is-clearing .callout-group,
.device-art.onboarding-stage.is-clearing .device-caption,
.device-art.onboarding-stage.is-clearing .device-replay-btn {
  opacity: 0 !important;
  transition: opacity 450ms ease-in !important;
  pointer-events: none !important;
}
.device-art.onboarding-stage.is-resetting,
.device-art.onboarding-stage.is-resetting * {
  transition: none !important;
}

.device-art.onboarding-stage .device-hero-render,
.device-hero-render {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 18px 36px rgba(44, 30, 24, 0.14));
}

/* 电源按键外环光圈 (精确贴合真机物理白环: center 160.5, 537.0; outer D=46px, inner D=34.4px) */
.device-light-ring {
  position: absolute;
  left: 51.44%;
  top: 44.09%;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 5.8px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease-out;
}
.device-light-ring.is-lit {
  opacity: 1;
}
.device-light-ring.has-pulse {
  animation: ringPulse 3.2s ease-in-out infinite 0.6s;
}
@keyframes ringPulse {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  }
  50% {
    border-color: #FFFFFF;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.95), 0 0 26px rgba(244, 107, 69, 0.25);
  }
}

/* 机身下部蓝绿色状态指示灯 LED (center: 159.4, 1051.8) */
.device-status-led {
  position: absolute;
  left: 51.1%;
  top: 86.35%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #44D9F0;
  box-shadow: 0 0 8px 3px rgba(68, 217, 240, 0.75), 0 0 18px 6px rgba(68, 217, 240, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease-out;
}
.device-status-led.is-lit {
  opacity: 1;
  animation: ledBreathe 2.8s ease-in-out infinite 0.5s;
}
@keyframes ledBreathe {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 12px 4px rgba(68, 217, 240, 0.9), 0 0 24px 8px rgba(68, 217, 240, 0.45); }
}

/* 关键部件高亮矢量轮廓 (SVG 覆盖层) */
.device-part-traces {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}
.trace-path {
  fill: none;
  stroke: var(--coral, #F46B45);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  /* draw-on：pathLength=1，dashoffset 1 → 0（App 部件描边错峰生长，easeOut） */
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: opacity 0.2s ease-out, stroke-dashoffset 385ms cubic-bezier(0, 0, 0.58, 1), stroke 0.35s ease-out, filter 0.35s ease-out;
}
.trace-path.is-active {
  opacity: 0.22;
  stroke-dashoffset: 0;
}
.trace-path.is-lit {
  opacity: 1 !important;
  stroke: var(--coral, #F46B45) !important;
  stroke-width: 2.8 !important;
  filter: drop-shadow(0 0 8px rgba(244, 107, 69, 0.65));
}