:root {
  color-scheme: dark;
  --void: #060012;
  --chamber: #0B0716;
  --signal-violet: #6D5BFF;
  --electric-cyan: #00D4FF;
  --bio-green: #16F2B3;
  --ion-white: #F4F7FF;
  --muted-signal: #8D98B4;
  --hero-progress: 0;
  --intro-headline-progress: 0;
  --intro-settle-progress: 0;
  --intro-typing-progress: 0;
  --intro-cta-progress: 0;
  --intro-primary-reveal: 0;
  --intro-secondary-reveal: 0;
  --intro-accent-pulse: 0;
  --particle-progress: 0;
  --transition-cover: 0;
  --header-height: 5.25rem;
  --page-gutter: clamp(1.25rem, 3.8vw, 4.5rem);
  --copy-gutter: clamp(1.5rem, 8.8vw, 9rem);
  font-family: "Avenir Next", Avenir, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--void);
  color: var(--ion-white);
}

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

html {
  min-width: 20rem;
  background: var(--void);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: hidden;
  background:
    linear-gradient(115deg, rgba(109, 91, 255, 0.055), transparent 34%),
    var(--void);
  color: var(--ion-white);
}

button,
a {
  font: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--electric-cyan);
  outline-offset: 5px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero {
  position: relative;
  height: 100svh;
  min-height: 44rem;
  background: var(--void);
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 38rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__stage::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 0, 18, 0.98) 0%, rgba(6, 0, 18, 0.86) 38%, rgba(6, 0, 18, 0.22) 68%, rgba(6, 0, 18, 0.7) 100%),
    repeating-linear-gradient(90deg, rgba(244, 247, 255, 0.018) 0 1px, transparent 1px 8vw);
}

.signal-canvas,
.signal-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-particle-canvas {
  position: fixed;
  z-index: 90;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.particles-active .hero-particle-canvas {
  opacity: 1;
  visibility: visible;
}

.particle-material-active .hero__entry {
  opacity: 0;
  transition: none;
}

.particle-material-active .hero__entry-arrow {
  animation-play-state: paused;
}

.signal-canvas {
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  transform: none;
}

.signal-fallback {
  z-index: -2;
  visibility: visible;
  opacity: 0.72;
  transform: translateX(calc(var(--hero-progress) * -5vw));
}

.canvas-ready .signal-canvas {
  visibility: visible;
  opacity: calc(1 - var(--hero-progress) * 0.08);
}

.canvas-pending .signal-fallback,
.canvas-ready .signal-fallback {
  visibility: hidden;
  opacity: 0;
}

.canvas-fallback .signal-canvas {
  visibility: hidden;
  opacity: 0;
}

.canvas-fallback .signal-fallback {
  visibility: visible;
  opacity: 0.72;
}

.hero__copy {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: var(--copy-gutter);
  width: min(44vw, 47rem);
  transform: translate3d(calc(var(--hero-progress) * -4vw), -47%, 0);
  opacity: clamp(0, calc(1 - var(--hero-progress) * 1.22), 1);
}

html[data-intro-phase="headline"] .site-header,
html[data-intro-phase="settle"] .site-header,
html[data-intro-phase="headline"] .site-footer,
html[data-intro-phase="settle"] .site-footer {
  opacity: 0;
}

.hero__eyebrow {
  margin: 0 0 1.7rem;
  color: var(--signal-violet);
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.58rem, 0.72vw, 0.72rem);
  line-height: 1.5;
  letter-spacing: 0.26em;
}

.hero__title {
  margin: 0;
  max-width: 9.5em;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: clamp(3.1rem, 5.55vw, 6.2rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.hero__title > span {
  position: relative;
  display: block;
}

.hero__title > [data-intro="headline1"] {
  --line-reveal: var(--intro-primary-reveal);
}

.hero__title > [data-intro="headline2"] {
  --line-reveal: var(--intro-secondary-reveal);
}

html[data-intro-phase="headline"] .hero__title > [data-intro="headline1"],
html[data-intro-phase="headline"] .hero__title > [data-intro="headline2"] {
  clip-path: inset(0 calc((1 - var(--line-reveal)) * 100%) 0 0);
  opacity: clamp(0, calc(var(--line-reveal) * 2), 1);
  transform: none;
}

.hero__title > .hero__statement {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0;
}

.hero__phrase {
  white-space: nowrap;
}

html[lang="en"] .hero__title > .hero__statement {
  column-gap: 0.22em;
}

html[lang="en"] .hero__title {
  max-width: 11.5em;
  font-family: "Avenir Next", Avenir, sans-serif;
  font-size: clamp(2.9rem, 4.9vw, 5.5rem);
  letter-spacing: -0.045em;
}

.state-word {
  color: var(--electric-cyan);
  text-shadow:
    0 0 1.3rem rgba(0, 212, 255, 0.2),
    0 0 calc(var(--intro-accent-pulse) * 1.8rem)
      rgba(0, 212, 255, calc(var(--intro-accent-pulse) * 0.72));
}

.hero__body {
  max-width: 37rem;
  margin: 1.65rem 0 0;
  color: var(--muted-signal);
  font-size: clamp(0.92rem, 1.1vw, 1.1rem);
  line-height: 1.9;
  letter-spacing: 0.015em;
  min-height: 4.1em;
  opacity: clamp(0, calc(var(--intro-typing-progress) * 4), 1);
}

.hero__type-cursor {
  display: inline-block;
  width: 1px;
  height: 1.2em;
  margin-left: 0.16em;
  background: var(--electric-cyan);
  vertical-align: -0.18em;
  animation: type-cursor 720ms steps(1, end) infinite;
}

html[data-intro-phase="headline"] .hero__eyebrow,
html[data-intro-phase="settle"] .hero__eyebrow,
html[data-intro-phase="headline"] .hero__body,
html[data-intro-phase="settle"] .hero__body {
  opacity: 0;
}

.hero__entry {
  --hero-entry-gradient: linear-gradient(100deg, var(--signal-violet), var(--electric-cyan) 56%, var(--bio-green));
  position: relative;
  display: block;
  padding: 1.5px;
  border-radius: 999px;
  background: transparent;
  color: var(--ion-white);
  text-decoration: none;
  pointer-events: auto;
  box-shadow: 0 0 0 rgba(0, 212, 255, 0);
  transition: transform 220ms ease, box-shadow 220ms ease, background 260ms ease;
}

.hero__entry::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--hero-entry-gradient);
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.hero__entry-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  min-width: clamp(13rem, 18vw, 16rem);
  padding: 0.82rem 1.45rem;
  border-radius: inherit;
  background: transparent;
  font-family: "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  letter-spacing: 0.08em;
  transition: background 260ms ease, color 260ms ease;
}

.hero__entry:hover,
.hero__entry:focus-visible {
  background: var(--hero-entry-gradient);
  transform: translateY(-0.18rem);
  box-shadow: 0 0 2.2rem rgba(0, 212, 255, 0.2);
}

.particle-material-armed .hero__entry {
  background: var(--hero-entry-gradient);
}

.hero__entry-label {
  position: relative;
  white-space: nowrap;
}

.hero__entry-arrow {
  color: currentColor;
  font-size: 0.82rem;
  animation: portal-arrow 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.hero__portal {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 1.15rem;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  opacity: var(--intro-cta-progress);
  transform: translate3d(-50%, calc((1 - var(--intro-cta-progress)) * 1rem), 0);
  pointer-events: none;
}

.hero__portal-hint {
  color: rgba(244, 247, 255, 0.32);
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 0.48rem;
  letter-spacing: 0.18em;
}

.hero__portal-hint--touch {
  display: none;
}

.hero__reveal {
  position: fixed;
  z-index: 80;
  inset: 0;
  background: radial-gradient(circle at 50% 72%, rgba(0, 212, 255, 0.09), transparent 28%), var(--void);
  opacity: var(--transition-cover);
  pointer-events: none;
}

@keyframes portal-arrow {
  0%, 100% { transform: translateY(0); opacity: 0.46; }
  50% { transform: translateY(0.3rem); opacity: 1; }
}

@keyframes type-cursor {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.site-footer {
  opacity: calc(1 - var(--hero-progress) * 0.8);
}

@media (max-width: 980px) {
  .hero__copy {
    width: min(52vw, 38rem);
  }

  .hero__title {
    font-size: clamp(3rem, 6.6vw, 5.2rem);
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 4.4rem;
    --page-gutter: 1.25rem;
    --copy-gutter: 1.35rem;
  }

  .hero {
    min-height: 48rem;
  }

  .hero__stage::before {
    background:
      linear-gradient(180deg, rgba(6, 0, 18, 0.84) 0%, rgba(6, 0, 18, 0.64) 44%, rgba(6, 0, 18, 0.38) 72%, rgba(6, 0, 18, 0.92) 100%),
      repeating-linear-gradient(90deg, rgba(244, 247, 255, 0.016) 0 1px, transparent 1px 22vw);
  }

  .signal-canvas {
    transform: none;
  }

  .signal-fallback {
    opacity: 0.48;
    transform: translate3d(4vw, 16vh, 0) scale(1.16);
  }

  .canvas-fallback .signal-fallback {
    opacity: 0.48;
  }

  .hero__copy {
    top: 46%;
    left: var(--copy-gutter);
    width: calc(100vw - 2.7rem);
    transform: translate3d(calc(var(--hero-progress) * -5vw), -50%, 0);
  }

  .hero__eyebrow {
    max-width: 24rem;
    margin-bottom: 1.25rem;
    font-size: 0.56rem;
    letter-spacing: 0.18em;
  }

  .hero__title {
    max-width: 8.8em;
    font-size: clamp(2.85rem, 12vw, 4.4rem);
    line-height: 1.07;
  }

  html[lang="en"] .hero__title {
    max-width: 9.6em;
    font-size: clamp(2.5rem, 10.4vw, 3.9rem);
  }

  .hero__body {
    max-width: 31rem;
    margin-top: 1.35rem;
    color: rgba(176, 187, 214, 0.88);
    font-size: 0.9rem;
    line-height: 1.78;
  }

  .hero__portal {
    bottom: 1.05rem;
  }

  .site-footer {
    display: none;
  }

  .hero__portal-hint--desktop {
    display: none;
  }

  .hero__portal-hint--touch {
    display: inline;
  }
}

@media (max-width: 380px), (max-height: 680px) {
  .hero__copy {
    top: 48%;
  }

  .hero__title {
    font-size: clamp(2.45rem, 10.8vw, 3.4rem);
  }

  .hero__body {
    font-size: 0.82rem;
    line-height: 1.62;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .signal-canvas {
    display: none;
  }

  .hero-particle-canvas {
    display: none;
  }

  .particle-material-active .hero__entry {
    opacity: 1;
  }

  .signal-fallback,
  .canvas-pending .signal-fallback,
  .canvas-ready .signal-fallback,
  .canvas-fallback .signal-fallback {
    visibility: visible;
    opacity: 0.58;
    transform: none;
  }

  .hero__entry-arrow,
  .hero__type-cursor {
    animation: none;
  }

  .hero__reveal {
    transition: none;
  }
}