:root {
  --void: #04070f;
  --ink: #e8eef8;
  --muted: #c3cddd;
  --gold: #d8b56a;
  --cyan: #3ee0ff;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #04070f;
}

#stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.parallax-hero {
  position: absolute;
  inset: -2%;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% 42%;
  display: block;
  image-rendering: auto;
  animation: hero-drift 28s ease-in-out infinite alternate;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 7, 15, 0.55) 0%, rgba(4, 7, 15, 0.08) 36%, transparent 58%, rgba(4, 7, 15, 0.42) 100%),
    linear-gradient(180deg, rgba(4, 7, 15, 0.22) 0%, transparent 18%, transparent 78%, rgba(4, 7, 15, 0.4) 100%);
}

.portal {
  position: absolute;
  right: 24%;
  top: 40%;
  width: 14vmin;
  height: 14vmin;
  z-index: 6;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 230, 255, 0.4) 0%, rgba(62, 224, 255, 0.12) 40%, transparent 70%);
  filter: blur(6px);
  animation: portal-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
}

.clouds {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.cloud {
  position: absolute;
  display: block;
  height: 22%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.1), transparent 70%);
  filter: blur(16px);
  animation: cloud-drift linear infinite;
}

.cloud.c1 {
  width: 48%;
  left: -18%;
  bottom: 6%;
  animation-duration: 48s;
}

.cloud.c2 {
  width: 36%;
  left: 8%;
  bottom: 16%;
  opacity: 0.55;
  animation-duration: 62s;
  animation-delay: -14s;
}

.streaks {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
}

.streaks span {
  position: absolute;
  display: block;
  width: 16vw;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(62, 224, 255, 0.9), #fff);
  border-radius: 999px;
  filter: drop-shadow(0 0 6px var(--cyan));
  animation: streak-fly 7s linear infinite;
}

.streaks span:nth-child(1) { top: 30%; left: -20%; animation-duration: 6.8s; }
.streaks span:nth-child(2) { top: 48%; left: -28%; width: 11vw; animation-duration: 8.4s; animation-delay: -2s; }
.streaks span:nth-child(3) { top: 64%; left: -16%; width: 20vw; animation-duration: 5.8s; animation-delay: -4s; }
.streaks span:nth-child(4) { top: 38%; left: -36%; width: 9vw; animation-duration: 9s; animation-delay: -1.4s; }

.hud-frame {
  position: absolute;
  inset: 22px;
  z-index: 9;
  pointer-events: none;
  border: 1px solid rgba(62, 224, 255, 0.18);
}

.corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid var(--cyan);
}

.corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.sys-line {
  position: absolute;
  top: 34px;
  left: 48px;
  z-index: 10;
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}

.panel,
.lore {
  position: absolute;
  z-index: 11;
  background: linear-gradient(180deg, rgba(8, 14, 26, 0.72), rgba(8, 14, 26, 0.48));
  border: 1px solid rgba(216, 181, 106, 0.35);
  box-shadow: 0 0 0 1px rgba(62, 224, 255, 0.08), 0 20px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}

.panel {
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 420px;
  padding: 26px 28px 24px;
}

.lore {
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(420px, 34vw);
  max-height: 68vh;
  overflow: auto;
  padding: 22px 24px 20px;
}

.kicker {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.28em;
  margin-bottom: 12px;
}

.panel h1,
.lore h2 {
  font-family: "STKaiti", "KaiTi", "Songti SC", "PingFang SC", serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-shadow: 0 0 24px rgba(62, 224, 255, 0.25);
}

.panel h1 {
  font-size: clamp(32px, 4.4vw, 52px);
}

.lore h2 {
  font-size: 22px;
  margin-bottom: 12px;
}

.lead,
.lore p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

.lead {
  margin-top: 14px;
}

.lore p + p {
  margin-top: 10px;
}

.mail {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 20px;
  text-decoration: none;
  color: var(--ink);
}

.mail-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--cyan);
}

.mail-addr {
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  font-size: 20px;
  color: #f3fbff;
  border-bottom: 1px solid rgba(62, 224, 255, 0.45);
  padding-bottom: 4px;
  text-shadow: 0 0 12px rgba(62, 224, 255, 0.45);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.mail:hover .mail-addr {
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(62, 224, 255, 0.85);
}

@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-1.4%, 0.8%, 0) scale(1.03); }
}

@keyframes portal-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.92); }
  50% { opacity: 0.9; transform: scale(1.16); }
}

@keyframes cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(36%); }
}

@keyframes streak-fly {
  0% { transform: translate3d(0, 0, 0) rotate(-12deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate3d(130vw, -18vh, 0) rotate(-12deg); opacity: 0; }
}

@media (max-width: 960px) {
  html,
  body {
    overflow: auto;
  }

  .stage {
    min-height: 100vh;
    height: auto;
    overflow: visible;
  }

  .parallax-hero {
    position: fixed;
  }

  .panel,
  .lore {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 18vh 6% 24px;
  }

  .lore {
    margin-top: 0;
    margin-bottom: 48px;
  }

  .sys-line {
    left: 28px;
    right: 28px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img,
  .cloud,
  .streaks span,
  .portal {
    animation: none;
  }
}