/* ============================================================
 * Longlight - 长光雨滴小站 | 页面样式：index / 开机按钮
 * pages/index/power.css
 * 区块：全息开机按钮（投影面 / 扫描光条 / 外圈能量环）、按压反馈、亮色主题调整与全部关键帧
 * 说明：不在本文件重复定义 :root / [data-theme]，颜色一律引用 tokens.css 令牌
 * ============================================================ */

/* 开机按钮（空气投影）：无实体厚度、无实体阴影/浮雕/立体感。
   结构：透明外层承载入场渲染与外部光环；内层 .power-face 为正圆投影面（overflow 裁剪到圆内）承载扫描线。 */
.power-btn {
  position: fixed;
  inset: 0;
  z-index: 4;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  cursor: default;               /* 按钮盒全屏，光标仅在投影面内为指针 */
  pointer-events: none;          /* 全屏不拦截点击，仅投影面区域可交互 */
  color: var(--green-primary);
  font-family: var(--font-mono);
  opacity: 0;
  /* 入场渲染：与主页点火按钮（pages/home/ignite.css 的 homeIgniteResolve）同一逻辑——
     不透明 + 缩放的分步解析出现（steps 保留全息影像的分层点亮质感），不做自上而下的逐行揭示。
     按钮盒即全屏，无方形边界；渲染自页面中央扩散。
     点亮时机由 modules/index/index.js 把关：开屏音效就绪前处于 pre-boot 预隐藏态（display:none），
     此时本动画不启动，解除预隐藏后才从头播放，与音效同一拍 */
  animation: powerResolve 1.3s steps(26, end) 0.1s forwards;
}

/* 正圆投影面：固定尺寸并居中，自发光线框 + 极淡扫描纹理，内部严格裁剪在圆内 */
.power-face {
  position: absolute;
  width: 150px;
  height: 150px;
  left: 50%;
  top: 50%;
  margin-left: -75px;
  margin-top: -75px;
  border-radius: var(--radius-circle);
  overflow: hidden;
  pointer-events: auto;          /* 仅此投影面为可点击热区 */
  cursor: pointer;
  /* 全息投影色统一由主绿令牌派生（alpha 变体用 color-mix，避免散落色值） */
  border: 1px solid color-mix(in srgb, var(--green-primary) 55%, transparent);
  background-color: transparent;
  background-image: repeating-linear-gradient(to bottom,
    color-mix(in srgb, var(--green-primary) 5%, transparent) 0 1px,
    transparent 1px 4px);
  /* 低对比度外溢辉光（发光，非投影） */
  box-shadow: 0 0 14px color-mix(in srgb, var(--green-primary) 18%, transparent);
  transition: border-color var(--duration-hover) var(--ease-out),
              box-shadow var(--duration-hover) var(--ease-out);
}

/* 扫描光条：横向铺满投影面（左右对称），纵向以圆心为基准 ±对称往复；
   由面内 overflow 裁剪在正圆内，随圆弧自然收窄，全程不会偏向任一侧 */
.power-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  height: 2px;
  opacity: 0;
  /* 光效峰值严格落于中线 50%，色标左右镜像（0↔100、14↔86、30↔70、42↔58），
     两端逐级衰减到全透明，保证"中间最亮、两侧对等衰减"，不产生视觉重心偏移 */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--green-primary) 0%, transparent)  0%,
    color-mix(in srgb, var(--green-primary) 8%, transparent)  14%,
    color-mix(in srgb, var(--green-primary) 22%, transparent) 30%,
    color-mix(in srgb, var(--green-primary) 55%, transparent) 42%,
    var(--green-primary)                                      50%,
    color-mix(in srgb, var(--green-primary) 55%, transparent) 58%,
    color-mix(in srgb, var(--green-primary) 22%, transparent) 70%,
    color-mix(in srgb, var(--green-primary) 8%, transparent)  86%,
    color-mix(in srgb, var(--green-primary) 0%, transparent) 100%);
  /* 辉光随 alpha 分布，中间最亮、两侧对称衰减（无偏移量，纯中心扩散） */
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--green-primary) 45%, transparent))
          drop-shadow(0 0 14px color-mix(in srgb, var(--green-primary) 16%, transparent));
}

/* 入场渲染（powerResolve）完全结束后，由 boot.js 添加 .scan-ready 才启动循环扫描，
   保证首次渲染与常规循环扫描之间连续、无断裂 */
.power-btn.scan-ready .power-scan {
  animation: holoScanLoop 3.6s var(--ease-in-out) infinite;
}

/* 外圈能量环：相对投影面外扩一圈，固定尺寸并居中，正圆虚线 + 微辉光，永不形成方形边 */
.power-ring {
  position: absolute;
  width: 178px;
  height: 178px;
  left: 50%;
  top: 50%;
  margin-left: -89px;
  margin-top: -89px;
  border-radius: var(--radius-circle);
  pointer-events: none;
  opacity: 0;
  border: 1px dashed color-mix(in srgb, var(--green-primary) 38%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--green-primary) 12%, transparent);
  animation: holoRingIn 1.2s var(--ease-out) 0.5s forwards,
             holoRingSpin 16s linear 1.8s infinite;
}

/* 摁下动作：投影面光学透亮一瞬 + 外圈能量环扩散 + 图标文字同步消失，整体一起淡出、无拖尾 */
.power-btn.pressing .power-face { animation: holoPressBreathe 0.5s var(--ease-out) forwards; }
.power-btn.pressing .power-scan { opacity: 0; animation: none; }
.power-btn.pressing .power-ring { animation: holoPressWave 0.55s var(--ease-out) forwards; }
.power-btn.pressing .power-icon,
.power-btn.pressing .power-label { animation: powerFadeOut 0.5s var(--ease-out) forwards; }

.power-face:hover {
  border-color: color-mix(in srgb, var(--green-primary) 78%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--green-primary) 26%, transparent);
}

.power-btn:focus-visible { outline: none; }
.power-btn:focus-visible .power-face {
  outline: 1px dashed color-mix(in srgb, var(--focus) 70%, transparent);
  outline-offset: 6px;
}

/* 内容（图标/文字）本身自发辉光，悬于投影面之上 */
.power-icon,
.power-label {
  position: relative;
  z-index: 1;
}

.power-icon {
  display: block;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--green-primary) 45%, transparent));
  animation: powerPulse 2.4s var(--ease-in-out) infinite;
}

.power-label {
  font: var(--text-mono);   /* 13/18 400（风格.字阶.Mono），字距不动用非字阶值 */
  text-shadow: 0 0 8px color-mix(in srgb, var(--green-primary) 35%, transparent);
}

/* 亮色主题：更低对比辉光，底色仍通透 */
[data-theme="light"] .power-face {
  border-color: color-mix(in srgb, var(--green-primary) 40%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--green-primary) 12%, transparent);
}
[data-theme="light"] .power-label {
  text-shadow: 0 0 6px color-mix(in srgb, var(--green-primary) 20%, transparent);
}

/* 开机后：按钮立即消失，让位给开屏动画（不做淡出） */
#boot-screen.on .power-btn {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 入场渲染：不透明 + 缩放的分步解析出现，与主页点火按钮（homeIgniteResolve）同构，
   不做自上而下的逐行裁剪揭示（按钮盒即全屏，zoom 自页面中央扩散） */
@keyframes powerResolve {
  0%   { opacity: 0; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* 循环扫描：以圆心为基准上下对称往复，首尾同帧无缝衔接（无位置跳变） */
@keyframes holoScanLoop {
  0%   { transform: translateY(-70px); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translateY(70px); opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(-70px); opacity: 0; }
}

/* 外环淡入 */
@keyframes holoRingIn {
  to { opacity: 0.6; }
}

/* 外环缓慢旋转（虚线断点即近似边缘粒子噪点） */
@keyframes holoRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 摁下：投影面光学透亮一瞬，随即让位消失 */
@keyframes holoPressBreathe {
  0%   { filter: brightness(1);}
  35%  { filter: brightness(1.6);}
  70%  { filter: brightness(0.85);}
  100% { filter: brightness(0.8); opacity: 0; }
}

/* 能量涟漪：外环从圆心向外扩散 */
@keyframes holoPressWave {
  0%   { transform: scale(0.36); opacity: 0.95; }
  100% { transform: scale(2.4); opacity: 0; }
}

@keyframes powerPulse {
  0%, 100% { transform: scale(1.0); opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* 图标/文字随本体同步淡出消失 */
@keyframes powerFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}