:root {
  --ink: #eef3ff;
  --muted: #a4b6d7;
  --muted-soft: #d8e1f5;
  --gold: #ffd47c;
  --cyan: #6fe8ff;
  --mint: #79f4d1;
  --rose: #ff7cc4;
  --violet: #8a7cff;
  --font-display: "Cormorant Garamond", "Noto Serif SC", "STSong", serif;
  --font-ui: "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-signal: "Space Grotesk", "Avenir Next", "Helvetica Neue", sans-serif;
  --pointer-x: 50vw;
  --pointer-y: 35vh;
  --shift-x: 0px;
  --shift-y: 0px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(121, 244, 209, 0.1), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(255, 124, 196, 0.12), transparent 28%),
    radial-gradient(circle at 50% 62%, rgba(138, 124, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #010208 0%, #050a14 22%, #091325 55%, #050711 100%);
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  opacity: 0.16;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 248, 232, 0.08), transparent 28%),
    radial-gradient(circle at 50% 42%, rgba(118, 164, 255, 0.04), transparent 48%);
  filter: blur(12px);
}

body::after {
  opacity: 0.14;
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.08) 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.07) 0 0.06rem, transparent 0.08rem),
    radial-gradient(circle at 32% 74%, rgba(255, 255, 255, 0.06) 0 0.07rem, transparent 0.09rem),
    radial-gradient(circle at 66% 68%, rgba(255, 255, 255, 0.05) 0 0.06rem, transparent 0.08rem),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.02), transparent 62%);
  filter: blur(0.4px);
}

a {
  color: inherit;
}

.scene {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

.space {
  position: fixed;
  inset: -18vmax;
  overflow: hidden;
  pointer-events: none;
}

.milkyway {
  position: absolute;
  left: -12%;
  top: 12%;
  width: 126%;
  height: 24rem;
  opacity: 0.72;
  transform:
    rotate(-18deg)
    translate3d(calc(var(--shift-x) * 0.04), calc(var(--shift-y) * 0.04), 0);
  background:
    radial-gradient(44% 90% at 28% 48%, rgba(255, 224, 176, 0.12), transparent 72%),
    radial-gradient(34% 100% at 52% 50%, rgba(176, 216, 255, 0.16), transparent 74%),
    radial-gradient(22% 72% at 56% 48%, rgba(255, 255, 255, 0.18), transparent 74%);
  filter: blur(28px);
}

.milkyway::before,
.milkyway::after {
  content: "";
  position: absolute;
  inset: 0;
}

.milkyway::before {
  background:
    radial-gradient(34% 90% at 34% 50%, rgba(255, 255, 255, 0.16), transparent 74%),
    radial-gradient(28% 100% at 62% 54%, rgba(255, 212, 124, 0.08), transparent 78%);
  filter: blur(20px);
}

.milkyway::after {
  inset: 14% 6%;
  background:
    radial-gradient(circle at 16% 50%, rgba(255, 255, 255, 0.16), transparent 5.5%),
    radial-gradient(circle at 46% 50%, rgba(255, 255, 255, 0.12), transparent 6%),
    radial-gradient(circle at 78% 52%, rgba(255, 255, 255, 0.14), transparent 6%);
  filter: blur(8px);
  opacity: 0.54;
}

.nebula-shard {
  position: absolute;
  opacity: 0.38;
  filter: blur(58px);
  mix-blend-mode: screen;
  animation:
    nebula-drift 22s ease-in-out infinite alternate,
    nebula-breathe 13s ease-in-out infinite;
  border-radius: 50%;
  transform: translate3d(calc(var(--shift-x) * 0.08), calc(var(--shift-y) * 0.08), 0);
}

.nebula-a {
  top: -2rem;
  left: -4rem;
  width: 44rem;
  height: 22rem;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255, 124, 196, 0.74), transparent 52%),
    radial-gradient(ellipse at 70% 45%, rgba(111, 232, 255, 0.64), transparent 58%);
}

.nebula-b {
  top: 44%;
  right: -10rem;
  width: 48rem;
  height: 26rem;
  animation-duration: 24s;
  background:
    radial-gradient(ellipse at 34% 44%, rgba(255, 212, 124, 0.54), transparent 48%),
    radial-gradient(ellipse at 72% 46%, rgba(138, 124, 255, 0.56), transparent 58%);
}

.nebula-c {
  bottom: -8rem;
  left: 10%;
  width: 52rem;
  height: 22rem;
  animation-duration: 21s;
  background:
    radial-gradient(ellipse at 36% 50%, rgba(121, 244, 209, 0.44), transparent 52%),
    radial-gradient(ellipse at 72% 54%, rgba(255, 124, 196, 0.32), transparent 58%);
}

.nebula-d {
  top: 18%;
  left: 44%;
  width: 24rem;
  height: 18rem;
  animation-duration: 16s;
  background:
    radial-gradient(ellipse at 44% 48%, rgba(138, 124, 255, 0.36), transparent 52%),
    radial-gradient(ellipse at 60% 54%, rgba(111, 232, 255, 0.22), transparent 58%);
}

.rift {
  display: none;
}

.starfield-layer,
.meteor-layer {
  position: absolute;
  inset: 0;
}

.starfield-layer {
  transform:
    translate3d(
      calc(var(--shift-x) * var(--depth)),
      calc(var(--shift-y) * var(--depth)),
      0
    );
}

.star {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
  animation: twinkle var(--duration, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  border-radius: 50%;
}

.star.star-color {
  box-shadow: 0 0 14px hsla(var(--hue), 100%, 82%, 0.42);
  background: hsla(var(--hue), 100%, 90%, 0.94);
}

.meteor {
  position: absolute;
  height: 1.5px;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    hsla(var(--meteor-hue), 100%, 86%, 0.46),
    rgba(255, 255, 255, 1)
  );
  filter: drop-shadow(0 0 12px hsla(var(--meteor-hue), 100%, 78%, 0.52));
  transform: rotate(var(--angle)) translate3d(0, 0, 0);
  animation: meteor-flight var(--duration, 10s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.meteor::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.05rem;
  width: 0.36rem;
  height: 0.36rem;
  transform: translate(50%, -50%);
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 22px hsla(var(--meteor-hue), 100%, 80%, 0.52);
  border-radius: 50%;
}

.cursor-scan {
  position: fixed;
  left: var(--pointer-x);
  top: var(--pointer-y);
  width: 20rem;
  height: 20rem;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(
    circle,
    rgba(255, 248, 232, 0.05),
    rgba(189, 221, 255, 0.03) 34%,
    rgba(255, 255, 255, 0) 70%
  );
  filter: blur(18px);
  opacity: 0.54;
  border-radius: 50%;
}

.landing {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  width: min(1480px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(1.2rem, 3.8vw, 3.6rem);
}

.topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  align-items: start;
  gap: clamp(1rem, 3vw, 3rem);
  position: relative;
  z-index: 3;
}

.statusline,
.manifest-note,
.floor-whisper {
  margin: 0;
}

.statusline {
  color: rgba(236, 221, 192, 0.8);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-signal);
}

.manifest-note {
  justify-self: end;
  max-width: 22rem;
  color: rgba(217, 226, 243, 0.62);
  font-size: 0.85rem;
  line-height: 1.95;
  text-align: right;
}

.orbit-stage {
  position: relative;
  z-index: 2;
  min-height: clamp(40rem, 84svh, 64rem);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.orbit-stage::before,
.orbit-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orbit-stage::before {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.07), transparent 16%),
    radial-gradient(circle at 50% 46%, rgba(107, 169, 255, 0.07), transparent 30%),
    radial-gradient(circle at 50% 46%, rgba(255, 212, 124, 0.04), transparent 42%);
  filter: blur(8px);
}

.orbit-stage::after {
  inset: 50%;
  width: 86vmin;
  height: 86vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(7, 16, 33, 0) 0%, rgba(2, 4, 10, 0.18) 56%, rgba(2, 4, 10, 0.52) 100%);
  filter: blur(18px);
}

.hero {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  width: min(38rem, 88vw);
  text-align: center;
  transform:
    translate(
      calc(var(--shift-x) * -0.05),
      calc(var(--shift-y) * -0.05)
    );
}

.eyebrow {
  margin: 0 0 1rem;
  color: rgba(255, 212, 124, 0.82);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-signal);
}

.hero-title {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.06em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(5rem, 11vw, 9.4rem);
  line-height: 0.9;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  text-shadow:
    0 0 24px rgba(255, 248, 232, 0.08),
    0 0 72px rgba(189, 221, 255, 0.1);
}

.hero-letter {
  position: relative;
  display: inline-block;
}

.hero-eye {
  position: relative;
  display: inline-flex;
  width: 0.58em;
  height: 0.58em;
  align-items: center;
  justify-content: center;
  background: rgba(245, 250, 255, 0.96);
  box-shadow:
    0 0 18px rgba(255, 248, 232, 0.14),
    0 0 38px rgba(189, 221, 255, 0.12);
  border-radius: 50%;
  transform: translateY(-0.02em);
}

.eye-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.16em;
  height: 0.16em;
  background: var(--gold);
  box-shadow:
    0 0 8px rgba(255, 212, 124, 0.65),
    0 0 18px rgba(189, 221, 255, 0.12);
  transform: translate(-50%, -50%);
  transition: transform 80ms linear;
  border-radius: 50%;
}

.project-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.orbital-system {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orbit-ring {
  display: none;
}

.orbital-core {
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.orbital-core::before {
  content: "";
  position: absolute;
  width: 34vmin;
  height: 34vmin;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 232, 0.08), rgba(189, 221, 255, 0.05) 30%, transparent 72%);
  filter: blur(28px);
  animation: center-breathe 9s ease-in-out infinite;
}

.orbital-core::after {
  content: "";
  position: absolute;
  width: 14vmin;
  height: 14vmin;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 180, 0.14), rgba(255, 212, 124, 0.06) 46%, transparent 72%);
  filter: blur(16px);
  animation: center-breathe 9s ease-in-out infinite reverse;
}

.card-orbit {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.orbit-node {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.72rem;
  width: clamp(7rem, 12vw, 11rem);
  text-decoration: none;
  pointer-events: all;
  opacity: 0;
  color: rgba(242, 246, 255, 0.92);
  text-align: center;
  transform: translate(-50%, -50%);
  animation: fade-in 900ms ease var(--fade-delay, 0s) 1 both;
  transition:
    scale 260ms ease,
    filter 260ms ease,
    text-shadow 260ms ease,
    opacity 220ms ease;
}

.orbit-node:hover,
.orbit-node:focus-visible {
  scale: 1.06;
  filter: brightness(1.14);
  text-shadow:
    0 0 18px hsla(var(--accent-hue), 100%, 84%, 0.24),
    0 0 40px hsla(var(--accent-hue), 100%, 84%, 0.08);
  outline: none;
}

.orbit-node-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  font-weight: 500;
  line-height: 1.52;
  letter-spacing: 0.08em;
  text-wrap: balance;
}

.orbit-orb {
  flex: 0 0 auto;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: hsla(var(--accent-hue), 100%, 92%, 0.88);
  box-shadow:
    0 0 6px 1px hsla(var(--accent-hue), 100%, 86%, 0.42),
    0 0 24px 11px hsla(var(--accent-hue), 100%, 78%, 0.32),
    0 0 82px 34px hsla(var(--accent-hue), 100%, 74%, 0.18),
    0 0 148px 62px hsla(var(--accent-hue), 100%, 72%, 0.09);
  animation: orb-breathe 5s ease-in-out infinite;
  animation-delay: calc(var(--index, 0) * 0.72s);
}

.orbit-node:hover .orbit-orb,
.orbit-node:focus-visible .orbit-orb {
  scale: 1.28;
}

.detail-deck {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.8rem, 4vw, 4.5rem);
  margin-top: clamp(1rem, 2vw, 2rem);
}

.detail-heading {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(248, 250, 255, 0.92);
  text-shadow: 0 0 22px rgba(189, 221, 255, 0.08);
}

.hero-copy {
  margin: 0;
  max-width: 26rem;
  color: var(--muted-soft);
  font-size: clamp(0.96rem, 1.18vw, 1.08rem);
  line-height: 1.9;
  text-wrap: balance;
}

.hero-copy-soft {
  margin-top: 0.82rem;
  color: rgba(214, 224, 244, 0.72);
}

.project-detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.4rem, 2vw, 2.2rem) clamp(1.4rem, 2.4vw, 3rem);
}

.detail-item {
  display: grid;
  gap: 0.52rem;
  align-content: start;
  text-decoration: none;
  color: rgba(238, 243, 255, 0.92);
  transition:
    scale 240ms ease,
    filter 240ms ease,
    text-shadow 240ms ease;
}

.detail-item:hover,
.detail-item:focus-visible {
  scale: 1.02;
  filter: brightness(1.12);
  text-shadow:
    0 0 16px hsla(var(--accent-hue), 100%, 84%, 0.16),
    0 0 36px hsla(var(--accent-hue), 100%, 84%, 0.06);
  outline: none;
}

.detail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  font-family: var(--font-signal);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsla(var(--accent-hue), 82%, 82%, 0.72);
}

.detail-kicker::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: hsla(var(--accent-hue), 100%, 90%, 0.95);
  box-shadow:
    0 0 8px 3px hsla(var(--accent-hue), 100%, 82%, 0.48),
    0 0 20px 8px hsla(var(--accent-hue), 100%, 72%, 0.16);
}

.detail-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.34rem, 2vw, 1.76rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.04em;
}

.detail-description {
  margin: 0;
  color: rgba(210, 220, 240, 0.78);
  font-size: 0.96rem;
  line-height: 1.86;
}

.detail-link {
  color: rgba(235, 220, 190, 0.82);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
}

.floor-whisper {
  position: relative;
  z-index: 3;
  align-self: center;
  max-width: 30rem;
  color: rgba(192, 206, 230, 0.58);
  font-size: 0.86rem;
  line-height: 1.92;
  text-align: center;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.82);
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
  65% {
    opacity: 0.52;
    transform: scale(0.92);
  }
}

@keyframes meteor-flight {
  0% {
    opacity: 0;
    transform: rotate(var(--angle)) translate3d(0, 0, 0) scaleX(0.4);
  }
  8% {
    opacity: 1;
  }
  22% {
    opacity: 0;
    transform:
      rotate(var(--angle))
      translate3d(var(--travel-x), var(--travel-y), 0)
      scaleX(1);
  }
  100% {
    opacity: 0;
    transform:
      rotate(var(--angle))
      translate3d(var(--travel-x), var(--travel-y), 0)
      scaleX(1);
  }
}

@keyframes nebula-drift {
  from {
    transform:
      translate3d(calc(var(--shift-x) * 0.08 - 1.6rem), calc(var(--shift-y) * 0.08 - 0.8rem), 0)
      scale(0.97);
  }
  to {
    transform:
      translate3d(calc(var(--shift-x) * 0.08 + 1.4rem), calc(var(--shift-y) * 0.08 + 1.1rem), 0)
      scale(1.05);
  }
}

@keyframes nebula-breathe {
  0%,
  100% {
    opacity: 0.42;
    filter: blur(46px);
  }
  50% {
    opacity: 0.5;
    filter: blur(60px);
  }
}

@keyframes orb-breathe {
  0%,
  100% {
    box-shadow:
      0 0 6px 1px hsla(var(--accent-hue), 100%, 86%, 0.42),
      0 0 24px 11px hsla(var(--accent-hue), 100%, 78%, 0.32),
      0 0 82px 34px hsla(var(--accent-hue), 100%, 74%, 0.18),
      0 0 148px 62px hsla(var(--accent-hue), 100%, 72%, 0.09);
  }
  50% {
    box-shadow:
      0 0 8px 2px hsla(var(--accent-hue), 100%, 90%, 0.58),
      0 0 30px 13px hsla(var(--accent-hue), 100%, 80%, 0.4),
      0 0 96px 40px hsla(var(--accent-hue), 100%, 76%, 0.22),
      0 0 170px 72px hsla(var(--accent-hue), 100%, 74%, 0.11);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes center-breathe {
  0%,
  100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@media (max-width: 1180px) {
  .topline,
  .detail-deck {
    grid-template-columns: 1fr;
  }

  .manifest-note {
    justify-self: start;
    text-align: left;
  }

  .detail-intro {
    max-width: 34rem;
  }
}

@media (max-width: 960px) {
  .landing {
    min-height: auto;
    padding: 1.2rem;
    gap: 1.5rem;
  }

  .orbit-stage {
    min-height: 34rem;
  }

  .hero {
    transform: none;
  }

  .hero-title {
    font-size: clamp(4rem, 18vw, 7rem);
  }

  .project-detail-list {
    grid-template-columns: 1fr;
  }

  .floor-whisper {
    align-self: stretch;
    max-width: 36rem;
    text-align: left;
  }

  .milkyway {
    left: -42%;
    width: 182%;
  }
}

@media (max-width: 640px) {
  .statusline {
    font-size: 0.74rem;
  }

  .manifest-note,
  .floor-whisper {
    font-size: 0.82rem;
  }

  .cursor-scan {
    width: 12rem;
    height: 12rem;
  }

  .orbit-node,
  .orbit-node.anchor-left,
  .orbit-node.anchor-right,
  .orbit-node.anchor-top,
  .orbit-node.anchor-bottom,
  .orbit-node.anchor-top-left,
  .orbit-node.anchor-top-right,
  .orbit-node.anchor-bottom-left,
  .orbit-node.anchor-bottom-right {
    width: clamp(6rem, 22vw, 8rem);
    gap: 0.56rem;
  }

  .orbit-node-title {
    font-size: 0.96rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nebula-shard,
  .milkyway,
  .star,
  .meteor,
  .orbit-orb,
  .orbital-core::before,
  .orbital-core::after {
    animation: none;
  }

  .hero,
  .starfield-layer,
  .cursor-scan,
  .manifest-note {
    transform: none;
  }

  .orbit-node {
    opacity: 1;
    animation: none;
  }
}