/* spaceedu-style space homepage */

:root {
  --bg: #05070f;
  --ink: #eef3fb;
  --ink-dim: rgba(238, 243, 251, 0.62);
  --accent: #57d7e8;
  --accent-soft: rgba(87, 215, 232, 0.35);
  --btn-bg: #e8f2ff;
  --btn-ink: #101828;
  --serif: "Playfair Display", "Noto Serif SC", "Times New Roman", Georgia, serif;
  --sans: "Inter", "Segoe UI", Arial, sans-serif;
}

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

html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

#scroll-space { height: 420vh; position: relative; z-index: -1; }

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s;
}
#loader.done { opacity: 0; visibility: hidden; }
#loader span {
  font-size: 12px; letter-spacing: 0.5em; color: var(--ink-dim);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }

/* ---------- nav ---------- */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 44px;
  border-bottom: 1px solid rgba(238, 243, 251, 0.14);
}
.brand {
  display: inline-flex; align-items: center;
  color: var(--ink); text-decoration: none;
}
.brand img { height: 75px; width: auto; display: block; }
.brand .accent { color: var(--accent); }
.links { display: flex; align-items: center; gap: 46px; }
.links a {
  position: relative;
  color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  padding: 6px 2px;
  transition: color 0.25s;
}
.links a:not(.btn):hover { color: var(--accent); }
.links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -27px;
  height: 2px; background: var(--accent);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--btn-bg); color: var(--btn-ink);
  border: none; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em; text-decoration: none;
  padding: 16px 42px; cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-small { padding: 11px 26px; font-size: 13px; }
.btn-glow { box-shadow: 0 0 24px var(--accent-soft), 0 0 64px rgba(87, 215, 232, 0.18); }
.btn-glow:hover { box-shadow: 0 0 34px rgba(87, 215, 232, 0.55), 0 0 90px rgba(87, 215, 232, 0.28); }
.btn-round {
  width: 52px; height: 52px; padding: 0;
  box-shadow: 0 0 20px var(--accent-soft);
}

/* ---------- overlays ---------- */
.overlay {
  position: fixed; z-index: 10;
  opacity: 0; visibility: hidden;
  transform: translateY(26px);
  filter: blur(10px);
  transition: opacity 0.55s ease, transform 0.55s ease, filter 0.55s ease, visibility 0.55s;
  pointer-events: none;
}
.overlay.on { opacity: 1; visibility: visible; transform: none; filter: blur(0); pointer-events: auto; }

.kicker {
  font-size: 15px; font-weight: 500;
  letter-spacing: 0.42em; text-indent: 0.42em;
  color: var(--ink); margin-bottom: 6px;
}
.title {
  font-family: var(--serif); font-weight: 500;
  line-height: 0.95; letter-spacing: 0.045em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.rule { width: 74px; height: 2px; background: var(--accent); margin: 26px 0 24px; }
.desc {
  font-size: 14.5px; font-weight: 400; line-height: 1.75;
  color: var(--ink-dim); letter-spacing: 0.015em;
}

/* hero */
#hero { top: 15%; left: 50%; transform: translate(-50%, 0); text-align: center; width: min(760px, 86vw); }
#hero.on { transform: translate(-50%, 0); }
#hero:not(.on) { transform: translate(-50%, -30px); }
#hero .title { font-size: clamp(64px, 9.5vw, 138px); }
#hero .kicker { margin-bottom: 2px; }
#hero .rule { margin: 30px auto 26px; width: 84px; }
#hero .desc { max-width: 720px; margin: 0 auto 40px; font-size: 25px; line-height: 1.7; }

/* title swap transition (planet switching) */
.swap { transition: opacity 0.28s ease, filter 0.28s ease, transform 0.28s ease; }
.swap.out { opacity: 0; filter: blur(14px); transform: translateY(10px); }

/* side switcher: invisible click zones tracking the mini planets (geometry set in JS) */
.side-btn {
  position: fixed; z-index: 11;
  background: none; border: none; cursor: pointer;
  padding: 0;
  opacity: 1; transition: opacity 0.3s, visibility 0.3s;
}
.side-btn.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* scroll hint */
#scroll-hint {
  position: fixed; right: 30px; bottom: 20px;
  z-index: 11; width: 58px; height: 58px;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(5, 8, 16, 0.72); color: var(--ink);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px;
  transition: opacity 0.3s, visibility 0.3s;
}
#scroll-hint svg { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
#scroll-hint.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* detail */
#detail { top: 24%; left: 8.5%; width: min(560px, 42vw); }
#detail .title { font-size: clamp(54px, 6.4vw, 96px); }
#detail .desc { margin-bottom: 42px; font-size: 25px; line-height: 1.8; }
#detail .actions { display: flex; align-items: center; gap: 18px; }

/* surface */
#surface { right: 8%; bottom: 11%; width: min(560px, 44vw); text-align: right; }
#surface .rule { margin-left: auto; margin-bottom: 22px; }
#surface .desc { font-size: 25px; line-height: 1.8; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.6); }
#surface .btn { margin-top: 30px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  #nav { padding: 18px 22px; }
  .links { gap: 22px; }
  .links a:not(.btn):not(.active) { display: none; }
  #detail { left: 6%; width: 62vw; top: 18%; }
  #surface { right: 6%; width: 70vw; bottom: 9%; }
  .side-btn { display: none; }
}

/* ============================================================
 * sub pages (trailer / tickets / blog / enroll)
 * ============================================================ */

body.sub-page {
  background:
    linear-gradient(rgba(5, 7, 15, 0.88), rgba(5, 7, 15, 0.95)),
    url("../assets/textures/2k_stars_milky_way.jpg") center / cover fixed;
  min-height: 100vh;
}

.sub-page #nav {
  background: rgba(5, 7, 15, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.page {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 150px 32px 90px;
}
.page.narrow { max-width: 640px; }

.page-head { margin-bottom: 48px; }
.page-head .title { font-size: clamp(48px, 6vw, 84px); }
.page-head .desc { max-width: 640px; font-size: 17px; line-height: 1.8; }

/* trailer */
.video-wrap {
  border: 1px solid rgba(238, 243, 251, 0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(87, 215, 232, 0.12), 0 30px 80px rgba(0, 0, 0, 0.5);
  background: #000;
}
.video-wrap video { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 66vh; background: #000; }

.note-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
}
.note-card {
  border: 1px solid rgba(238, 243, 251, 0.1);
  border-radius: 12px;
  padding: 24px 26px;
  background: rgba(238, 243, 251, 0.03);
}
.note-card h3 { font-size: 14px; letter-spacing: 0.24em; margin-bottom: 12px; color: var(--accent); }
.note-card p { font-size: 17px; line-height: 1.75; color: var(--ink-dim); }

/* card grids */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.card-grid.blog { grid-template-columns: repeat(3, 1fr); }
.card {
  border: 1px solid rgba(238, 243, 251, 0.1);
  border-radius: 14px;
  background: rgba(238, 243, 251, 0.03);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(87, 215, 232, 0.45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* tickets */
.ticket { padding: 36px 32px; display: flex; flex-direction: column; }
.ticket .tier { font-size: 13px; letter-spacing: 0.3em; color: var(--accent); margin-bottom: 14px; }
.ticket .price { font-family: var(--serif); font-size: 58px; line-height: 1; margin-bottom: 24px; }
.ticket ul { list-style: none; margin-bottom: 32px; flex: 1; }
.ticket li {
  font-size: 13.5px; color: var(--ink-dim); line-height: 1.6;
  padding: 8px 0 8px 22px; position: relative;
  border-bottom: 1px solid rgba(238, 243, 251, 0.06);
}
.ticket li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.ticket.featured {
  border-color: rgba(87, 215, 232, 0.55);
  box-shadow: 0 0 44px rgba(87, 215, 232, 0.14);
}
.ticket .btn { align-self: stretch; }

/* blog */
.post { overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; opacity: 0.9; transition: opacity 0.3s, transform 0.5s; }
.post:hover img { opacity: 1; transform: scale(1.03); }
.post-body { padding: 22px 24px 26px; }
.post .meta { font-size: 11.5px; letter-spacing: 0.14em; color: var(--ink-dim); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
.post .tag { color: var(--accent); border: 1px solid rgba(87, 215, 232, 0.4); border-radius: 999px; padding: 3px 10px; font-size: 10px; }
.post h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.3; margin-bottom: 10px; }
.post p { font-size: 13px; line-height: 1.65; color: var(--ink-dim); }

/* enroll form */
.form-card {
  border: 1px solid rgba(238, 243, 251, 0.1);
  border-radius: 14px;
  background: rgba(238, 243, 251, 0.03);
  padding: 38px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.form-card label { display: flex; flex-direction: column; gap: 9px; }
.form-card label span { font-size: 11px; letter-spacing: 0.26em; color: var(--ink-dim); }
.form-card input, .form-card select {
  background: rgba(5, 7, 15, 0.6);
  border: 1px solid rgba(238, 243, 251, 0.16);
  border-radius: 9px;
  color: var(--ink);
  font-family: var(--sans); font-size: 14px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.form-card input:focus, .form-card select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(87, 215, 232, 0.14);
}
.form-card .btn { margin-top: 6px; }
.form-done { display: none; text-align: center; font-size: 13.5px; color: var(--accent); letter-spacing: 0.04em; }
.form-card.done input, .form-card.done select, .form-card.done .btn { display: none; }
.form-card.done .form-done { display: block; padding: 26px 0 8px; }
.links a.active-btn { box-shadow: 0 0 20px rgba(87, 215, 232, 0.35); }

/* footer */
.footer {
  position: relative; z-index: 1;
  text-align: center;
  padding: 34px 20px 40px;
  font-size: 12px; letter-spacing: 0.18em;
  color: rgba(238, 243, 251, 0.35);
  border-top: 1px solid rgba(238, 243, 251, 0.08);
}

@media (max-width: 900px) {
  .card-grid, .card-grid.blog, .note-grid { grid-template-columns: 1fr; }
  .page { padding: 130px 22px 70px; }
}

/* planet quick-select menu */
#planet-menu {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 11; display: flex; gap: 34px;
  transition: opacity 0.3s, visibility 0.3s;
}
#planet-menu.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#planet-menu button {
  position: relative;
  background: none; border: none; cursor: pointer;
  font-family: var(--serif); font-size: 14px; letter-spacing: 0.2em;
  color: rgba(238, 243, 251, 0.55);
  padding: 8px 2px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
  transition: color 0.25s;
}
#planet-menu button:hover { color: #fff; }
#planet-menu button.active { color: var(--accent); }
#planet-menu button.active::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 20px; height: 2px; background: var(--accent);
}

/* long (CJK) titles — shrink so multi-char company/project names fit */
#hero .title.long { font-size: clamp(28px, 4vw, 58px); line-height: 1.18; letter-spacing: 0.06em; }
#detail .title.long { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.22; letter-spacing: 0.05em; }

/* intro pages (POD / 大模型独立站) */
.note-grid.two-col { grid-template-columns: repeat(2, 1fr); }
.page-actions { margin-top: 44px; }

/* placeholder page (渲染示例) */
.placeholder {
  min-height: 52vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; text-align: center;
  color: var(--ink-dim); font-size: 14px; letter-spacing: 0.1em;
}
.placeholder-title {
  font-family: var(--serif); font-size: clamp(40px, 5vw, 68px);
  color: var(--ink); letter-spacing: 0.18em; text-indent: 0.18em;
}
.placeholder .rule { margin: 0; }

@media (max-width: 900px) {
  .note-grid.two-col { grid-template-columns: 1fr; }
}

/* demo entry card (渲染示例) */
a.note-card.demo-card {
  display: block; text-decoration: none; color: inherit;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
a.note-card.demo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(87, 215, 232, 0.45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.demo-cta {
  display: inline-block; margin-top: 16px;
  font-size: 14px; letter-spacing: 0.1em; color: var(--accent);
}