/* ============================================================
 * Longlight - 长光雨滴小站 | 页面样式：home / 入场点火层（静态构成）
 * pages/home/ignite.css
 * 区块：点火层容器与退场、圆形扩散辉光、投影面点火按钮、中心十字星、外圈虚线环、提示文案
 *       点火交互（按压 / 点燃产物）见 pages/home/ignite-burst.css
 * 说明：不在本文件重复定义 :root / [data-theme]，颜色一律引用 tokens.css 令牌
 * ============================================================ */

/* ========== 入场点火层（home 专属 loading） ==========
   入场动画不是对页面元素做动画，而是「显示主页主要元素之前的一段点火仪式」：
   点火层不透明地盖住主页，仪式结束后整层淡出，主页（品牌区 / 年轮光轨 / 页脚）
   一次性整体呈现，不做逐元素揭示。
   默认 display:none，仅在带 is-intro 时出现 —— home/index.js 未执行时页面直接呈现终态；
   经 loading 过渡进入时由 home/index.js 依据 ?intro=0 移除该类，入场交由 loading 承担
   （见 ~README/项目架构.js → 页面层级.index.核心逻辑）
   节奏：点击点火 → 按压涟漪 520 → 核心点燃 + 冲击波 1200 → 整层淡出 440 → 主页呈现
   分阶段层次（同一节奏内叠加，不改总时长）：
   预判定：点火音效未就绪前不渲染按钮组，只留深色底与背景辉光；音效就绪后按钮才入场渲染
   待机：投影面内缘辉光蓄能呼吸、十字星信号紊乱、虚线环自转、文案明灭浮动
   按压：投影面透亮收拢、十字星旋入核心、虚线环外扩 + 内圈环内收、文案上浮淡出
   点燃：核心过曝回弹、辉光撑开、三圈冲击波错峰出膛（末圈虚线旋进）、泛光骤闪、网格亮一记
   退场：按钮组先退、文案转「正在点燃…」再退，整层淡出并轻微外扩，主页整体呈现 */
.home-boot {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8;
  place-items: center;
  background: var(--bg-secondary);
  transform-origin: center;
  transition: opacity 420ms var(--ease-out), visibility 420ms, transform 420ms var(--ease-out);
}

.home.is-intro .home-boot {
  display: grid;
}

/* 进站预判定态：点火音效未就绪前不渲染点火按钮组（按钮 / 外圈虚线环 / 提示文案），
   只留深色底与背景辉光。home/index.js 在点火音效可完整播放后移除该类点亮按钮——
   按钮在 display:none 期间入场渲染动画（homeIgniteResolve）不会启动，解除后从头播放，与音效同一拍。
   与 index 开屏的 #boot-screen.pre-boot（pages/index/boot.css）同构；
   经 loading 过渡进入或历史回退时整层移除，不会出现该界面 */
.home-boot.pre-boot .home-ignite {
  display: none;
}

/* 退场不是单纯透明度归零：整层同时轻微外扩，像光晕撑开一瞬后散去 */
.home-boot.is-out {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  pointer-events: none;
}

/* 圆形扩散辉光：居中一团无边界的光气，待机时即火焰般忽明忽暗，点燃时被撑开一记 */
.home-boot-longlight {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(84vmin, 620px);
  height: min(84vmin, 620px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
      color-mix(in srgb, var(--green-500) 16%, transparent) 0%,
      transparent 70%);
  filter: blur(20px);
  opacity: 0.6;
  pointer-events: none;
  /* 待机（未点火）即呈火焰般的忽明忽暗：光团是这一屏里最大的一团光气，
     让它持续微明微暗，点火按钮才像悬在一团活的火光上；
     节奏刻意放缓（一轮 5.6s），是「火光在呼吸」而不是「灯在闪」 */
  animation: homeLonglightIdle 5.6s var(--ease-in-out) infinite;
}

/* 待机明灭：节奏刻意不匀（明暗长短交替 + 偶发骤降），避免匀速呼吸的机械感；
   只动 opacity 与 scale，起伏连续无跳变，缩放在 0.96~1.04 间小幅游走；
   整体比点燃后更暗（0.38~0.64，基准 0.6），首尾帧与 homeLonglightSurge 的起点一致，
   点燃那一拍两段动画交接处不闪 */
@keyframes homeLonglightIdle {
  0%   { opacity: 0.6;  transform: translate(-50%, -50%) scale(1); }
  14%  { opacity: 0.44; transform: translate(-50%, -50%) scale(0.98); }
  26%  { opacity: 0.62; transform: translate(-50%, -50%) scale(1.03); }
  38%  { opacity: 0.38; transform: translate(-50%, -50%) scale(0.96); }
  52%  { opacity: 0.57; transform: translate(-50%, -50%) scale(1.02); }
  64%  { opacity: 0.48; transform: translate(-50%, -50%) scale(0.99); }
  76%  { opacity: 0.64; transform: translate(-50%, -50%) scale(1.04); }
  88%  { opacity: 0.45; transform: translate(-50%, -50%) scale(0.97); }
  100% { opacity: 0.6;  transform: translate(-50%, -50%) scale(1); }
}

/* 点燃瞬间辉光被“撑开”一记（骤亮 + 外扩），随后回落到更亮的定态；
   覆盖掉待机态的明灭动画（animation 简写整体替换），从「活着的火光」转为「已点燃的稳定光」 */
.home-boot.is-lit .home-boot-longlight {
  animation: homeLonglightSurge 1200ms var(--ease-out) forwards;
}

@keyframes homeLonglightSurge {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  16%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.04); }
}

/* 点火按钮层：按钮组退场后由核心与冲击波接管，提示文案留在原地承接「正在点燃…」。
   文案不占居中高度（见下方 .home-ignite-hint），故本层在点火层中的居中单位只剩按钮本身，
   按钮中心与同在点火层中心的最大辉光（及核心 / 冲击波）同心，辉光不会显得偏向按钮下方 */
.home-ignite {
  position: relative;
  z-index: 2;
}

/* 退场单位是按钮组（投影面 + 虚线环），不是整层：文案层继续留在原位，
   故用 visibility 而非 display，位形不塌陷、文案不会跳动 */
.home-ignite.is-gone .home-ignite-pad {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 按钮与虚线环的定位基准：环在按钮之外，按压时才能独立向外扩散（不被按钮裁剪） */
.home-ignite-pad {
  position: relative;
  width: 150px;
  height: 150px;
  transition: opacity 300ms var(--ease-out), visibility 300ms;
}

.home-ignite-face {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--green-900) 34%, transparent);
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--green-500) 6%, transparent);
  color: var(--green-900);
  cursor: pointer;
  /* 空气投影：仅自发光描边与内缘辉光，无实体厚度、无投影 */
  box-shadow: inset 0 0 34px color-mix(in srgb, var(--green-500) 20%, transparent),
              0 0 26px color-mix(in srgb, var(--green-500) 12%, transparent);
  /* 入场渲染与 index 的 power-btn（pages/index/power.css 的 powerResolve）同一逻辑：
     不透明 + 缩放的分步解析出现（steps 压住全息屏的“颗粒感”），不做自上而下的逐行揭示；
     该动画在点火音效就绪、.home-boot.pre-boot 被移除后才启动。
     解析结束后转入待机蓄能（内缘辉光缓慢呼吸，单改 box-shadow，不干扰解析的 transform/opacity） */
  animation: homeIgniteResolve 1.3s steps(26, end) both,
             homeFaceIdle 5.4s var(--ease-in-out) 1.3s infinite;
  /* 指针悬停过渡：描边加亮与边缘泛光一起渐变（与 CUI 开机键 .power-face:hover 同一手感）；
     box-shadow 已被 homeFaceIdle 占用（动画优先于过渡），边缘泛光改由 filter 承担 */
  transition: border-color var(--duration-hover) var(--ease-out),
              filter var(--duration-hover) var(--ease-out);
}

.home-ignite-face:hover {
  border-color: var(--green-900);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--green-500) 34%, transparent));
}

@keyframes homeIgniteResolve {
  0%   { opacity: 0; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* 待机蓄能：内缘辉光由弱到强再回落，像投影面在缓慢积能，等待被点燃 */
@keyframes homeFaceIdle {
  0%, 100% {
    box-shadow: inset 0 0 30px color-mix(in srgb, var(--green-500) 16%, transparent),
                0 0 22px color-mix(in srgb, var(--green-500) 10%, transparent);
  }
  50% {
    box-shadow: inset 0 0 46px color-mix(in srgb, var(--green-500) 30%, transparent),
                0 0 34px color-mix(in srgb, var(--green-500) 18%, transparent);
  }
}

/* 中心十字星：全息影像的信号紊乱 —— 大部分时间静置，少数极短区间局部抽动
   （错位 / 拉伸 / 明度断裂），不做扫描线那种持续运动 */
.home-ignite-star {
  position: relative;
  z-index: 2;
  display: block;
  overflow: visible;
  animation: homeStarGlitch 7.2s steps(1, end) infinite;
}

@keyframes homeStarGlitch {
  /* 静置：信号稳定 */
  0%, 18%, 20%, 55%, 57.5%, 78%, 81%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
  /* 紊乱一：横向错位，亮度骤降 */
  18.5% { transform: translate(-2px, 1px) scaleX(1.14); opacity: 0.45; filter: blur(0.6px); }
  19%   { transform: translate(2px, -1px) scaleY(1.1);   opacity: 0.95; filter: blur(0); }
  19.5% { transform: translate(-1px, 0) scale(1.06);     opacity: 0.6;  filter: blur(0.3px); }
  /* 紊乱二：纵向拉伸后回正 */
  55.5% { transform: translate(-3px, 0) scaleX(1.2);     opacity: 0.55; filter: blur(0.5px); }
  56%   { transform: translate(1px, -2px) scale(1.08);   opacity: 0.9;  filter: blur(0); }
  56.5% { transform: translate(0, 1px) scaleY(1.12);     opacity: 0.7;  filter: blur(0.4px); }
  57%   { transform: translate(1px, 0) scale(1);         opacity: 1;    filter: blur(0); }
  /* 紊乱三：短促连抽 */
  78.5% { transform: translate(2px, 1px) scaleX(0.92);   opacity: 0.5;  filter: blur(0.6px); }
  79%   { transform: translate(-2px, -1px) scaleY(0.94); opacity: 1;    filter: blur(0); }
  79.5% { transform: translate(1px, 0) scale(1.1);       opacity: 0.65; filter: blur(0.3px); }
  80%   { transform: translate(-1px, 1px) scale(1);      opacity: 0.85; filter: blur(0); }
}

/* 外圈虚线环：待机（未点火）状态下的常驻元素，入场描出后一直自转——
   与主页年轮内圈虚线共用同一旋转关键帧、同一 26s 周期、同一方向，
   待机屏与主页因此是同一套「虚线在转」的语言；
   自转起点与入场动画结束对齐（160ms + 900ms），交接处两段动画的 transform 均为恒等，不跳变 */
.home-ignite-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 178px;
  height: 178px;
  margin: -89px 0 0 -89px;
  border: 1px dashed color-mix(in srgb, var(--green-700) 55%, transparent);
  border-radius: var(--radius-circle);
  pointer-events: none;
  opacity: 0;
  animation: homeIgniteRingIn 900ms var(--ease-out) 160ms both,
             homeRingSpin 26s linear 1060ms infinite;
}

/* 内圈吸入环：与虚线环同心的第二道虚线，按压时由外向内收拢（能量被吸进核心），
   与外扩的虚线环构成一吸一散的往复，按压因此有“力道”而非单纯淡出 */
.home-ignite-ring::after {
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px dashed color-mix(in srgb, var(--green-500) 45%, transparent);
  border-radius: var(--radius-circle);
  opacity: 0;
}

@keyframes homeIgniteRingIn {
  from { opacity: 0; transform: scale(0.78); }
  to   { opacity: 1; transform: scale(1); }
}

/* 提示文案：常驻缓慢呼吸 + 极轻浮动，像全息影像在待机中明灭；
   按压时上浮淡出，点燃后换「正在点燃…」再浮现一次，仪式结束随整层淡出。
   绝对定位挂在按钮正下方（左右对齐按钮 + 文本居中 + 与原先同宽的间距），
   既不占居中高度，也不与自身 transform 动画抢属性 */
.home-ignite-hint {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-card);
  text-align: center;
  font: var(--text-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-secondary);
  animation: homeHintBreath 3.4s var(--ease-in-out) infinite;
}

@keyframes homeHintBreath {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 8px color-mix(in srgb, var(--green-500) 30%, transparent);
  }
  50% {
    opacity: 0.55;
    transform: translateY(-2px);
    text-shadow: 0 0 14px color-mix(in srgb, var(--green-500) 55%, transparent);
  }
}