:root {
  color-scheme: dark;
  --black: #000;
  --white: #f2f2f2;
  --muted: #777;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--black);
}

body { overflow: hidden; }

button { font: inherit; }

.opening {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  color: var(--white);
}

.message-stage {
  position: absolute;
  top: 29%;
  left: 50%;
  width: min(900px, calc(100vw - 40px));
  transform: translateX(-50%);
  transition: opacity .46s ease, transform .62s cubic-bezier(.2, .7, .2, 1), filter .46s ease;
}

.message-stage.is-clearing {
  opacity: 0;
  filter: blur(8px);
  transform: translate(-50%, -12px);
}

.message-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  min-width: 0;
  text-align: center;
}

.typed-line {
  min-height: 1.5em;
  min-width: 0;
  margin: 0;
  color: #858585;
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 15px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .12em;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(8px);
  transition: opacity .7s ease, filter .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

.translation-line {
  min-height: 1.5em;
  margin: 0;
  color: #e3e3e3;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: clamp(25px, 3.5vw, 42px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .1em;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
  transition: opacity .8s ease, filter .95s ease, transform .95s cubic-bezier(.2, .7, .2, 1);
}

.message-stage.is-chinese .translation-line,
.message-stage.is-english .typed-line { opacity: 1; filter: blur(0); transform: translateY(0); }

.particle-field {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.opening[data-phase="forming"] .particle-field,
.opening[data-phase="complete"] .particle-field { opacity: 1; }

.opening[data-phase="complete"] .particle-field { opacity: 1; }

.final-mark {
  position: absolute;
  z-index: 2;
  top: 48%;
  left: 50%;
  width: min(90vw, 940px);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 12px));
  filter: blur(8px);
  transition: opacity .72s ease, transform .9s cubic-bezier(.2, .7, .2, 1), filter .85s ease;
  pointer-events: auto;
}

.opening[data-phase="complete"] .final-mark {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%);
}

.wordmark {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(48px, 13.2vw, 158px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 35px rgba(255, 255, 255, .1);
}

.wordmark span { display: inline-block; }
.wordmark span:nth-child(1) { color: #CEFA68; text-shadow: 0 0 34px rgba(206, 250, 104, .24); }
.wordmark span:nth-child(n+2) { color: #e6e6e6; text-shadow: 0 0 26px rgba(255, 255, 255, .1); }

.tagline {
  margin: clamp(20px, 3.2vh, 38px) 0 0;
  color: #969696;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(12px, 1.15vw, 15px);
  font-weight: 400;
  letter-spacing: .48em;
  text-indent: .48em;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .65s ease .27s, transform .65s ease .27s;
}

.opening[data-phase="complete"] .tagline {
  opacity: .78;
  transform: translateY(0);
}

.enter-studio {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: clamp(36px, 6vh, 64px);
  padding: 12px 16px;
  border: 1px solid rgba(206, 250, 104, .34);
  border-radius: 3px;
  color: #d7fa9e;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s ease .35s, transform .55s ease .35s, border-color .2s ease, background .2s ease;
}

.opening[data-phase="complete"] .enter-studio { opacity: 1; transform: translateY(0); }
.enter-studio:hover { border-color: rgba(206, 250, 104, .72); background: rgba(206, 250, 104, .07); }
.enter-studio:focus-visible { outline: 1px solid #cefa68; outline-offset: 4px; }

.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;
}

@media (max-width: 620px) {
  .message-stage { top: 25%; width: calc(100vw - 32px); }
  .message-copy { gap: 11px; }
  .typed-line { font-size: clamp(10px, 2.9vw, 13px); letter-spacing: .07em; }
  .translation-line { font-size: clamp(22px, 6vw, 30px); letter-spacing: .06em; }
  .wordmark { font-size: clamp(47px, 14vw, 82px); }
  .tagline { letter-spacing: .34em; text-indent: .34em; }
  .enter-studio { margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .message-stage, .particle-field, .final-mark, .tagline { transition-duration: .01ms !important; }
}

.bamboo-transition[hidden] { display:none!important; }
.bamboo-transition { position:absolute; left:50%; top:39%; width:min(1500px,100vw); height:90svh; transform:translate(-50%,-50%); z-index:1; pointer-events:none; opacity:0; transition:opacity 1.8s ease; mask-image:radial-gradient(ellipse at center,#000 30%,transparent 73%); -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 73%); }
.bamboo-transition.is-ready { opacity:.62; }
.bamboo-transition iframe { display:block; width:100%; height:100%; border:0; background:transparent; }
.final-mark { z-index:4; }
.wordmark { text-shadow:0 2px 26px #000,0 0 45px #000; }
.tagline { text-shadow:0 1px 12px #000; }
.enter-studio { background:#000b; }
@media (max-width:750px) { .bamboo-transition { width:145vw; height:80svh; } }
@media (prefers-reduced-motion:reduce) { .bamboo-transition { transition:none; } }

.bamboo-announcement { position:absolute; z-index:4; top:76svh; left:50%; width:90%; transform:translateX(-50%); text-align:center; pointer-events:none; }
.bamboo-announcement h2 { margin:0; font-family:var(--mono),"Microsoft YaHei",sans-serif; font-size:clamp(24px,3.2vw,42px); font-weight:400; line-height:1.35; letter-spacing:.16em; text-indent:.16em; color:#b9c7ac; text-shadow:0 0 22px #b4df4c15; opacity:0; visibility:hidden; transform:translateY(9px); filter:blur(5px); transition:opacity .85s ease,transform .85s ease,filter .85s ease; }
.bamboo-announcement h2 span:first-child { color:#cefa68; text-shadow:0 0 24px #cefa6822; }
.bamboo-announcement .bamboo-comma { color:#637453; }
.bamboo-announcement p { margin:28px 0 0; font-family:var(--mono),"Microsoft YaHei",sans-serif; font-size:clamp(11px,1vw,14px); line-height:1.6; letter-spacing:.18em; color:#77836e; opacity:0; visibility:hidden; transform:translateY(7px); filter:blur(4px); transition:opacity .8s ease 1.15s,transform .8s ease 1.15s,filter .8s ease 1.15s; }
.opening.bamboo-finished .bamboo-announcement h2,.opening.bamboo-finished .bamboo-announcement p { opacity:1; visibility:visible; transform:translateY(0); filter:blur(0); }
@media (max-height:600px) { .bamboo-announcement { top:79svh; } .bamboo-announcement h2 { font-size:25px; } .bamboo-announcement p { margin-top:16px; font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .bamboo-announcement h2,.bamboo-announcement p { transition:none; } }