/* ============================================================
 * Longlight - 长光雨滴小站 | 页面样式：home / 点火交互与产物
 * pages/home/ignite-burst.css
 * 区块：按压反馈、点燃触发（is-lit）、点火产物（核心光点 / 撑开辉光 / 冲击波 / 泛光）与关键帧
 *       点火层的静态构成见 pages/home/ignite.css
 * 说明：不在本文件重复定义 :root / [data-theme]，颜色一律引用 tokens.css 令牌
 * ============================================================ */

/* 按压反馈：投影面透亮一瞬后收拢淡出，虚线环外扩、内圈内收，十字星被吸进核心 */
.home-ignite-face.is-pressing {
  animation: homePressFace 520ms var(--ease-out) forwards;
  pointer-events: none;
}

@keyframes homePressFace {
  0%   { transform: scale(1);     opacity: 1; filter: brightness(1); }
  40%  { transform: scale(0.965); opacity: 1; filter: brightness(1.45); }
  70%  { transform: scale(1.015); opacity: 0.9; filter: brightness(1.2); }
  100% { transform: scale(0.9);   opacity: 0; filter: brightness(1.6); }
}

.home-ignite.is-pressing .home-ignite-face {
  border-color: color-mix(in srgb, var(--green-900) 70%, transparent);
}

.home-ignite.is-pressing .home-ignite-star {
  animation: homeStarIntake 520ms var(--ease-in) forwards;
}

/* 吸入：横向的紊乱抽动到此收束，十字星旋转着缩小、增亮，最后没入核心 */
@keyframes homeStarIntake {
  0%   { transform: rotate(0deg) scale(1);      opacity: 1;    filter: blur(0); }
  35%  { transform: rotate(-14deg) scale(0.86); opacity: 0.9;  filter: blur(0.4px); }
  100% { transform: rotate(-52deg) scale(0.42); opacity: 0;    filter: blur(1.2px); }
}

.home-ignite.is-pressing .home-ignite-ring {
  animation: homePressWave 520ms var(--ease-out) forwards;
}

@keyframes homePressWave {
  0%   { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.62); }
}

.home-ignite.is-pressing .home-ignite-ring::after {
  animation: homePressIntake 520ms var(--ease-out) forwards;
}

@keyframes homePressIntake {
  0%   { opacity: 0;    transform: scale(1.5); }
  30%  { opacity: 0.7;  transform: scale(1.24); }
  100% { opacity: 0;    transform: scale(0.55); }
}

.home-ignite.is-pressing .home-ignite-hint {
  animation: homeHintPress 300ms var(--ease-out) forwards;
}

@keyframes homeHintPress {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* 点燃中：文案换为「正在点燃…」并重新浮现（承接按钮组退场后的空位），
   浮现结束接回常驻呼吸，交接处状态一致（opacity 1 / translateY 0），无跳变 */
.home-ignite.is-gone .home-ignite-hint {
  animation: homeHintIgnite 520ms var(--ease-out) 200ms both,
             homeHintBreath 3.4s var(--ease-in-out) 720ms infinite;
}

@keyframes homeHintIgnite {
  0%   { opacity: 0; transform: translateY(8px); text-shadow: 0 0 0 transparent; }
  55%  { opacity: 1; transform: translateY(0);   text-shadow: 0 0 16px color-mix(in srgb, var(--green-500) 60%, transparent); }
  100% { opacity: 1; transform: translateY(0);   text-shadow: 0 0 8px color-mix(in srgb, var(--green-500) 30%, transparent); }
}

/* 点火产物：核心光点 + 撑开的辉光 + 两圈冲击波 + 泛光（年轮光轨留给主页，避免重复） */
.home-boot-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: var(--radius-circle);
  background: var(--green-900);
  box-shadow: 0 0 18px color-mix(in srgb, var(--green-500) 80%, transparent);
  opacity: 0;
  pointer-events: none;
}

.home-boot-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle,
      color-mix(in srgb, var(--green-500) 26%, transparent) 0%,
      transparent 66%);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
}

.home-boot-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border: 1px solid color-mix(in srgb, var(--green-900) 45%, transparent);
  border-radius: var(--radius-circle);
  opacity: 0;
  pointer-events: none;
}

/* 第三圈：虚线圈，扩散时缓慢旋进——虚线断点即边缘粒子噪点，让冲击波带一层“碎光” */
.home-boot-wave.wave-3 {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--green-500) 40%, transparent);
}

.home-boot-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle,
      color-mix(in srgb, var(--green-500) 24%, transparent) 0%,
      transparent 62%);
  opacity: 0;
  pointer-events: none;
}

.home-boot.is-lit .home-boot-core {
  animation: homeCoreIgnite 1200ms var(--ease-out) forwards;
}

/* 辉光撑开后转入常态呼吸（复用中央光球的呼吸关键帧） */
.home-boot.is-lit .home-boot-halo {
  animation: homeHaloBloom 1400ms var(--ease-out) forwards,
             homeOrbHalo 3.2s var(--ease-in-out) 1400ms infinite;
}

/* 冲击波：三圈错峰出膛，前两圈实线一快一缓，第三圈虚线旋进收尾；
   缓动为「先疾后缓」，扩张末端拖出淡淡余痕，比匀速扩散更有爆开的力道。
   错峰的延迟不随点燃段拉长而变，各圈与总时长的先后关系因此保持不变 */
.home-boot.is-lit .wave-1 {
  animation: homeWaveOut 1200ms cubic-bezier(.16, .9, .2, 1) forwards;
}

.home-boot.is-lit .wave-2 {
  animation: homeWaveOut 1280ms cubic-bezier(.16, .9, .2, 1) 150ms forwards;
}

.home-boot.is-lit .wave-3 {
  animation: homeWaveDrift 1400ms cubic-bezier(.16, .9, .2, 1) 260ms forwards;
}

/* 点燃瞬间全息网格随冲击波亮一记并微胀，把“爆开”传递到整个场 */
.home-boot.is-lit .home-grid {
  animation: homeGridPulse 1200ms var(--ease-out) forwards;
}

.home-boot.is-lit .home-boot-flash {
  animation: homeFlashOut 1060ms var(--ease-out) forwards;
}

@keyframes homeCoreIgnite {
  0%   { opacity: 0; transform: scale(0.2); }
  /* 点燃首帧过曝：核心先胀到肉眼“发白”，再回落到常态大小 */
  22%  { opacity: 1; transform: scale(1.95); }
  45%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

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

@keyframes homeWaveOut {
  0%   { opacity: 0.85; transform: scale(0.3); }
  70%  { opacity: 0.22; }
  100% { opacity: 0;    transform: scale(3.6); }
}

/* 虚线碎片环：扩得更远，同时旋进 140°，像边缘噪点被冲击甩开 */
@keyframes homeWaveDrift {
  0%   { opacity: 0.5; transform: scale(0.22) rotate(0deg); }
  70%  { opacity: 0.14; }
  100% { opacity: 0;   transform: scale(4.4) rotate(140deg); }
}

@keyframes homeGridPulse {
  0%   { opacity: var(--grid-opacity, 0.15); transform: scale(1); }
  16%  { opacity: 0.42; transform: scale(1.018); }
  100% { opacity: var(--grid-opacity, 0.15); transform: scale(1); }
}

@keyframes homeFlashOut {
  0%   { opacity: 0; }
  /* 峰值提前到 14%：泛光更像“闪”而非“渐亮”，回落更利落 */
  14%  { opacity: 0.92; }
  100% { opacity: 0; }
}