/* ============================================================
   VOLEE — twowingsforever  ·  Y2K space release page
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;            /* one screen, no scroll */
  background: #02000a;
  font-family: 'Pixelify Sans', sans-serif;
  -webkit-font-smoothing: none;
  cursor: crosshair;
}

/* ---------- deep space gradient backdrop ---------- */
.space-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(64, 24, 120, 0.55) 0%, transparent 55%),
    radial-gradient(100% 80% at 85% 88%, rgba(14, 60, 120, 0.5) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 50%, #0a0420 0%, #03000c 70%, #000005 100%);
}

/* ---------- star layers ---------- */
.starfield, .pixelstars, .floaters {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.starfield  { z-index: 1; }
.pixelstars { z-index: 2; }
.floaters   { z-index: 6; }   /* drift over the title */

/* 1-line pentagram stars (built in JS) */
.penta-star {
  position: absolute;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.55));
}

/* tiny drawn 4-point white stars (built in JS) */
.pixel-star {
  position: absolute;
  color: #fff;
  font-family: 'VT323', monospace;
  line-height: 1;
  text-shadow: 0 0 4px rgba(255,255,255,0.7);
  animation: blink var(--bl, 4s) steps(2, end) infinite;
}
@keyframes blink {
  0%, 70% { opacity: 1; }
  85%     { opacity: 0.15; }
  100%    { opacity: 1; }
}

/* ---------- floating zero-gravity objects ---------- */
.floater {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  user-select: none;
}
.rocket { font-size: clamp(34px, 4vw, 60px); }

.logo img {
  width: clamp(120px, 13vw, 190px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 14px rgba(255,90,80,0.45));
}

/* ============================================================
   CENTER STAGE
   ============================================================ */
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vh, 40px);
  pointer-events: none;          /* let floaters keep their space; popup re-enables */
}

/* ---------- VOLEE graffiti bubble 3D ---------- */
.volee {
  position: relative;
  z-index: 9;                    /* in front of the floaters */
  font-family: 'Rubik Bubbles', cursive;
  font-size: clamp(110px, 24vw, 360px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: #fff;
  -webkit-text-stroke: clamp(2px, 0.4vw, 5px) #0a0118;
  paint-order: stroke fill;          /* outline first, white fill on top */
  -webkit-text-fill-color: #fff;
}
/* extruded 3D back-face built from a stacked-shadow clone */
.volee::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  color: #2c0a52;
  -webkit-text-fill-color: #2c0a52;
  -webkit-text-stroke: clamp(2px, 0.4vw, 5px) #0a0118;
  paint-order: stroke fill;
  text-shadow:
     2px  2px 0 #2c0a52,  4px  4px 0 #280a4c,  6px  6px 0 #240949,
     8px  8px 0 #200843, 10px 10px 0 #1c0740, 12px 12px 0 #18063a,
    14px 14px 0 #150535, 16px 16px 0 #120430, 18px 18px 0 #0e0329,
    20px 20px 0 #0b0222, 22px 22px 0 #08021c, 24px 24px 0 #050116,
    0 0 36px rgba(176,38,255,0.7), 0 0 70px rgba(120,40,255,0.4);
}

/* ============================================================
   Y2K WINDOWS ERROR POPUP
   ============================================================ */
.popup {
  position: relative;
  z-index: 10;             /* always above floaters, stays clickable */
  pointer-events: auto;
  width: clamp(290px, 32vw, 380px);
  background: #c3c3c3;
  border: 2px solid #000;
  border-top-color: #fff;
  border-left-color: #fff;
  box-shadow:
    inset -1px -1px 0 #818181,
    inset  1px  1px 0 #dfdfdf,
    3px 3px 0 rgba(0,0,0,0.55),
    0 0 24px rgba(120,80,255,0.35);
  font-family: 'Pixelify Sans', sans-serif;
  image-rendering: pixelated;
}

/* blue title bar */
.popup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 3px 3px 6px;
  background: linear-gradient(90deg, #00007b 0%, #0a51d6 55%, #4b94f7 100%);
  color: #fff;
}
.popup-title-text {
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popup-x {
  flex: none;
  width: 20px;
  height: 18px;
  background: #c3c3c3;
  border: 1px solid #000;
  border-top-color: #fff;
  border-left-color: #fff;
  box-shadow: inset -1px -1px 0 #818181, inset 1px 1px 0 #dfdfdf;
  color: #000;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.popup-x:active { box-shadow: inset 1px 1px 0 #818181; }

/* grey content area */
.popup-body {
  background: #c3c3c3;
  padding: 16px 16px 14px;
}
.popup-msg {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.popup-icon {
  flex: none;
  width: 40px;
  height: 38px;
  display: block;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.35));
}

.popup-text {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 600;
  color: #000;
  letter-spacing: 0.3px;
}

/* form */
.popup-form { display: flex; flex-direction: column; gap: 12px; }
.popup-input {
  width: 100%;
  padding: 7px 9px;
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: #000;
  background: #fff;
  border: 2px solid #818181;
  border-top-color: #000;
  border-left-color: #000;
  outline: none;
}
.popup-input::placeholder { color: #6a6a6a; }

.popup-buttons { display: flex; justify-content: center; }

.btn-unlock {
  min-width: 130px;
  padding: 8px 26px;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #000;
  background: #c3c3c3;
  border: 2px solid #000;
  border-top-color: #fff;
  border-left-color: #fff;
  box-shadow: inset -1px -1px 0 #818181, inset 1px 1px 0 #dfdfdf;
  cursor: pointer;
  transition: transform 0.05s, background 0.12s, color 0.12s, box-shadow 0.12s;
}
.btn-unlock:hover {
  background: #00007b;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #4b94f7, 0 0 14px rgba(75,148,247,0.8);
}
.btn-unlock:active {
  transform: translate(1px, 1px);
  box-shadow: inset 1px 1px 0 #000;
}

.popup-status {
  margin-top: 10px;
  min-height: 18px;
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: #0a0;
  text-shadow: 0 0 6px rgba(0,200,0,0.6);
}

@media (max-width: 600px) {
  .stage { gap: 18px; }
  .volee { font-size: 30vw; }
}