:root {
  --cyan: #20f7ff;
  --magenta: #ff2bd6;
  --violet: #8e6cff;
  --white: #f7fbff;
  --muted: #9fb7ca;
  --dark: #03040b;
  --panel: rgba(7, 12, 30, 0.48);
  --line: rgba(32, 247, 255, 0.24);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--dark);
  cursor: none;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--white);
  overflow-x: hidden;
  background: #03040b;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mx: 0;
  --my: 0;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --parallax-x: 0px;
  --parallax-y: 0px;
}

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

body::before {
  background:
    radial-gradient(circle at 68% 42%, rgba(32, 247, 255, 0.24), transparent 20%),
    radial-gradient(circle at 82% 34%, rgba(255, 43, 214, 0.22), transparent 24%),
    radial-gradient(circle at 18% 76%, rgba(142, 108, 255, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(5, 8, 20, 0), rgba(3, 4, 11, 0.92));
  mix-blend-mode: screen;
}

body::after {
  background:
    linear-gradient(90deg, rgba(32, 247, 255, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 43, 214, 0.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 85%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.cursor-aura {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(32,247,255,.9);
  border-radius: 50%;
  translate: calc(var(--cursor-x, 50vw) - 13px) calc(var(--cursor-y, 50vh) - 13px);
  pointer-events: none;
  mix-blend-mode: screen;
  box-shadow: 0 0 20px rgba(32,247,255,.7), 0 0 44px rgba(255,43,214,.32);
  transition: width 140ms ease, height 140ms ease, translate 40ms linear, border-color 140ms ease;
}

.cursor-aura::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--magenta);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--magenta);
}

body.is-hovering .cursor-aura {
  width: 48px;
  height: 48px;
  translate: calc(var(--cursor-x, 50vw) - 24px) calc(var(--cursor-y, 50vh) - 24px);
  border-color: rgba(255,43,214,.95);
}

.click-layer {
  position: fixed;
  inset: 0;
  z-index: 79;
  pointer-events: none;
  overflow: hidden;
}

.click-ripple {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(32,247,255,.86);
  border-radius: 50%;
  translate: -50% -50%;
  animation: ripple 720ms ease-out forwards;
  box-shadow: 0 0 22px rgba(32,247,255,.62), inset 0 0 20px rgba(255,43,214,.2);
}

.cg-gate {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(32,247,255,.24), transparent 18%),
    radial-gradient(circle at 56% 50%, rgba(255,43,214,.22), transparent 30%),
    rgba(2, 3, 10, .96);
  transition: opacity 900ms ease, transform 900ms ease, visibility 900ms ease;
}

body.cg-opened .cg-gate {
  opacity: 0;
  transform: scale(1.08);
  visibility: hidden;
  pointer-events: none;
}

.cg-lines {
  position: absolute;
  inset: -20%;
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(32,247,255,.08) 59px, transparent 61px),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(255,43,214,.06) 59px, transparent 61px);
  transform: perspective(900px) rotateX(62deg) translateY(10%);
  animation: gridRush 1.8s linear infinite;
}

.cg-core {
  position: absolute;
  width: min(58vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(32,247,255,.35);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(32,247,255,.24), inset 0 0 80px rgba(255,43,214,.13);
  animation: cgCore 5s ease-in-out infinite;
}

.cg-core span {
  position: absolute;
  inset: calc(var(--i, 0) * 8%);
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 50%;
  animation: ringSpin 8s linear infinite;
}

.cg-core span:nth-child(1) { --i: 1; }
.cg-core span:nth-child(2) { --i: 2; animation-direction: reverse; }
.cg-core span:nth-child(3) { --i: 3; animation-duration: 5s; }

.cg-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
}

.cg-copy p {
  margin: 0 0 14px;
  color: var(--cyan);
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.cg-copy h1 {
  margin: 0;
  font-size: clamp(58px, 10vw, 150px);
  line-height: .86;
}

.cg-copy button {
  min-height: 54px;
  margin-top: 32px;
  padding: 0 22px;
  border: 1px solid rgba(32,247,255,.52);
  color: #031018;
  background: linear-gradient(90deg, #efffff, var(--cyan), var(--magenta));
  border-radius: 999px;
  cursor: none;
  font-weight: 950;
  box-shadow: 0 0 38px rgba(32,247,255,.38), 0 0 54px rgba(255,43,214,.24);
  animation: buttonBreath 1.8s ease-in-out infinite;
}

body.cg-opened .sticky-stage {
  animation: stageWake 1000ms cubic-bezier(.16,.84,.28,1) both;
}

#worldCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
}

.topbar {
  position: fixed;
  top: 22px;
  left: 28px;
  right: 28px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}

.brand,
.topbar nav {
  pointer-events: auto;
  border: 1px solid var(--line);
  background: rgba(4, 8, 20, 0.46);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 28px rgba(32, 247, 255, 0.08);
}

.brand {
  display: grid;
  gap: 1px;
  padding: 10px 14px;
  border-radius: 999px;
}

.brand span {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
}

.brand small {
  color: var(--muted);
  font-size: 10px;
}

.topbar nav {
  display: flex;
  gap: 4px;
  padding: 7px;
  border-radius: 999px;
}

.topbar nav a {
  padding: 9px 12px;
  border-radius: 999px;
  color: #d8f8ff;
  font-size: 13px;
}

.topbar nav a:hover {
  background: rgba(32, 247, 255, 0.12);
}

.chapter-nav {
  position: fixed;
  left: 28px;
  top: 50%;
  z-index: 18;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
}

.chapter-nav button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  color: rgba(214, 246, 255, 0.56);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.chapter-nav span {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(32, 247, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(32, 247, 255, 0.25);
}

.chapter-nav button[data-active="true"] {
  color: #fff;
}

.chapter-nav button[data-active="true"] span {
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan), 0 0 28px rgba(255, 43, 214, .4);
}

.story {
  position: relative;
  z-index: 4;
}

.scene {
  position: relative;
  min-height: 118vh;
  display: grid;
  align-items: center;
  padding: 16vh clamp(22px, 6vw, 96px);
}

.scene.intro {
  min-height: 120vh;
}

.scene.twin {
  min-height: 105vh;
}

.story-copy {
  width: min(520px, 92vw);
  padding: 22px 24px;
  border: 1px solid rgba(32, 247, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(32, 247, 255, 0.08), rgba(255, 43, 214, 0.06)),
    rgba(5, 9, 22, 0.32);
  backdrop-filter: blur(22px);
  border-radius: 28px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.26), inset 0 0 30px rgba(255,255,255,0.035);
  transform: translateY(36px);
  opacity: 0;
  transition: opacity 700ms ease, transform 700ms ease, border-color 700ms ease;
}

.scene[data-visible="true"] .story-copy {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(32, 247, 255, 0.38);
}

.story-copy.right {
  margin-left: auto;
}

.hero-copy {
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;
}

.kicker {
  margin: 0 0 14px;
  color: var(--cyan);
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(32, 247, 255, 0.52);
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
  color: #f8fcff;
  text-shadow:
    0 0 24px rgba(32, 247, 255, .22),
    0 0 46px rgba(255, 43, 214, .18),
    0 24px 70px rgba(0,0,0,.72);
}

h1 {
  font-size: clamp(72px, 12vw, 184px);
  line-height: .82;
  font-weight: 950;
}

h2 {
  font-size: clamp(50px, 8vw, 126px);
  line-height: .88;
  font-weight: 940;
}

.story-copy p:not(.kicker) {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(222, 244, 255, .84);
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.74;
}

.story-copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.story-copy li {
  padding: 8px 10px;
  border: 1px solid rgba(32, 247, 255, 0.2);
  color: #dafbff;
  background: rgba(32, 247, 255, 0.06);
  border-radius: 999px;
  font-size: 13px;
}

.enter-button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin-top: 28px;
  padding: 0 18px;
  color: #04121a;
  background: linear-gradient(90deg, #e9ffff, var(--cyan), var(--magenta));
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 0 32px rgba(32, 247, 255, .38), 0 0 42px rgba(255, 43, 214, .22);
}

.sticky-stage {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.hero-figure {
  position: absolute;
  right: -4vw;
  bottom: -8vh;
  width: min(58vw, 880px);
  filter: drop-shadow(0 0 36px rgba(32, 247, 255, .38)) drop-shadow(0 0 72px rgba(255, 43, 214, .22));
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--hero-scale, 1));
  opacity: var(--hero-opacity, .96);
  transition: transform 800ms ease, opacity 800ms ease, right 800ms ease;
  animation: floatHero 5.8s ease-in-out infinite;
}

.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  mask-image: linear-gradient(to bottom, #000 0 82%, rgba(0,0,0,.7) 91%, transparent 100%);
}

.scan-line {
  position: absolute;
  left: 11%;
  right: 5%;
  top: 24%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);
  box-shadow: 0 0 24px rgba(32, 247, 255, .74);
  animation: scan 3.2s ease-in-out infinite;
}

.energy-blade {
  position: absolute;
  right: 15%;
  top: 20%;
  width: 3px;
  height: 48%;
  background: linear-gradient(180deg, transparent, rgba(32,247,255,.95), rgba(255,43,214,.88), transparent);
  filter: blur(.2px) drop-shadow(0 0 16px rgba(32,247,255,.75));
  transform: rotate(26deg);
  opacity: .8;
  animation: bladeFlash 2.2s ease-in-out infinite;
}

.world-ring {
  position: absolute;
  right: 9vw;
  top: 50%;
  width: min(44vw, 660px);
  aspect-ratio: 1;
  border: 1px solid rgba(32, 247, 255, .24);
  border-radius: 50%;
  transform: translate(calc(var(--parallax-x) * -.42), calc(-50% + var(--parallax-y) * -.35)) rotateX(67deg) rotateZ(var(--ring-rot, 0deg));
  box-shadow: 0 0 42px rgba(32, 247, 255, .12);
}

.ring-a { animation: ringSpin 16s linear infinite; }
.ring-b { width: min(34vw, 510px); right: 13vw; border-color: rgba(255,43,214,.24); animation: ringSpin 11s linear reverse infinite; }
.ring-c { width: min(23vw, 360px); right: 18vw; border-style: dashed; animation: ringSpin 7s linear infinite; }

.holo-stack {
  position: absolute;
  inset: 0;
}

.holo-panel {
  position: absolute;
  border: 1px solid rgba(32, 247, 255, .26);
  background:
    linear-gradient(135deg, rgba(32,247,255,.12), rgba(255,43,214,.08)),
    rgba(5, 10, 28, .34);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  box-shadow: inset 0 0 30px rgba(255,255,255,.04), 0 0 34px rgba(32,247,255,.13);
  animation: holoFloat 5s ease-in-out infinite;
  translate: calc(var(--parallax-x) * -.3) calc(var(--parallax-y) * -.25);
}

.holo-panel span {
  display: block;
  height: 2px;
  margin: 18px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  border-radius: 999px;
}

.panel-main { right: 43vw; top: 18vh; width: 250px; height: 126px; transform: rotateY(22deg) rotateZ(-4deg); }
.panel-side { right: 8vw; top: 16vh; width: 190px; height: 104px; transform: rotateY(-24deg) rotateZ(5deg); animation-delay: 900ms; }
.panel-orbit { right: 36vw; bottom: 22vh; width: 180px; height: 96px; transform: rotateY(18deg) rotateZ(6deg); animation-delay: 1500ms; }

.scene-object {
  position: absolute;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(32, 247, 255, .28);
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.2), rgba(32,247,255,.12), rgba(255,43,214,.08));
  backdrop-filter: blur(12px);
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(32,247,255,.18);
  opacity: .24;
  transform: scale(.82);
  transition: opacity 500ms ease, transform 500ms ease, box-shadow 500ms ease;
}

.scene-object:hover,
.holo-panel:hover {
  opacity: 1;
  transform: scale(1.12);
}

.scene-object b {
  font-size: 26px;
  line-height: 1;
}

.scene-object span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.object-media { right: 48vw; top: 38vh; }
.object-people { right: 14vw; top: 38vh; }
.object-time { right: 29vw; top: 22vh; }
.object-graph { right: 31vw; bottom: 20vh; }
.object-health { right: 10vw; bottom: 30vh; }

body[data-active-scene="media"] .object-media,
body[data-active-scene="people"] .object-people,
body[data-active-scene="timeline"] .object-time,
body[data-active-scene="graph"] .object-graph,
body[data-active-scene="health"] .object-health {
  opacity: 1;
  transform: scale(1.08);
  box-shadow: 0 0 48px rgba(32,247,255,.34), 0 0 62px rgba(255,43,214,.2);
}

body[data-active-scene="people"] .hero-figure { right: 4vw; --hero-scale: .94; }
body[data-active-scene="timeline"] .hero-figure { right: -12vw; --hero-scale: 1.08; --hero-opacity: .82; }
body[data-active-scene="graph"] .hero-figure { right: -2vw; --hero-scale: .9; }
body[data-active-scene="health"] .hero-figure { right: 6vw; --hero-scale: .86; --hero-opacity: .88; }
body[data-active-scene="twin"] .hero-figure { right: 12vw; --hero-scale: 1.04; --hero-opacity: 1; }

.icp {
  position: fixed;
  right: 24px;
  bottom: 14px;
  z-index: 30;
}

.icp a {
  color: rgba(222, 244, 255, .58);
  font-size: 12px;
}

@keyframes floatHero {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@keyframes stageWake {
  0% { filter: brightness(2.2) blur(10px); transform: scale(1.12); }
  100% { filter: brightness(1) blur(0); transform: scale(1); }
}

@keyframes scan {
  0%, 100% { transform: translateY(-38px); opacity: 0; }
  20%, 70% { opacity: 1; }
  88% { transform: translateY(300px); opacity: 0; }
}

@keyframes ringSpin {
  to { transform: translateY(-50%) rotateX(67deg) rotateZ(360deg); }
}

@keyframes holoFloat {
  0%, 100% { translate: 0 0; opacity: .78; }
  50% { translate: 0 -14px; opacity: 1; }
}

@keyframes ripple {
  from { opacity: 1; scale: .4; }
  to { opacity: 0; scale: 8; }
}

@keyframes gridRush {
  from { background-position: 0 0, 0 0; }
  to { background-position: 118px 0, 0 118px; }
}

@keyframes cgCore {
  0%, 100% { transform: scale(.94) rotate(0deg); filter: brightness(1); }
  50% { transform: scale(1.06) rotate(8deg); filter: brightness(1.35); }
}

@keyframes buttonBreath {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 38px rgba(32,247,255,.38), 0 0 54px rgba(255,43,214,.24); }
  50% { transform: translateY(-4px); box-shadow: 0 0 58px rgba(32,247,255,.58), 0 0 78px rgba(255,43,214,.38); }
}

@keyframes bladeFlash {
  0%, 100% { opacity: .42; transform: rotate(26deg) scaleY(.86); }
  50% { opacity: 1; transform: rotate(26deg) scaleY(1.08); }
}

@media (max-width: 920px) {
  html { cursor: auto; }
  .cursor-aura { display: none; }
  .topbar nav { display: none; }
  .chapter-nav { display: none; }
  .scene { min-height: 105vh; padding: 14vh 18px; }
  .story-copy,
  .story-copy.right {
    margin-left: 0;
    width: min(560px, 92vw);
  }
  h1 { font-size: clamp(58px, 18vw, 104px); }
  h2 { font-size: clamp(44px, 15vw, 82px); }
  .hero-figure {
    right: -190px;
    bottom: 17vh;
    width: 560px;
    opacity: .58;
  }
  .world-ring { right: -10vw; width: 560px; opacity: .7; }
  .ring-b { right: 2vw; width: 420px; }
  .ring-c { right: 14vw; width: 280px; }
  .holo-panel { transform: scale(.78); }
  .panel-main { right: 35vw; top: 32vh; }
  .panel-side { right: -38px; top: 24vh; }
  .panel-orbit { right: 18vw; bottom: 32vh; }
  .scene-object {
    width: 86px;
    height: 86px;
  }
  .object-media { right: 44vw; top: 48vh; }
  .object-people { right: 4vw; top: 44vh; }
  .object-time { right: 28vw; top: 26vh; }
  .object-graph { right: 28vw; bottom: 28vh; }
  .object-health { right: 4vw; bottom: 36vh; }
}

@media (max-width: 560px) {
  .topbar { left: 14px; right: 14px; top: 14px; }
  .brand { padding: 9px 12px; }
  .scene { padding-top: 18vh; }
  .story-copy {
    padding: 18px;
    border-radius: 22px;
  }
  .hero-copy { padding: 0; }
  .story-copy p:not(.kicker) {
    font-size: 15px;
  }
  .hero-figure {
    right: -220px;
    bottom: 21vh;
    width: 500px;
  }
  .holo-panel { opacity: .66; }
  .scene-object {
    width: 72px;
    height: 72px;
  }
  .scene-object b { font-size: 18px; }
  .scene-object span { font-size: 9px; }
}