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

:root {
  color-scheme: dark;
  font-family: "STZhongsong", "Songti SC", "STSong", "SimSun", serif;
  background: #01050c;
}

body {
  display: grid;
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  place-items: center;
  background: #01050c;
}

button {
  font: inherit;
}

.screen {
  position: relative;
  grid-area: 1 / 1;
  width: min(100vw, calc(100svh * 941 / 1672));
  height: min(100svh, calc(100vw * 1672 / 941));
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  container-type: inline-size;
  color: #f3dfbd;
  background: #030a15;
}

.screen-one {
  transition: opacity 0.72s ease, filter 0.72s ease;
}

.screen-one.is-leaving {
  opacity: 0;
  filter: brightness(0.7) blur(1px);
  pointer-events: none;
}

.night-sky,
.clouds,
.clouds img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.night-sky {
  z-index: -5;
  object-fit: fill;
  filter: brightness(0.76) saturate(0.74) contrast(1.04);
}

.clouds {
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

.clouds img {
  object-fit: fill;
  opacity: 0.66;
  filter: brightness(0.61) saturate(0.68);
  will-change: transform, opacity;
  transition: transform 1.85s cubic-bezier(0.2, 0.72, 0.2, 1), opacity 1.85s ease;
}

.clouds-lower {
  -webkit-mask-image: linear-gradient(to bottom, transparent 38%, rgba(0, 0, 0, 0.45) 45%, #000 54%);
  mask-image: linear-gradient(to bottom, transparent 38%, rgba(0, 0, 0, 0.45) 45%, #000 54%);
  animation: lowerCloudDrift 28s ease-in-out infinite alternate;
}

.clouds-left,
.clouds-right {
  clip-path: inset(0 50% 0 0);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 43%, rgba(0, 0, 0, 0.7) 48%, transparent 57%);
  mask-image: linear-gradient(to bottom, #000 0 43%, rgba(0, 0, 0, 0.7) 48%, transparent 57%);
  animation: leftCloudDrift 24s ease-in-out infinite alternate;
}

.clouds-right {
  clip-path: inset(0 0 0 50%);
  animation-name: rightCloudDrift;
  animation-delay: -9s;
}

.clouds-left img,
.clouds-right img {
  opacity: 0.86;
  filter: brightness(0.74) saturate(0.62);
}

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

.stars i {
  position: absolute;
  width: 0.42cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.18;
  background: #fff0ce;
  box-shadow: 0 0 1.2cqw 0.18cqw rgba(255, 229, 181, 0.6);
  animation: starBlink 5.5s ease-in-out infinite;
}

.stars i:nth-child(1) { top: 11%; left: 29%; animation-delay: -1.1s; }
.stars i:nth-child(2) { top: 16%; right: 8%; animation-delay: -4.2s; }
.stars i:nth-child(3) { top: 42%; left: 6%; animation-delay: -2.8s; }
.stars i:nth-child(4) { top: 83%; right: 14%; animation-delay: -0.5s; }

.moon-control {
  position: absolute;
  z-index: 3;
  top: 12.55%;
  left: 20.2%;
  width: 59.6%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.moon-texture {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: url("/assets/screen-01-night-sky.png");
  background-repeat: no-repeat;
  background-position: left -20.2cqw top -22.3cqw;
  background-size: 100cqw auto;
  filter: brightness(1);
  animation: moonBreath 5.8s ease-in-out infinite;
  will-change: transform, filter;
  transition: filter 1.45s ease, transform 1.45s cubic-bezier(0.2, 0.72, 0.2, 1);
  pointer-events: none;
}

.moon-control::after {
  content: "";
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.72);
  background: radial-gradient(circle, rgba(255, 244, 215, 0.22) 0 46%, rgba(255, 224, 172, 0.12) 58%, transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.moon-glow {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  opacity: 0.12;
  background: radial-gradient(circle, rgba(255, 248, 226, 0.16) 0 50%, rgba(255, 226, 178, 0.09) 58%, transparent 72%);
  transition: opacity 1.45s ease, transform 1.45s cubic-bezier(0.2, 0.72, 0.2, 1);
  pointer-events: none;
}

.moon-control:focus-visible,
.enter-button:focus-visible {
  outline: 1px solid rgba(255, 238, 203, 0.92);
  outline-offset: 0.8cqw;
}

.intro-copy {
  position: absolute;
  z-index: 4;
  top: 53.2%;
  inset-inline: 5%;
  text-align: center;
  text-shadow: 0 0.3cqw 2.4cqw rgba(0, 0, 0, 0.82);
}

h1,
p {
  margin: 0;
}

.brand-cn,
.brand-en {
  display: block;
}

.brand-cn {
  padding-left: 0.11em;
  font-size: 9cqw;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.11em;
  color: #f2dcb8;
}

.brand-en {
  margin-top: 2.2cqw;
  padding-left: 0.54em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.85cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.62em;
  color: rgba(236, 216, 182, 0.92);
}

.opening {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.7cqw;
  margin-top: 4.4cqw;
  font-size: 3cqw;
  line-height: 1;
  letter-spacing: 0.38em;
  color: rgba(237, 218, 186, 0.88);
}

.opening span {
  width: 6.3cqw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 216, 174, 0.78));
}

.opening span:last-child {
  transform: scaleX(-1);
}

.tagline {
  margin-top: 5.8cqw;
  font-size: 3cqw;
  line-height: 1.5;
  letter-spacing: 0.16em;
  color: rgba(226, 216, 201, 0.72);
}

.enter-button {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 17.8%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.5cqw;
  width: 43.7%;
  min-height: 6.5%;
  padding: 1.4cqw 3.5cqw;
  border: 1px solid rgba(241, 213, 168, 0.66);
  border-radius: 999px;
  color: #f2dab3;
  background: linear-gradient(180deg, rgba(248, 222, 177, 0.11), rgba(130, 151, 167, 0.08));
  box-shadow: inset 0 0 4cqw rgba(255, 238, 205, 0.04), 0 0 2.2cqw rgba(236, 207, 161, 0.14);
  backdrop-filter: blur(0.9cqw);
  cursor: pointer;
  transform: translateX(-50%);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 2.6s cubic-bezier(0.22, 0.65, 0.3, 1), filter 2.6s cubic-bezier(0.22, 0.65, 0.3, 1), color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.enter-button span {
  font-size: 3.85cqw;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.enter-button i {
  position: relative;
  width: 3.1cqw;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background: #f5dfb7;
  box-shadow: 0 0 1.5cqw rgba(255, 229, 183, 0.62);
}

.enter-button i::after {
  content: "";
  position: absolute;
  top: -9%;
  left: 33%;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  background: #263344;
}

.enter-button.is-pressed {
  color: #fff1d4;
  border-color: rgba(255, 232, 191, 0.98);
  background: rgba(255, 226, 178, 0.2);
  box-shadow: 0 0 4.8cqw rgba(255, 220, 168, 0.42), inset 0 0 3cqw rgba(255, 240, 211, 0.12);
}

footer {
  position: absolute;
  z-index: 3;
  bottom: 5.45%;
  width: 100%;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65cqw;
  line-height: 1;
  letter-spacing: 0.42em;
  color: rgba(213, 200, 181, 0.53);
}

.intro-copy,
.enter-button,
footer {
  opacity: 0;
  filter: brightness(0.28) blur(1.2px);
}

.intro-copy,
footer {
  transition: opacity 2.6s cubic-bezier(0.22, 0.65, 0.3, 1), filter 2.6s cubic-bezier(0.22, 0.65, 0.3, 1);
}

.screen.is-ready .intro-copy,
.screen.is-ready .enter-button,
.screen.is-ready footer {
  opacity: 1;
  filter: brightness(1) blur(0);
}

.screen.is-moon-awake .clouds-left img {
  opacity: 0.16;
  transform: translate3d(-24%, -1%, 0) scale(0.98);
}

.screen.is-moon-awake .clouds-right img {
  opacity: 0.16;
  transform: translate3d(24%, -1%, 0) scale(0.98);
}

.screen.is-moon-awake .moon-texture {
  animation: none;
  filter: brightness(1.1);
  transform: scale(1.012);
}

.screen.is-moon-awake .moon-control::after {
  animation: moonReveal 1.45s cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
}

.screen.is-moon-awake .moon-glow {
  opacity: 0.58;
  transform: scale(1.04);
}

.screen.is-entering .moon-control::after {
  animation: moonReply 0.7s ease-out both;
}

.screen-two {
  visibility: hidden;
  opacity: 0;
  background: #020914;
  transition: opacity 0.72s ease;
}

.screen-two.is-visible {
  visibility: visible;
  opacity: 1;
}

.screen-two-sky {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: brightness(0.78) saturate(0.73) contrast(1.04);
  animation: screenTwoSkyBreath 24s ease-in-out infinite alternate;
}

.back-button {
  position: absolute;
  z-index: 6;
  top: 5.65%;
  left: 5.65%;
  display: grid;
  width: 7.2cqw;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(242, 220, 181, 0.62);
  border-radius: 50%;
  place-items: center;
  color: #f5dfbc;
  background: rgba(11, 19, 29, 0.58);
  box-shadow: inset 0 0 2.6cqw rgba(255, 236, 199, 0.06), 0 0 2.2cqw rgba(232, 202, 154, 0.13);
  backdrop-filter: blur(0.7cqw);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.back-button i {
  width: 2.25cqw;
  aspect-ratio: 1;
  margin-left: 0.75cqw;
  border-left: 0.42cqw solid currentColor;
  border-bottom: 0.42cqw solid currentColor;
  transform: rotate(45deg);
}

.back-button:hover,
.back-button:focus-visible {
  border-color: rgba(255, 235, 199, 0.95);
  box-shadow: 0 0 3cqw rgba(239, 209, 164, 0.28);
  outline: none;
  transform: translateY(-0.3cqw);
}

.screen-two-brand {
  position: absolute;
  z-index: 3;
  top: 9.35%;
  left: 24%;
  width: 52%;
  text-align: center;
  text-shadow: 0 0.3cqw 2.4cqw rgba(0, 0, 0, 0.82);
}

.screen-two-brand .brand-cn {
  padding-left: 0.1em;
  font-size: 5.7cqw;
  line-height: 1;
  letter-spacing: 0.12em;
}

.screen-two-brand .brand-en {
  margin-top: 2.1cqw;
  padding-left: 0.48em;
  font-size: 2.05cqw;
  letter-spacing: 0.5em;
}

.screen-two-brand .opening {
  gap: 2.5cqw;
  margin-top: 3.1cqw;
  font-size: 2.25cqw;
  letter-spacing: 0.36em;
}

.screen-two-brand .opening span {
  width: 4.8cqw;
}

.reason-copy {
  position: absolute;
  z-index: 4;
  top: 23.7%;
  inset-inline: 8%;
  text-align: center;
  text-shadow: 0 0.3cqw 2.4cqw rgba(0, 0, 0, 0.9);
}

.reason-copy h2 {
  margin: 0;
  padding-left: 0.08em;
  font-size: 5.55cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #f3dbb3;
}

.reason-copy p {
  margin-top: 3.1cqw;
  padding-left: 0.14em;
  font-size: 2.9cqw;
  line-height: 1.3;
  letter-spacing: 0.14em;
  color: rgba(232, 213, 182, 0.8);
}

.reason-grid {
  position: absolute;
  z-index: 5;
  top: 33.5%;
  left: 9.55%;
  display: grid;
  width: 80.9%;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.35cqw 3.45cqw;
}

.reason-card {
  display: flex;
  height: 25.45cqw;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2.7cqw 2cqw 2.4cqw;
  border: 1px solid rgba(236, 213, 176, 0.65);
  border-radius: 3.55cqw;
  color: #f3dbb2;
  background: linear-gradient(155deg, rgba(69, 72, 75, 0.38), rgba(8, 16, 27, 0.79) 44%, rgba(20, 28, 38, 0.87));
  box-shadow: inset 0 0 5cqw rgba(255, 241, 213, 0.035), 0 0 2.2cqw rgba(234, 205, 160, 0.11);
  backdrop-filter: blur(0.75cqw);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: cardDrift 8s ease-in-out infinite alternate;
  transition: border-color 0.26s ease, box-shadow 0.26s ease, background 0.26s ease, transform 0.26s ease;
}

.reason-card:nth-child(2n) {
  animation-delay: -4s;
}

.reason-card svg {
  width: 8.1cqw;
  height: 8.1cqw;
  margin-bottom: 2.5cqw;
  overflow: visible;
  filter: drop-shadow(0 0 0.8cqw rgba(255, 227, 181, 0.16));
}

.reason-card span {
  font-size: 3.15cqw;
  line-height: 1.35;
  letter-spacing: 0.07em;
  white-space: nowrap;
  text-shadow: 0 0.3cqw 1.6cqw rgba(0, 0, 0, 0.88);
}

.reason-card:hover,
.reason-card:focus-visible,
.reason-card.is-selected {
  border-color: rgba(255, 235, 199, 0.96);
  background: linear-gradient(155deg, rgba(100, 94, 84, 0.44), rgba(12, 21, 32, 0.8) 44%, rgba(25, 34, 44, 0.88));
  box-shadow: inset 0 0 5cqw rgba(255, 240, 210, 0.07), 0 0 3.5cqw rgba(242, 212, 166, 0.36);
  outline: none;
  animation: none;
  transform: translateY(-0.65cqw) scale(1.012);
}

.screen-two-footer {
  bottom: 6.9%;
}

.screen-three-placeholder[hidden] {
  display: none;
}

.screen-three-placeholder {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  background: rgba(2, 7, 15, 0.94);
  transition: opacity 0.38s ease;
}

.screen-three-placeholder.is-visible {
  opacity: 1;
}

.screen-three-placeholder p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2cqw;
  letter-spacing: 0.36em;
  color: rgba(232, 215, 187, 0.62);
}

@keyframes screenTwoSkyBreath {
  from { transform: scale(1); }
  to { transform: scale(1.006); }
}

@keyframes cardDrift {
  from { transform: translateY(0); }
  to { transform: translateY(-0.24cqw); }
}

@keyframes moonBreath {
  0%, 100% { filter: brightness(1); transform: scale(0.997); }
  50% { filter: brightness(1.045); transform: scale(1.009); }
}

@keyframes moonReveal {
  0% { opacity: 0; transform: scale(0.72); }
  58% { opacity: 0.92; transform: scale(1.12); }
  100% { opacity: 0.42; transform: scale(1.02); }
}

@keyframes moonReply {
  0%, 100% { opacity: 0.42; transform: scale(1.02); }
  50% { opacity: 0.74; transform: scale(1.08); }
}

@keyframes leftCloudDrift {
  from { transform: translate3d(-1.8%, -0.2%, 0); }
  to { transform: translate3d(1.8%, 0.45%, 0); }
}

@keyframes rightCloudDrift {
  from { transform: translate3d(1.7%, 0.3%, 0); }
  to { transform: translate3d(-1.7%, -0.4%, 0); }
}

@keyframes lowerCloudDrift {
  from { transform: translate3d(-1.25%, 0.2%, 0); }
  to { transform: translate3d(1.25%, -0.35%, 0); }
}

@keyframes starBlink {
  0%, 80%, 100% { opacity: 0.16; transform: scale(0.72); }
  88% { opacity: 0.86; transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .clouds,
  .stars i,
  .moon-texture,
  .screen-two-sky,
  .reason-card {
    animation-duration: 32s;
  }

  .intro-copy,
  .enter-button,
  footer {
    transition-duration: 2s;
  }
}