/* ============================================================
   Waygate landing — cinematic vertical camera
   458x650 pixel-art scene; camera starts in the sky (Presented
   by / Yushki), then drops to the portal and fades in the title
   + buttons. Scene art is static (for now);
   the camera move + fades are done here.
   ============================================================ */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #05060a;
  overflow: hidden;
  font-family: ui-monospace, "VT323", monospace;
}

/* the one-screen window. JS sets width = 458*scale (capped); centered, so
   ultra-wide screens get side bars instead of an over-zoomed/stretched scene. */
.stage {
  position: fixed;
  top: 0;
  left: 50%;
  height: 100vh;
  height: 100dvh;
  width: 100vw;                 /* JS overrides with a px width */
  transform: translateX(-50%);
  overflow: hidden;
  background: #05060a;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.stage.lit { opacity: 1; }

/* the tall scene that the camera pans over.
   width fills the viewport; height comes from the bg image. */
.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;                  /* = stage width (never the raw viewport) */
  aspect-ratio: 458 / 650;      /* gives the scene box a real, definite height */
  will-change: transform;
  transition: transform 3.8s cubic-bezier(0.65, 0, 0.35, 1); /* the cinematic drop */
}

/* every layer fills the scene box (all art is the full 458x650 canvas, so no distortion) */
.layer, .st {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}

/* overlays start hidden; JS reveals them by phase */
.sky, .logo, .btn { opacity: 0; transition: opacity 0.7s ease; }
.sky.show, .logo.show, .btn.show { opacity: 1; }

/* portal swirl sits in the ring */
/* ---- buttons ---- */
.btn { pointer-events: none; }        /* only the hotspot is interactive */
.btn .st { transition: opacity 0.12s ease; }
.btn .st.hover, .btn .st.press { opacity: 0; }
.btn.is-hover .st.normal { opacity: 0; }
.btn.is-hover .st.hover  { opacity: 1; }
.btn.is-press .st.normal, .btn.is-press .st.hover { opacity: 0; }
.btn.is-press .st.press  { opacity: 1; }

/* click hotspots — positioned over the baked-in buttons (tuned to the art) */
.hit {
  position: absolute;
  display: block;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
}
.btn.play    .hit { left: 19.5%; top: 85.8%; width: 21%; height: 6%; }
.btn.discord .hit { left: 59.5%; top: 85.8%; width: 21%; height: 6%; }
.btn:not(.show) .hit { pointer-events: none; }   /* not clickable until revealed */

/* ---- skip ---- */
.skip {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 10;
  padding: 7px 14px;
  font: inherit;
  font-size: 15px;
  letter-spacing: 1px;
  color: #cbd6ef;
  background: rgba(10, 14, 24, 0.55);
  border: 1px solid rgba(150, 170, 220, 0.35);
  border-radius: 2px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: opacity 0.4s ease, color 0.15s ease;
}
.skip:hover { color: #fff; }
.skip.gone { opacity: 0; pointer-events: none; }

/* ---- toast ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%) translateY(10px);
  z-index: 12;
  padding: 10px 16px;
  background: rgba(12, 16, 26, 0.92);
  border: 1px solid rgba(150, 170, 220, 0.35);
  color: #e7ecfa;
  font-size: 16px;
  letter-spacing: .3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- reduced motion: no camera move; just show the end ---- */
@media (prefers-reduced-motion: reduce) {
  .scene { transition: none; }
}