/* ============================================================
   AURA · 能量冥想 App — Style Guide (Based on Figma spec)
   主调：深邃夜空紫 | 辅色：柔和极光 / 柔粉珍珠 / 翡翠绿
   ============================================================ */

:root {
  /* ---- Color Palette (Figma Tokens) ---- */
  --c-night:        #1a1033;   /* 深邃夜空紫 主背景 */
  --c-night-deep:   #0e0820;   /* 更深的夜空，用于渐变底 */
  --c-night-soft:   #2a1a52;   /* 夜空紫 卡片底 */

  --c-aurora-1:     #7af5d6;   /* 柔和极光 · 青 */
  --c-aurora-2:     #8a7bff;   /* 柔和极光 · 紫蓝 */
  --c-aurora-3:     #ff9ed8;   /* 柔和极光 · 粉光 */

  --c-pearl:        #ffd9ec;   /* 柔粉珍珠色 */
  --c-jade:         #2fe6a8;   /* 翡翠绿 */

  /* ---- Aurora gradient (背景光带) ---- */
  --aurora-gradient: linear-gradient(120deg,
      rgba(122,245,214,0.35) 0%,
      rgba(138,123,255,0.35) 45%,
      rgba(255,158,216,0.35) 100%);

  /* ---- Glass / Crystal ---- */
  --glass-bg:       rgba(255,255,255,0.06);
  --glass-border:   rgba(255,255,255,0.14);
  --shadow-drop:    0 24px 60px rgba(0,0,0,0.45);
  --shadow-inner:   inset 0 1px 1px rgba(255,255,255,0.35),
                    inset 0 -12px 24px rgba(0,0,0,0.25);

  /* ---- Text ---- */
  --text-hi:        #f4eeff;
  --text-mid:       rgba(244,238,255,0.72);
  --text-low:       rgba(244,238,255,0.45);

  --radius-lg: 28px;
  --radius-md: 20px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-hi);
  background: var(--c-night-deep);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* 全局背景：夜空紫 + 极光光晕 */
.app-bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(138,123,255,0.30), transparent 60%),
    radial-gradient(100% 70% at 90% 20%, rgba(122,245,214,0.18), transparent 55%),
    radial-gradient(120% 90% at 50% 120%, rgba(255,158,216,0.18), transparent 60%),
    linear-gradient(180deg, var(--c-night) 0%, var(--c-night-deep) 100%);
}
/* 漂浮的极光粒子层 */
.app-bg::after {
  content: ""; position: absolute; inset: -20%;
  background: var(--aurora-gradient);
  filter: blur(80px); opacity: .25;
  animation: drift 18s var(--ease) infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1.05); }
  100% { transform: translate3d(5%, 4%, 0) rotate(8deg) scale(1.15); }
}

/* 手机外框容器 */
.phone {
  position: relative; z-index: 1;
  width: min(420px, 100vw);
  height: min(880px, 100vh);
  margin: 0 auto;
  display: flex; align-items: stretch;
  background: transparent;
}

.stage {
  position: relative; flex: 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* 每一页：绝对定位全屏，做 cross-fade + slide 过渡 */
.page {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 28px;
  opacity: 0; visibility: hidden;
  transform: translateY(24px) scale(.98);
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.page.active {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
}

/* ============ 通用排版 ============ */
.eyebrow {
  font-size: 13px; letter-spacing: .35em;
  color: var(--c-aurora-1); text-transform: uppercase;
  margin-bottom: 14px; opacity: .85;
}
.title {
  font-size: 27px; font-weight: 700; line-height: 1.3;
  text-align: center; margin-bottom: 12px;
}
.subtitle {
  font-size: 15px; color: var(--text-mid);
  text-align: center; line-height: 1.6; max-width: 300px;
}

/* 顶部呼吸圆点（静心提示） */
.breath {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-aurora-1);
  box-shadow: 0 0 0 0 rgba(122,245,214,.55);
  animation: breath 3s ease-in-out infinite;
  margin-bottom: 22px;
}
@keyframes breath {
  0%,100% { transform: scale(.7); box-shadow: 0 0 0 0 rgba(122,245,214,.5); }
  50%     { transform: scale(1.15); box-shadow: 0 0 22px 6px rgba(122,245,214,.18); }
}

/* ============ Holding Button (长按指纹按钮) ============ */
.hold-wrap { position: relative; width: 188px; height: 188px; margin: 40px 0 26px; }

.hold-ring {
  position: absolute; inset: 0;
  transform: rotate(-90deg);
}
.hold-ring circle { fill: none; stroke-linecap: round; }
.hold-ring .track  { stroke: rgba(255,255,255,0.10); stroke-width: 6; }
.hold-ring .prog {
  stroke: url(#holdGrad); stroke-width: 6;
  stroke-dasharray: 565.48; stroke-dashoffset: 565.48;
  transition: stroke-dashoffset .08s linear;
  filter: drop-shadow(0 0 8px rgba(122,245,214,.6));
}

.hold-btn {
  position: absolute; inset: 22px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  background: radial-gradient(circle at 35% 30%,
      rgba(255,255,255,0.18), rgba(255,255,255,0.04) 55%, rgba(0,0,0,0.18));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-drop), var(--shadow-inner);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  touch-action: none;
}
.hold-btn:active, .hold-btn.holding {
  transform: scale(.96);
  box-shadow: 0 0 40px rgba(122,245,214,.35), var(--shadow-inner);
}
.hold-btn .fp {
  font-size: 40px; filter: drop-shadow(0 0 10px rgba(122,245,214,.5));
}
.hold-btn .label { font-size: 13px; color: var(--text-mid); letter-spacing: .1em; }
.hold-btn .pct { font-size: 22px; font-weight: 700; color: var(--text-hi); }

.hint { font-size: 13px; color: var(--text-low); margin-top: 6px; }

/* ============ Page 2 · 能量生成 Glow ============ */
.gen-core {
  position: relative; width: 240px; height: 240px;
  display: flex; align-items: center; justify-content: center;
}
.gen-orb {
  position: absolute; border-radius: 50%;
  background: var(--aurora-gradient);
  filter: blur(2px);
}
.gen-orb.o1 { width: 70px;  height: 70px;  animation: pulse 2.4s ease-in-out infinite; }
.gen-orb.o2 { width: 130px; height: 130px; opacity:.55; animation: pulse 2.4s ease-in-out infinite .3s; }
.gen-orb.o3 { width: 200px; height: 200px; opacity:.30; animation: pulse 2.4s ease-in-out infinite .6s; }
@keyframes pulse {
  0%,100% { transform: scale(.85); opacity:.35; }
  50%     { transform: scale(1.12); opacity:.8; }
}
.gen-ring-text {
  position: relative; z-index: 2; font-size: 14px;
  letter-spacing: .3em; color: var(--text-hi);
  text-shadow: 0 0 12px rgba(122,245,214,.8);
  animation: flick 1.6s ease-in-out infinite;
}
@keyframes flick { 0%,100%{opacity:.6} 50%{opacity:1} }

.particles { position: absolute; inset: 0; pointer-events: none; }
.particle {
  position: absolute; top: 50%; left: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-aurora-1);
  box-shadow: 0 0 10px var(--c-aurora-1);
  opacity: 0;
}

.gen-status { margin-top: 46px; font-size: 15px; color: var(--text-mid); letter-spacing:.08em; }

/* ============ Page 3 · Crystal Card ============ */
.card-stack { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 18px; }

/* Crystal Card — 3D 光泽水晶质感 */
.crystal {
  position: relative;
  border-radius: var(--radius-md);
  padding: 22px 22px 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 40%, rgba(138,123,255,0.10) 100%),
    var(--c-night-soft);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--shadow-drop),
              inset 0 1px 1px rgba(255,255,255,0.5),
              inset 0 -16px 30px rgba(0,0,0,0.3);
  overflow: hidden;
  transform: perspective(900px) rotateX(4deg);
  transition: transform .4s var(--ease);
}
.crystal:hover { transform: perspective(900px) rotateX(0deg) translateY(-2px); }
/* 水晶高光扫光 */
.crystal::before {
  content: ""; position: absolute; top: -60%; left: -30%;
  width: 60%; height: 220%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: rotate(18deg);
  animation: sheen 5s var(--ease) infinite;
}
@keyframes sheen { 0%{left:-40%} 55%,100%{left:130%} }

.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-head .kw { font-size: 22px; font-weight: 800; letter-spacing:.02em; }
.card-head .kw small { display:block; font-size: 12px; font-weight: 500; color: var(--text-low); letter-spacing:.2em; margin-top:4px;}
.badge {
  font-size: 11px; padding: 6px 12px; border-radius: 999px;
  background: rgba(47,230,168,0.16); color: var(--c-jade);
  border: 1px solid rgba(47,230,168,0.4);
}

/* 主体两栏：雷达图 + 文案 */
.card-body { display: flex; gap: 16px; align-items: center; }
.radar-box { flex: 0 0 130px; }
.meter-info { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.crystal-rec { display: flex; align-items: center; gap: 10px; }
.crystal-rec .gem {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px;
  background: linear-gradient(135deg, var(--c-aurora-3), var(--c-aurora-2));
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 6px 14px rgba(138,123,255,.4);
  position: relative;
}
.crystal-rec .gem::after{content:"";position:absolute;top:5px;left:6px;width:10px;height:10px;border-radius:3px;background:rgba(255,255,255,.5);}
.crystal-rec .gem-name { font-size: 14px; font-weight: 700; }
.crystal-rec .gem-sub { font-size: 11px; color: var(--text-low); }

.mantra {
  font-size: 14px; line-height: 1.7; color: var(--text-mid);
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid var(--c-pearl);
}

/* 美感商品微缩图 */
.goods {
  display: flex; gap: 10px; margin-top: 14px;
}
.goods .mini {
  flex: 1; height: 64px; border-radius: 12px;
  background-size: cover; background-position: center;
  border: 1px solid var(--glass-border);
  position: relative; overflow: hidden;
}
.goods .mini span {
  position: absolute; left: 8px; bottom: 6px;
  font-size: 10px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* 雷达图 svg */
.radar polygon.fill { fill: rgba(122,245,214,0.28); stroke: var(--c-aurora-1); stroke-width: 2; }
.radar .axis { stroke: rgba(255,255,255,0.18); stroke-width: 1; }
.radar .dot { fill: #fff; }

/* 底部操作 */
.actions { display: flex; gap: 12px; margin-top: 6px; }
.btn {
  flex: 1; padding: 14px; border-radius: 16px; border: none;
  font-size: 15px; font-weight: 600; cursor: pointer;
  color: var(--text-hi);
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border);
  transition: transform .2s var(--ease), background .2s;
}
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(120deg, var(--c-aurora-2), var(--c-aurora-1));
  color: #16263a; border: none;
  box-shadow: 0 10px 24px rgba(138,123,255,.4);
}

/* 进度条提示(能量生成) */
.gen-bar { width: 220px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); margin-top: 18px; overflow: hidden;}
.gen-bar i { display:block; height:100%; width:0; background: linear-gradient(90deg,var(--c-aurora-1),var(--c-aurora-2)); border-radius:4px; }