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

.page {
  display: none;
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #000;
  animation: pageFade .55s ease;
  overflow: hidden;
}
.page.active { display: block; }

.home {
  min-height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2.5vh 0 4vh;
}
.home.active { display: flex; }

.home-stage {
  position: relative;
  width: min(78vw, 1220px);
  max-width: 1220px;
  transform: translateY(-1vh);
  animation: homeBreath 7s ease-in-out infinite;
}

.bg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100vh;
  object-fit: cover;
  user-select: none;
}
.home-img {
  min-height: 0;
  object-fit: contain;
  filter: brightness(.94) contrast(1.08);
}

.hotspot {
  position: absolute;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}
.hotspot:hover {
  box-shadow: 0 0 32px rgba(255,255,255,.55), inset 0 0 28px rgba(255,255,255,.12);
}
.enter {
  left: 36.5%;
  top: 74%;
  width: 27%;
  height: 7.5%;
  border: 1px solid rgba(255,255,255,.18);
  animation: buttonPulse 2.2s ease-in-out infinite;
}
.back { left: 2.2%; top: 2.2%; width: 10%; height: 4%; }

.shine-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .76;
  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.7s ease-in-out infinite alternate, sweep 5.5s linear infinite;
}
.about .shine-layer { position: fixed; }
.shine-layer.subtle { opacity: .48; }

.diamond-sparkle {
  position: absolute;
  z-index: 3;
  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; }
.s5 { left: 22%; top: 35%; animation: starFlash 2.9s ease-in-out .2s infinite; }
.s6 { left: 53%; top: 6%; animation: starFlash 3.4s ease-in-out .75s infinite; }
.s7 { left: 86%; top: 78%; animation: starFlash 3s ease-in-out 1.1s infinite; }

@keyframes homeBreath {
  0%, 100% { transform: translateY(-1vh) scale(.985); filter: brightness(.92); }
  50% { transform: translateY(-1vh) scale(1.01); filter: brightness(1.08); }
}
@keyframes pageFade {
  from { opacity: 0; transform: scale(1.012); filter: brightness(.75); }
  to { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes tinyBlink { from { filter: brightness(.75); opacity: .35; } to { filter: brightness(1.6); opacity: .9; } }
@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); } }
@keyframes buttonPulse { 0%, 100% { box-shadow: 0 0 12px rgba(255,255,255,.13); } 50% { box-shadow: 0 0 34px rgba(255,255,255,.38), inset 0 0 18px rgba(255,255,255,.08); } }

@media (max-width: 768px) {
  .home-stage { width: 112vw; }
  .about .bg { width: auto; height: 100vh; max-width: none; }
  .back { left: 1%; top: 1%; width: 20%; height: 6%; }
}