/* landing.css — 公开首页随机动画（5 种纯 CSS 场景，JS 随机注入） */
:root {
  --primary: #2563eb; --fg: #f8fafc; --muted: rgba(248,250,252,.72);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; overflow: hidden;
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0b1020; color: var(--fg);
}
.scene { position: fixed; inset: 0; z-index: 0; }
.hero {
  position: relative; z-index: 1; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
}
.hero h1 { margin: 0; font-size: clamp(26px, 5vw, 44px); letter-spacing: .02em; }
.hero .sub { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- 随机英文诗词 ---------- */
.poem { margin: 0; max-width: 720px; padding: 0 16px;
  animation: poem-in 1.6s ease-out both; }
.poem blockquote { margin: 0; font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-size: clamp(20px, 3.4vw, 30px); line-height: 1.7;
  letter-spacing: .01em; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.poem .line { display: block; }
.poem figcaption { margin-top: 18px; color: var(--muted);
  font-size: clamp(13px, 1.6vw, 15px); letter-spacing: .08em; }
@keyframes poem-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.actions { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.btn { display: inline-block; padding: 10px 22px; border-radius: 8px; font-size: 14px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { filter: brightness(1.12); }
.btn.ghost { background: rgba(255,255,255,.08); color: var(--fg);
  border-color: rgba(255,255,255,.22); }
.btn.ghost:hover { background: rgba(255,255,255,.16); }

/* ---------- 场景 1：starfield 星空闪烁 ---------- */
.s-star { position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; animation: twinkle var(--d, 2.4s) ease-in-out infinite; }
@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* ---------- 场景 2：float 粒子漂浮 ---------- */
.s-orb { position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(96,165,250,.9), rgba(37,99,235,.15));
  animation: drift var(--d, 14s) ease-in-out infinite alternate; filter: blur(.4px); }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(var(--dx, 40px), var(--dy, -60px)) scale(1.15); }
}

/* ---------- 场景 3：waves 波浪层叠 ---------- */
.s-wave { position: absolute; left: -10%; width: 120%; height: 40vh; bottom: -12vh;
  border-radius: 45% 55% 0 0 / 60% 40% 0 0; opacity: .5;
  animation: sway var(--d, 9s) ease-in-out infinite alternate; }
@keyframes sway {
  from { transform: translateX(-4%) rotate(-1.2deg); }
  to { transform: translateX(4%) rotate(1.2deg); }
}

/* ---------- 场景 4：orbit 轨道环 ---------- */
.s-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(148,163,184,.35);
  border-radius: 50%; transform: translate(-50%, -50%); animation: spin var(--d, 18s) linear infinite; }
.s-orbit::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px;
  margin-left: -5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 14px var(--primary); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---------- 场景 5：aurora 极光渐变 ---------- */
.s-aurora { position: absolute; inset: -30%;
  background:
    radial-gradient(40% 55% at 20% 30%, rgba(34,197,94,.35), transparent 60%),
    radial-gradient(45% 60% at 70% 40%, rgba(59,130,246,.40), transparent 65%),
    radial-gradient(50% 55% at 45% 75%, rgba(168,85,247,.35), transparent 60%);
  filter: blur(38px); animation: aurora var(--d, 12s) ease-in-out infinite alternate; }
@keyframes aurora {
  from { transform: translateY(-3%) rotate(-2deg) scale(1.02); }
  to { transform: translateY(3%) rotate(2deg) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .scene * { animation: none !important; }
}