/* ==========================================================================
   区块层（一）：首屏 / 四个时刻 / 聊愈
   ========================================================================== */

/* ---------- ① 首屏 ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 48px) 0 96px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 40px;
  align-items: center;
}

.hero-copy .display { margin-bottom: 30px; }
.hero .lead { max-width: 29em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }

.hero-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-3);
}
.hero-note::before { content: ""; width: 32px; height: 1px; background: var(--line-2); }

.hero-stage { position: relative; min-height: 640px; }

/* 首屏主体（WebGL，见 orb.js） */
.orb-wrap {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(600px, 118%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.orb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}
.orb-wrap.has-webgl .orb-canvas { opacity: 1; }
.orb-wrap.has-webgl .orb-fallback { opacity: 0; }

/* 不支持 WebGL 时的兜底：一个会呼吸的点阵圆，尺寸与星尘球一致（动画只动 transform/filter，不能动 opacity，否则盖过隐藏规则） */
.orb-fallback {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(214, 206, 255, 0.6) 0 1.2px, transparent 1.8px) 0 0 / 10px 10px,
    radial-gradient(circle, rgba(139, 124, 255, 0.28), rgba(139, 124, 255, 0.06) 60%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, #000 50%, transparent 71%);
  mask-image: radial-gradient(circle, #000 50%, transparent 71%);
  animation: orbBreathe 10s ease-in-out infinite;
  transition: opacity 1.2s var(--ease-out);
}
@keyframes orbBreathe {
  0%, 100% { transform: scale(0.97); filter: brightness(0.9); }
  50% { transform: scale(1.02); filter: brightness(1.1); }
}

/* 演示对话卡片 */
.demo-card {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(380px, 100%);
  padding: 16px 18px 18px;
  border-radius: 24px;
}
.demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-3);
}
.demo-status { display: inline-flex; align-items: center; gap: 9px; }
.demo-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.demo-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 168px;
  padding: 16px 0 10px;
}
.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.75;
  animation: msgIn 0.6s var(--ease-out) both;
}
.msg-user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  border-bottom-right-radius: 6px;
}
.msg-ai {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(139, 124, 255, 0.2), rgba(255, 143, 177, 0.08));
  border: 1px solid rgba(179, 168, 255, 0.22);
  border-bottom-left-radius: 6px;
}
.caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--violet-2);
  animation: caret 0.9s steps(2) infinite;
}
.listening { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 4px; }
.listening i {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--violet-2);
  animation: listen 1s ease-in-out infinite;
}
.listening i:nth-child(2) { animation-delay: -0.8s; }
.listening i:nth-child(3) { animation-delay: -0.6s; }
.listening i:nth-child(4) { animation-delay: -0.4s; }
.listening i:nth-child(5) { animation-delay: -0.2s; }

.demo-emotion { display: flex; flex-wrap: wrap; gap: 8px; min-height: 26px; margin-bottom: 14px; }
.emo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  animation: msgIn 0.5s var(--ease-out) both;
}
.emo i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.demo-prompts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 22px;
  height: 36px;
  margin-left: -11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--text-2);
  animation: cue 2.2s ease-in-out infinite;
}

@keyframes msgIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes listen { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* ---------- ② 四个时刻 ---------- */
.moment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.moment {
  padding: 26px 24px 30px;
  border-radius: 24px;
  overflow: hidden;
  transition: border-color 0.5s var(--ease-out), background 0.5s var(--ease-out);
}
.moment:hover { border-color: rgba(179, 168, 255, 0.26); }

.wave { width: 100%; height: 56px; margin-bottom: 28px; overflow: visible; }
.wave path {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: opacity 0.9s var(--ease-out);
}
.wave-raw { stroke: var(--violet-2); stroke-dasharray: 5 5; animation: flow 1.6s linear infinite; }
.wave-calm { stroke: var(--green); opacity: 0; filter: drop-shadow(0 0 4px rgba(85, 214, 158, 0.7)); }
.moment:hover .wave-raw,
.moment.is-calm .wave-raw { opacity: 0; }
.moment:hover .wave-calm,
.moment.is-calm .wave-calm { opacity: 1; }
@keyframes flow { to { stroke-dashoffset: -20; } }

.moment-label { display: block; margin-bottom: 12px; font-size: 11px; letter-spacing: 0.14em; color: var(--text-3); }
.moment h3 { margin-bottom: 10px; font-size: 19px; font-weight: 500; letter-spacing: 0.02em; }
.moment p { font-size: 14.5px; line-height: 1.85; color: var(--text-2); }

/* ---------- ③ 聊愈 ---------- */
.bento { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.panel { display: flex; flex-direction: column; overflow: hidden; }
.panel-voice { grid-column: 1 / -1; flex-direction: row; align-items: stretch; height: 500px; }

.panel-visual {
  position: relative;
  height: 290px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(60% 80% at 50% 45%, rgba(139, 124, 255, 0.12), transparent 70%);
}
.panel-visual svg { width: 100%; height: 100%; }
.panel-body { padding: 28px 30px 34px; }
.panel h3 { margin-bottom: 12px; font-size: 22px; font-weight: 500; letter-spacing: 0.02em; }
.panel p { font-size: 15px; line-height: 1.9; color: var(--text-2); }

.panel-voice .panel-body { flex: 1; align-self: center; max-width: 560px; padding: 48px 56px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 24px; }
.tag-row li {
  padding: 5px 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-2);
}
.verified { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--green) !important; }
.verified svg { width: 18px; height: 18px; }

.phone {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46%;
  overflow: hidden;
}
.phone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139, 124, 255, 0.34), transparent 65%);
}

/* 手机示意：Night Sky 钛金属边框 → 黑色屏幕边 → 屏幕 + 顶部居中挖孔摄像头 */
.device {
  --device-w: 240px;
  position: relative;
  width: var(--device-w);
  padding: 3px;
  border-radius: 40px;
  background: linear-gradient(140deg, #8d9bc0 0%, #3a4568 14%, #1a2036 46%, #232b47 70%, #6f7ea6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 1px 0 1px rgba(0, 0, 0, 0.5),
    0 50px 70px -30px rgba(0, 0, 0, 0.85),
    0 20px 60px -20px rgba(91, 76, 200, 0.35);
}
/* 左侧音量键、右侧电源键 */
.device::before,
.device::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #7d8bb2, #2c3554 60%, #56638c);
}
.device::before { left: -3px; top: 96px; height: 52px; }
.device::after { right: -3px; top: 118px; height: 72px; }
.device-bezel { padding: 6px; border-radius: 37px; background: #03040a; }
.device-screen {
  position: relative;
  aspect-ratio: 600 / 1147;
  overflow: hidden;
  border-radius: 31px;
  background: #0e2436;
}
.device-screen img { width: 100%; height: 100%; object-fit: cover; }
.device-screen::after {
  /* 玻璃反光 */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.07) 0%, transparent 28%);
  pointer-events: none;
}
.device-camera {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #3b4466 0 18%, #0a0c16 42%, #000 70%);
  box-shadow: 0 0 0 1.5px #000;
}

/* 知识图谱（sections.js 生成） */
.g-edge { stroke: rgba(179, 168, 255, 0.2); stroke-width: 1; fill: none; }
.g-ring { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-dasharray: 2 6; }
.g-pulse { fill: var(--violet-2); filter: drop-shadow(0 0 4px var(--violet)); }
.g-node rect { fill: rgba(12, 11, 34, 0.92); stroke: rgba(179, 168, 255, 0.35); }
.g-node text { fill: var(--text-2); font-size: 13px; font-family: var(--font-sans); }
.g-core circle.core-glow { fill: url(#coreGlow); }
.g-core circle.core { fill: rgba(12, 11, 34, 0.95); stroke: rgba(179, 168, 255, 0.6); }
.g-core text { fill: var(--text); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.08em; }
.g-core text.sub { fill: var(--text-3); font-size: 10px; font-family: var(--font-sans); letter-spacing: 0.04em; }

/* 疗愈聊天室（sections.js 生成）：语音连麦 / 公屏互动 / 集体冥想 / 情绪分享 四个场景轮播 */
.r-table { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-dasharray: 2 6; }
.r-link {
  stroke: rgba(179, 168, 255, 0.5);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out), stroke 0.6s;
  animation: flow 1.2s linear infinite;
}
.r-link.is-on { opacity: 1; stroke: rgba(85, 214, 158, 0.8); }
[data-mode="meditate"] .r-link { opacity: 0.45; }
.r-stage-glow { fill: url(#roomGlow); transform-box: fill-box; transform-origin: center; }
[data-mode="meditate"] .r-stage-glow { animation: r-glow 8s ease-in-out infinite; }
.r-stage { fill: rgba(12, 11, 34, 0.95); stroke: rgba(179, 168, 255, 0.45); }

.r-glyph { opacity: 0; transition: opacity 0.5s var(--ease-out); }
[data-mode="voice"] [data-glyph="voice"],
[data-mode="chat"] [data-glyph="chat"],
[data-mode="meditate"] [data-glyph="meditate"],
[data-mode="share"] [data-glyph="share"] { opacity: 1; }
.r-bar { fill: var(--green); transform-box: fill-box; transform-origin: center; animation: listen 1s ease-in-out infinite; }
.r-icon { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-linejoin: round; }
.r-dot { fill: var(--text); animation: r-blink 1.4s ease-in-out infinite; }
.r-breath {
  fill: rgba(179, 168, 255, 0.12);
  stroke: rgba(214, 206, 255, 0.75);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.5);
}
[data-mode="meditate"] .r-breath { animation: r-breath 8s ease-in-out infinite; }
.r-breath-core { fill: var(--text); }
.r-cue { fill: var(--text-2); font-size: 12px; letter-spacing: 0.3em; font-family: var(--font-sans); opacity: 0; }
[data-mode="meditate"] .r-cue-in { animation: r-cue-in 8s linear infinite; }
[data-mode="meditate"] .r-cue-out { animation: r-cue-out 8s linear infinite; }
.r-heart { fill: #ff8fb1; filter: drop-shadow(0 0 6px rgba(255, 143, 177, 0.7)); transform-box: fill-box; transform-origin: center; }
[data-mode="share"] .r-heart { animation: r-beat 1.6s ease-in-out infinite; }

.r-badge circle { fill: rgba(12, 11, 34, 0.95); stroke: rgba(85, 214, 158, 0.55); }
.r-badge rect,
.r-badge path { fill: none; stroke: var(--green); stroke-width: 1.1; stroke-linecap: round; }

.r-avatar { animation: r-float 6s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.r-seat { fill: rgba(12, 11, 34, 0.92); stroke: rgba(255, 255, 255, 0.14); }
.r-ring { fill: none; stroke: var(--green); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-speaking .r-ring { animation: r-speak 1.2s var(--ease-out) infinite; }
[data-mode="meditate"] .r-ring { stroke: var(--violet-2); animation: r-breathe-ring 8s ease-in-out infinite; }
.r-avatar.is-received .r-ring { stroke: var(--rc); animation: r-receive 1s var(--ease-out) both; }
.r-mic { opacity: 0; transition: opacity 0.4s var(--ease-out); }
.r-mic circle { fill: var(--green); }
.r-mic path { fill: none; stroke: #07071a; stroke-width: 1.4; stroke-linecap: round; }
.is-speaking .r-mic { opacity: 1; }

.r-bubble rect { fill: rgba(26, 23, 64, 0.96); stroke: rgba(179, 168, 255, 0.4); }
.r-bubble text { fill: var(--text); font-size: 12px; font-family: var(--font-sans); }
.r-bubble-rise { animation: r-bubble 3.6s var(--ease-out) both; }
.r-token-glow { fill: var(--c); opacity: 0.25; }
.r-token path { fill: var(--c); }

@keyframes r-float { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@keyframes r-speak { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
@keyframes r-receive { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes r-breathe-ring { 0%, 100% { opacity: 0.2; transform: scale(0.95); } 50% { opacity: 0.85; transform: scale(1.35); } }
@keyframes r-breath { 0%, 100% { transform: scale(0.5); } 50% { transform: scale(1); } }
@keyframes r-glow { 0%, 100% { transform: scale(0.85); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes r-cue-in { 0% { opacity: 0; } 8%, 42% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes r-cue-out { 0%, 50% { opacity: 0; } 58%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes r-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes r-beat { 0%, 45%, 100% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(1.04); } }
@keyframes r-bubble {
  0% { opacity: 0; transform: translateY(8px) scale(0.92); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  78% { opacity: 1; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* 场景切换按钮（底部进度条 = 距离下一个场景的时间） */
.rooms-modes {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: flex;
  gap: 2px;
  padding: 4px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(5, 5, 15, 0.55);
}
.rooms-modes button {
  position: relative;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
  transition: color 0.3s, background 0.3s;
}
.rooms-modes button:hover { color: var(--text-2); }
.rooms-modes button[aria-pressed="true"] { color: var(--text); background: rgba(139, 124, 255, 0.2); }
.rooms-modes button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 1px;
  background: var(--violet-2);
  transform-origin: left;
  animation: r-progress var(--dur, 5s) linear both;
}
@keyframes r-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  [data-mode="meditate"] .r-cue-in { opacity: 1; }
  [data-mode="meditate"] .r-breath { transform: scale(0.8); }
}