/* =========================
     ENGLISH
     ========================= */

  @font-face {
    font-family: "Anty English";

    src:
      url("/assets/fonts/CormorantGaramond-Italic-VariableFont_wght.ttf")
      format("truetype");

    font-style: italic;

    font-weight: 300 700;

    font-display: swap;
  }


  /* =========================
     JAPANESE
     ========================= */

  @font-face {
    font-family: "Anty Japanese";

    src:
      url("/assets/fonts/NotoSerifJP-VariableFont_wght.ttf")
      format("truetype");

    font-style: normal;

    font-weight: 100 900;

    font-display: swap;
  }


  /* =========================
     CHINESE
     ========================= */

  @font-face {
    font-family: "Anty Chinese";

    src:
      url("/assets/fonts/NotoSerifSC-VariableFont_wght.ttf")
      format("truetype");

    font-style: normal;

    font-weight: 100 900;

    font-display: swap;
  }


  /* =========================
     BASE
     ========================= */

  * {
    box-sizing: border-box;
  }

  html,
  html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #d8d2c5;
}

  .font-test {
    display: grid;

    gap: 50px;

    max-width: 900px;

    margin: 0 auto;
  }

  section {
    padding: 30px;

    border: 1px solid rgba(70, 45, 70, 0.25);
  }


  /* =========================
     ENGLISH FONT
     ========================= */

  .english-title,
  .english-text {
    font-family:
      "Anty English",
      Georgia,
      serif;
  }

  .english-title {
    margin: 0;

    font-size: 72px;

    font-weight: 600;

    letter-spacing: 0.04em;
  }

  .english-text {
    font-size: 28px;
    
  }


  /* =========================
     CHINESE FONT
     ========================= */

  [lang="zh-CN"] {
    font-family:
      "Anty Chinese",
      "Songti SC",
      serif;
  }

  .chinese-title {
    font-size: 40px;

    font-weight: 700;

    letter-spacing: 0.08em;
  }


  /* =========================
     JAPANESE FONT
     ========================= */

  [lang="ja"] {
    font-family:
      "Anty Japanese",
      "Yu Mincho",
      serif;
  }

  .japanese-title {
    font-size: 40px;

    font-weight: 700;

    letter-spacing: 0.08em;
  }

.language-area {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.language-button {
  padding: 0;
  margin: 0;

  background: transparent;
  border: none;

  cursor: pointer;
}

.language-button img {
  display: block;

  width: clamp(150px, 16vw, 240px);
  height: auto;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.language-button:hover img {
  transform: scale(1.04);

  filter:
    drop-shadow(0 0 5px rgba(232, 200, 123, 0.45))
    drop-shadow(0 0 10px rgba(176, 126, 72, 0.25));
}


/* LANGUAGE 下方的紫色便签 */

.language-menu {
  position: absolute;

  top: calc(100% + 4px);
  right: 0;

  width: clamp(150px, 16vw, 240px);

  opacity: 0;
  visibility: hidden;

  transform: translateY(-8px) scale(0.96);

  transform-origin: top center;

  pointer-events: none;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}

.language-menu-bg {
  display: block;
  width: 100%;
  height: auto;
}

.language-options {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 6px;

  padding-top: 2px;
}

.language-option {
  appearance: none;
  border: none;
  background: transparent;

  padding: 2px 8px;

  font-family:
    "Anty English",
    "Anty Japanese",
    "Anty Chinese",
    serif;

  font-size: clamp(11px, 1.05vw, 15px);
  font-weight: 600;
  letter-spacing: 0.08em;

  color: #5a3828;

  cursor: pointer;

  text-shadow:
    0 0 3px rgba(255, 224, 145, 0.85),
    0 0 7px rgba(218, 171, 72, 0.55),
    0 0 12px rgba(156, 102, 35, 0.35);

  transition:
    transform 0.2s ease,
    color 0.2s ease,
    text-shadow 0.2s ease;
}

.language-option:hover {
  color: #ffe5a0;

  transform: scale(1.08);

  text-shadow:
    0 0 4px rgba(255, 240, 180, 1),
    0 0 9px rgba(230, 183, 77, 0.8),
    0 0 15px rgba(174, 112, 39, 0.5);
}


/* 打开菜单时 */

.language-menu.is-open {
  opacity: 1;
  visibility: visible;

  transform: translateY(0) scale(1);

  pointer-events: auto;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
}


.scene {
  position: relative;

  width: 100vw;
  height: 100vh;

  overflow: hidden;
}
/* 场景一离开动画 */
.scene-1 {
  background: #d8d2c5;

transition:
  opacity 1.1s ease,
  filter 1.1s ease,
  transform 1.1s ease;
}

.scene-1.is-leaving {
  opacity: 0;
  filter: blur(8px) brightness(0.55);
  transform: scale(1.025);
}
.scene-2 {
  position: fixed;
  inset: 0;

  opacity: 0;
  visibility: hidden;

  z-index: 30;

  transition:
    opacity 1.2s ease,
    visibility 1.2s ease;
}

.scene-2.is-active {
  opacity: 1;
  visibility: visible;
}
/* 场景二：默认隐藏 */
.scene-2 {
  position: fixed;
  inset: 0;

  opacity: 0;
  visibility: hidden;

  z-index: 30;

  transition:
    opacity 1.2s ease,
    visibility 1.2s ease;
}

/* 场景二出现 */
.scene-2.is-active {
  opacity: 1;
  visibility: visible;
}

/* 场景背景图 */
.scene-background {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: translate(-50%, -50%);

  z-index: 0;

  pointer-events: none;
}
.scene-map {
  position: absolute;

  left: 50%;
  top: 50%;

  aspect-ratio: 3 / 2;

  width: max(100vw, calc(100vh * 1.5));
  height: max(100vh, calc(100vw / 1.5));

  transform: translate(-50%, -50%);

  z-index: 10;

  pointer-events: none;
}
.scene-key {
  position: absolute;

  left: -0.8%;
  top: 29%;
  width: 14%;

  padding: 0;
  margin: 0;
  border: none;
  background: transparent;

  cursor: pointer;

  transform: rotate(-30deg);
  transform-origin: center;

  pointer-events: auto;
}

.scene-key img {
  display: block;
  width: 100%;
  height: auto;
}
.scene-2 {
  position: fixed;
  inset: 0;

  opacity: 0;
  visibility: hidden;

  z-index: 30;

  transition:
    opacity 1.2s ease,
    visibility 1.2s ease;
}

.scene-2.is-active {
  opacity: 1;
  visibility: visible;
}
/* 欢迎文字显示在场景背景上方 */
.scene-intro {
  position: relative;
  z-index: 5;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
 

  45% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    backdrop-filter:
      blur(2px)
      brightness(1);
    -webkit-backdrop-filter:
      blur(2px)
      brightness(1);
  }
.mist-overlay {
  position: absolute;
  inset: 0;

  z-index: 50;
  pointer-events: none;
  overflow: hidden;

  /* 很薄的湿润玻璃感 */
  background:
    linear-gradient(
      to bottom,
      rgba(238, 239, 234, 0.16),
      rgba(223, 226, 221, 0.10)
    );

  backdrop-filter:
    blur(10px)
    brightness(1.025)
    saturate(0.92);

  -webkit-backdrop-filter:
    blur(10px)
    brightness(1.025)
    saturate(0.92);

  opacity: 1;

  animation:
    softMistClear 3.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}


/* 很淡的一层水汽，不是白雾 */
.mist-overlay::before {
  content: "";

  position: absolute;
  inset: -12%;

  background:
    radial-gradient(
      ellipse at 38% 42%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(240, 242, 236, 0.10) 38%,
      transparent 68%
    ),
    radial-gradient(
      ellipse at 72% 65%,
      rgba(225, 231, 226, 0.12) 0%,
      transparent 60%
    );

  filter: blur(28px);

  opacity: 0.8;

  animation:
    vaporDrift 4s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}


@keyframes softMistClear {
  0% {
    opacity: 1;

    backdrop-filter:
      blur(10px)
      brightness(1.025)
      saturate(0.92);

    -webkit-backdrop-filter:
      blur(10px)
      brightness(1.025)
      saturate(0.92);
  }

  35% {
    opacity: 0.82;
  }

  70% {
    opacity: 0.38;

    backdrop-filter:
      blur(4px)
      brightness(1.01)
      saturate(0.97);

    -webkit-backdrop-filter:
      blur(4px)
      brightness(1.01)
      saturate(0.97);
  }

  100% {
    opacity: 0;

    backdrop-filter:
      blur(0px)
      brightness(1)
      saturate(1);

    -webkit-backdrop-filter:
      blur(0px)
      brightness(1)
      saturate(1);
  }
}


@keyframes vaporDrift {
  0% {
    opacity: 0.7;

    transform:
      translate(-1.5%, 1%)
      scale(1);
  }

  55% {
    opacity: 0.42;
  }

  100% {
    opacity: 0;

    transform:
      translate(2%, -1.5%)
      scale(1.05);
  }
}
/* ===== 场景一暖光萤火虫 ===== */

.fireflies {
  position: absolute;
  inset: 0;

  z-index: 20;

  overflow: hidden;
  pointer-events: none;
}

.fireflies span {
  position: absolute;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: rgba(255, 238, 155, 1);

box-shadow:
  0 0 6px rgba(255, 250, 205, 1),
  0 0 14px rgba(255, 226, 130, 1),
  0 0 28px rgba(255, 190, 75, 0.8),
  0 0 48px rgba(255, 165, 55, 0.4);
  opacity: 0.25;

  animation:
    fireflyFloat 8s ease-in-out infinite,
    fireflyGlow 3.5s ease-in-out infinite;
}


/* 每一颗位置不同 */

.fireflies span:nth-child(1) {
  left: 10%;
  top: 25%;
  animation-delay: -1s;
}

.fireflies span:nth-child(2) {
  left: 18%;
  top: 68%;
  animation-delay: -3s;
}

.fireflies span:nth-child(3) {
  left: 28%;
  top: 38%;
  animation-delay: -5s;
}

.fireflies span:nth-child(4) {
  left: 37%;
  top: 77%;
  animation-delay: -2s;
}

.fireflies span:nth-child(5) {
  left: 47%;
  top: 20%;
  animation-delay: -6s;
}

.fireflies span:nth-child(6) {
  left: 56%;
  top: 52%;
  animation-delay: -4s;
}

.fireflies span:nth-child(7) {
  left: 63%;
  top: 30%;
  animation-delay: -7s;
}

.fireflies span:nth-child(8) {
  left: 71%;
  top: 70%;
  animation-delay: -1.5s;
}

.fireflies span:nth-child(9) {
  left: 80%;
  top: 42%;
  animation-delay: -5.5s;
}

.fireflies span:nth-child(10) {
  left: 88%;
  top: 22%;
  animation-delay: -3.5s;
}

.fireflies span:nth-child(11) {
  left: 76%;
  top: 84%;
  animation-delay: -6.5s;
}

.fireflies span:nth-child(12) {
  left: 33%;
  top: 58%;
  animation-delay: -2.5s;
}
.fireflies span:nth-child(13) {
  left: 12%;
  top: 68%;
  animation-delay: -2.1s;
}

.fireflies span:nth-child(14) {
  left: 22%;
  top: 82%;
  animation-delay: -5.4s;
}

.fireflies span:nth-child(15) {
  left: 34%;
  top: 56%;
  animation-delay: -1.3s;
}

.fireflies span:nth-child(16) {
  left: 46%;
  top: 76%;
  animation-delay: -6.2s;
}

.fireflies span:nth-child(17) {
  left: 57%;
  top: 42%;
  animation-delay: -3.8s;
}

.fireflies span:nth-child(18) {
  left: 68%;
  top: 63%;
  animation-delay: -7.1s;
}

.fireflies span:nth-child(19) {
  left: 79%;
  top: 79%;
  animation-delay: -4.5s;
}

.fireflies span:nth-child(20) {
  left: 88%;
  top: 51%;
  animation-delay: -2.7s;
}

.fireflies span:nth-child(21) {
  left: 16%;
  top: 39%;
  animation-delay: -6.8s;
}

.fireflies span:nth-child(22) {
  left: 41%;
  top: 31%;
  animation-delay: -3.2s;
}

.fireflies span:nth-child(23) {
  left: 63%;
  top: 88%;
  animation-delay: -5.9s;
}

.fireflies span:nth-child(24) {
  left: 91%;
  top: 71%;
  animation-delay: -1.8s;
}


@keyframes fireflyFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(8px, -10px);
  }

  50% {
    transform: translate(-5px, -18px);
  }

  75% {
    transform: translate(10px, -7px);
  }
}


@keyframes fireflyGlow {
  0%,
  100% {
    opacity: 0.18;
  }

  45% {
    opacity: 0.75;
  }

  70% {
    opacity: 0.35;
  }
}
.antycore-logo {
  display: block;
  width: clamp(300px, 40vw, 520px);
  height: auto;

  position: relative;
  z-index: 30;

  margin: 0;

  pointer-events: none;
  transform: translate(-20px, -26px);
}
#welcomeText {
  position: fixed;
  left: 60%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 30;

  font-size: clamp(20px, 2.4vw, 40px);
  white-space: nowrap;

  color: #5a3828;

  text-shadow:
    0 0 3px rgba(255, 235, 170, 0.55),
    0 0 8px rgba(225, 184, 100, 0.30),
    0 0 14px rgba(190, 135, 65, 0.15);
}