:root {
  --void: #04060d;
  --deep: #070d1c;
  --ink-blue: #0d2250;
  --star: #e9f1ff;
  --halo: #7fb2ff;
  --dim: #8a9bbd;
}

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

html,
body {
  height: 100%;
  background: #04060d;
}

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  color: #e9f1ff;
  overflow: hidden;
}

.sky {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 12%, rgba(20, 48, 104, 0.55) 0%, rgba(4, 6, 13, 0) 60%),
    radial-gradient(90% 70% at 12% 88%, rgba(11, 30, 66, 0.5) 0%, rgba(4, 6, 13, 0) 65%),
    linear-gradient(180deg, #04060d 0%, #060b18 45%, #030509 100%);
}

#sky-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* 地平线上的一层薄雾，把画面压住 */
.horizon {
  position: absolute;
  inset: auto 0 0 0;
  height: 38vh;
  background: linear-gradient(180deg, rgba(3, 5, 10, 0) 0%, rgba(3, 6, 14, 0.72) 55%, #02040a 100%);
  pointer-events: none;
}

.content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 2rem 1.5rem 3rem;
  gap: 1.25rem;
}

.mark {
  position: absolute;
  top: 2rem;
  left: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(138, 155, 189, 0.75);
}

.mark span.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7fb2ff;
  box-shadow: 0 0 10px 2px rgba(127, 178, 255, 0.7);
}

h1 {
  font-size: clamp(3rem, 16vw, 9rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.14em;
  text-wrap: balance;
  color: #f2f6ff;
  text-shadow: 0 0 40px rgba(90, 140, 235, 0.35);
}

h1 .accent {
  color: #8fb8ff;
}

.lede {
  max-width: 34ch;
  font-size: clamp(0.9rem, 2.6vw, 1.05rem);
  line-height: 1.6;
  color: rgba(199, 212, 235, 0.72);
  text-wrap: pretty;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(127, 178, 255, 0.16);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: rgba(138, 155, 189, 0.62);
}

@media (min-width: 768px) {
  .content {
    padding: 3rem 4rem 4rem;
  }
  .mark {
    top: 3rem;
    left: 4rem;
  }
}

/* 入场：一次性、错落的浮现 */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal.d1 { animation-delay: 0.15s; }
.reveal.d2 { animation-delay: 0.45s; }
.reveal.d3 { animation-delay: 0.75s; }
.reveal.d4 { animation-delay: 1s; }

@keyframes rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}