/* ===== Halberg Institute: landing page ===== */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Courier New", Courier, monospace;
  color: #e6e6e6;
}

#landing {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* The photo is square. The stage is a square big enough to cover the
   screen, centered, so anything positioned in % on the stage stays on
   the same spot of the building no matter how the screen is shaped. */
#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 100vh);
  height: max(100vw, 100vh);
  transform: translate(-50%, -50%);
  container-type: inline-size;
}

#building {
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(0.85) contrast(1.05);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transition: filter 0.12s steps(1);
}

/* The sign sits on the white band along the roofline. */
#sign {
  position: absolute;
  left: 50%;
  top: 33.2%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 1.15cqw;
  letter-spacing: 0.22em;
  color: #3d4247;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  user-select: none;
}

/* The rotating phrase sits on the white band between the first and second floor windows. */
#phrase {
  position: absolute;
  left: 50%;
  top: 41.7%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.78cqw;
  letter-spacing: 0.12em;
  color: #4a5056;
  opacity: 0.9;
  user-select: none;
}

/* Front doors of the building in the photo. */
#door {
  position: absolute;
  left: 47.4%;
  top: 55.2%;
  width: 5.4%;
  height: 5.3%;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

#door::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 2px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 240, 0.55), rgba(255, 255, 240, 0) 70%);
  opacity: 0;
  pointer-events: none;
}

#door.hint::after {
  animation: doorHint 2.4s ease-in-out 1;
}

@keyframes doorHint {
  0%, 100% { opacity: 0; }
  45% { opacity: 0.35; }
}

/* ===== Glitch ===== */
#glitch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

#glitch i {
  position: absolute;
  inset: 0;
  background: url("halberg-building.jpg") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
}

#glitch i:nth-child(1) { clip-path: inset(18% 0 70% 0); transform: translateX(-1.2%); filter: hue-rotate(160deg) saturate(3); opacity: 0.55; }
#glitch i:nth-child(2) { clip-path: inset(47% 0 40% 0); transform: translateX(1.6%);  filter: hue-rotate(-60deg) saturate(2); opacity: 0.5; }
#glitch i:nth-child(3) { clip-path: inset(62% 0 31% 0); transform: translateX(-0.6%); filter: grayscale(1) brightness(1.6); opacity: 0.45; }

#glitch.on { opacity: 1; }

/* A rare flash of the building as it really is: no summer. */
#building.real {
  filter: grayscale(1) brightness(1.08) contrast(1.15);
}

/* ===== Status block ===== */
#status {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  font-size: 0.65rem;
  line-height: 1.4;
  opacity: 0.45;
  text-shadow: 0 0 4px #000;
  user-select: none;
}

/* ===== Returning visitor prompt ===== */
#continue {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: #e6e6e6;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(230, 230, 230, 0.35);
  cursor: pointer;
  animation: pulse 2.8s ease-in-out infinite;
}

#continue[hidden] { display: none; }

@keyframes pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  #continue { animation: none; opacity: 0.8; }
  #door.hint::after { animation: none; }
}