* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  font-family: Georgia, 'Times New Roman', serif;
}

/* PAGE BASE */
.page {
  display: none;
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #000;
}

.page.active {
  display: block;
}

/* HOME */
.home {
  min-height: 100vh;
  padding: 2.5vh 0 4vh;
  text-align: center;
  overflow: hidden;
}

.home.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-stage {
  position: relative;
  width: min(82vw, 1220px);
  max-width: 1220px;
  margin: 0 auto;
  line-height: 0;
  animation: homeBreath 7s ease-in-out infinite;
}

picture {
  display: block;
  width: 100%;
  line-height: 0;
}

.home-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 94vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: brightness(.96) contrast(1.06);
}

/* HOTSPOT BASE */
.hotspot {
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 30;
}

/* PC ENTER 透明点击区 */
.enter {
  left: 36.5%;
  top: 74%;
  width: 27%;
  height: 7.5%;
}

/* ABOUT / SECOND PAGE */
.about {
  min-height: auto;
  height: auto;
  overflow: visible;
  background: #000;
  text-align: center;
}

/* 第二页图片：按原比例显示，可以滚动 */
.about-img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  object-fit: unset;
  object-position: center top;
  z-index: 0;
  background: #000;
  filter: brightness(.96) contrast(1.06);
}

/* 不要旧卡片 */
.about-content,
.about-panel {
  display: none !important;
}

/* 去掉旧遮罩，避免压暗和挡内容 */
.about::after {
  display: none !important;
}

/* BACK 透明点击区：图片里已经有 BACK 字 */
.back {
  left: 2.8%;
  top: 2.8%;
  width: 150px;
  height: 56px;

  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;

  z-index: 999;
}

.back::before {
  content: "";
}

/* SHINE */
.shine-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(circle at 12% 38%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 9%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 45%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 36%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 73%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255,255,255,.13) 50%, transparent 58%, transparent 100%);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    260% 260%;
  animation:
    tinyBlink 1.8s ease-in-out infinite alternate,
    sweep 5.8s linear infinite;
}

/* 第二页闪光层固定，不影响滚动 */
.about .shine-layer {
  position: fixed;
}

.shine-layer.subtle {
  opacity: .32;
}

/* SPARKLE */
.diamond-sparkle {
  position: absolute;
  z-index: 6;
  width: 7px;
  height: 7px;
  pointer-events: none;
  opacity: 0;
}

.diamond-sparkle::before,
.diamond-sparkle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 14px rgba(255,255,255,.85);
}

.diamond-sparkle::before {
  width: 1px;
  height: 18px;
}

.diamond-sparkle::after {
  width: 18px;
  height: 1px;
}

.s1 { left: 18%; top: 12%; animation: starFlash 2.6s ease-in-out infinite; }
.s2 { left: 49%; top: 8%; animation: starFlash 3.1s ease-in-out .45s infinite; }
.s3 { left: 78%; top: 14%; animation: starFlash 2.8s ease-in-out .9s infinite; }
.s4 { left: 94%; top: 55%; animation: starFlash 3.3s ease-in-out 1.2s infinite; }

/* ANIMATIONS */
@keyframes homeBreath {
  0%, 100% {
    transform: translateY(-1vh) scale(.985);
    filter: brightness(.92);
  }

  50% {
    transform: translateY(-1vh) scale(1.01);
    filter: brightness(1.08);
  }
}

@keyframes tinyBlink {
  from {
    filter: brightness(.75);
    opacity: .28;
  }

  to {
    filter: brightness(1.5);
    opacity: .78;
  }
}

@keyframes sweep {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, -120% -120%;
  }

  to {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 120% 120%;
  }
}

@keyframes starFlash {
  0%, 100% {
    opacity: 0;
    transform: scale(.2) rotate(0deg);
  }

  45% {
    opacity: .95;
    transform: scale(1.25) rotate(45deg);
  }

  60% {
    opacity: .35;
    transform: scale(.8) rotate(80deg);
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .page {
    min-height: auto;
  }

  .home {
    min-height: auto;
    padding: 0;
    overflow: visible;
  }

  .home.active {
    display: block;
  }

  .home-stage {
    width: 100vw;
    max-width: none;
    margin: 0;
    animation: none;
  }

  .home-img {
    width: 100vw;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* 手机 ENTER 透明点击区 */
  .enter {
    left: 16%;
    top: 87.5%;
    width: 68%;
    height: 8.5%;
  }

  .shine-layer {
    opacity: .42;
  }

  .s4 {
    display: none;
  }

  .about {
    min-height: auto;
    height: auto;
    overflow: visible;
  }

  .about-img {
    width: 100vw;
    height: auto;
    max-width: none;
  }

  .back {
    left: 3%;
    top: 2%;
    width: 115px;
    height: 48px;
  }
}

/* ABOUT RESPONSIVE IMAGE FIX */
#about picture {
  display: block;
  width: 100%;
  line-height: 0;
}

#about .about-img {
  display: block;
  width: 100%;
  height: auto;
}

/* PHONE LANDSCAPE FIX */
@media (orientation: landscape) and (max-height: 520px) {
  .page {
    min-height: auto;
  }

  .home {
    min-height: auto;
    padding: 0;
    overflow: visible;
  }

  .home.active {
    display: block;
  }

  .home-stage {
    width: 100vw;
    max-width: none;
    margin: 0;
    animation: none;
  }

  .home-img {
    width: 100vw;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  .enter {
    left: 16%;
    top: 87.5%;
    width: 68%;
    height: 8.5%;
  }

  .about {
    min-height: auto;
    height: auto;
    overflow: visible;
  }

  .about-img {
    width: 100vw;
    height: auto;
    max-width: none;
  }

  .back {
    left: 3%;
    top: 2%;
    width: 115px;
    height: 48px;
  }

  .shine-layer {
    opacity: .36;
  }
}