:root {
  --ink: #1a1f2a;
  --ink-soft: #3d4558;
  --sky-top: #5b7a9a;
  --sky-mid: #a8b8c8;
  --sky-horizon: #f0c9a0;
  --sky-bottom: #f7e6d0;
  --sun-core: #ffe8b8;
  --sun-halo: rgba(255, 210, 150, 0.45);
  --ridge-far: rgba(110, 130, 150, 0.35);
  --ridge-mid: rgba(70, 95, 115, 0.48);
  --ridge-near: rgba(40, 60, 78, 0.62);
  --ridge-ground: rgba(28, 42, 56, 0.78);
  --font-display: "Noto Serif SC", "Songti SC", "SimSun", serif;
}

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

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-display);
  color: var(--ink);
  background: var(--sky-bottom);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 42%, rgba(255, 220, 170, 0.55), transparent 68%),
    linear-gradient(
      180deg,
      var(--sky-top) 0%,
      var(--sky-mid) 38%,
      var(--sky-horizon) 62%,
      var(--sky-bottom) 100%
    );
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 40% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(180deg, transparent 55%, rgba(40, 55, 70, 0.12) 100%);
  pointer-events: none;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.sun {
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(22vw, 180px);
  height: min(22vw, 180px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--sun-core) 0%, #ffd89a 35%, rgba(255, 200, 140, 0.35) 58%, transparent 72%);
  box-shadow: 0 0 80px 30px var(--sun-halo);
  animation: sun-breathe 10s ease-in-out infinite alternate;
  pointer-events: none;
}

.haze {
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  height: 45%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 236, 210, 0.35) 40%,
    rgba(247, 230, 208, 0.5) 70%,
    transparent 100%
  );
  pointer-events: none;
}

.mist {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 38%;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
  animation: drift 52s ease-in-out infinite alternate;
}

.mist-a {
  top: 34%;
  background: radial-gradient(ellipse at center, rgba(255, 250, 240, 0.65), transparent 70%);
  opacity: 0.75;
}

.mist-b {
  top: 48%;
  height: 32%;
  background: radial-gradient(ellipse at center, rgba(200, 215, 230, 0.55), transparent 72%);
  opacity: 0.6;
  animation-duration: 68s;
  animation-direction: alternate-reverse;
}

.mist-c {
  top: 58%;
  height: 28%;
  background: radial-gradient(ellipse at center, rgba(255, 245, 230, 0.4), transparent 75%);
  opacity: 0.5;
  animation-duration: 80s;
}

.mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 68%;
  pointer-events: none;
}

.ridge {
  fill: currentColor;
}

.ridge-far {
  color: var(--ridge-far);
}

.ridge-mid {
  color: var(--ridge-mid);
}

.ridge-near {
  color: var(--ridge-near);
}

.ridge-ground {
  color: var(--ridge-ground);
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem 20vh;
  text-align: center;
}

.title {
  font-size: clamp(1.85rem, 5.2vw, 3.75rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  line-height: 1.45;
  color: var(--ink);
  text-indent: 0.28em;
  text-shadow: 0 1px 12px rgba(255, 240, 220, 0.45);
  opacity: 0;
  transform: translateY(18px);
  animation: rise-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.subtitle {
  margin-top: 1.25rem;
  max-width: 28em;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-indent: 0.18em;
  opacity: 0;
  transform: translateY(12px);
  animation: rise-in 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.subtitle.is-empty {
  display: none;
}

.beian {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}

.beian a {
  pointer-events: auto;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: #000;
  text-decoration: none;
  font-weight: 500;
}

.beian a:hover {
  color: #000;
  text-decoration: underline;
}

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

@keyframes drift {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(5%);
  }
}

@keyframes sun-breathe {
  from {
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@media (max-width: 640px) {
  .stage {
    padding-bottom: 24vh;
  }

  .title {
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }

  .subtitle {
    letter-spacing: 0.1em;
    text-indent: 0.1em;
  }

  .sun {
    top: 36%;
  }

  .beian a {
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mist,
  .sun,
  .title,
  .subtitle {
    animation: none;
  }

  .title,
  .subtitle {
    opacity: 1;
    transform: none;
  }

  .sun {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}