:root {
  --bg: #0b0a17;
  --bg-deep: #060510;
  --horizon: #171531;
  --gold: #e8b34d;
  --gold-light: #fff2c9;
  --gold-dark: #8a5f1e;
  --text: #cfc9e8;
  --text-dim: #837da8;
  --px: 7px;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--bg-deep);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, var(--bg) 0%, var(--bg-deep) 70%);
  color: var(--text);
  font-family: 'VT323', ui-monospace, monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  zoom: 1.3;
}

/* hidden cats: eyes only, scattered faintly through the dark instead of stars */
.hidden-cats {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.cat-pair {
  position: absolute;
  display: flex;
  align-items: center;
  opacity: 0;
  animation: presence var(--dur, 14s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes presence {
  0%, 100% { opacity: 0; }
  50% { opacity: var(--peak, 0.35); }
}

/* scene */
.scene {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem;
  text-align: center;
  max-width: min(92vw, 40rem);
}

.gem-wrap {
  position: relative;
  width: calc(9 * var(--px));
  height: calc(11 * var(--px));
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gem-glow {
  position: absolute;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 179, 77, 0.35) 0%, rgba(232, 179, 77, 0) 70%);
  animation: pulse 3.2s ease-in-out infinite;
  filter: blur(2px);
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

.gem {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, var(--px));
  grid-auto-rows: var(--px);
  image-rendering: pixelated;
}

.pixel { width: var(--px); height: var(--px); }
.pixel.h { animation: shimmer 2.4s ease-in-out infinite; }

@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.wordmark {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.1rem, 4vw, 1.8rem);
  letter-spacing: 0.25em;
  color: var(--gold-light);
  text-shadow: 0 0 12px rgba(232, 179, 77, 0.55), 0 0 2px rgba(255, 242, 201, 0.6);
  margin: 0;
  padding-left: 0.25em; /* optical centering for letter-spacing */
}

.tagline {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin: 0.2rem 0 1.6rem;
  max-width: min(85vw, 32rem);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Timing is driven from script.js (sentences vary in word count, so a
   fixed-percentage @keyframes table can't generalize across them). */
.word {
  display: inline-block;
  opacity: 0;
  margin-right: 0.3em;
  transition: opacity 0.2s ease;
}

.word:last-child { margin-right: 0; }
.word.visible { opacity: 1; }

.contact {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(232, 179, 77, 0.35);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
}

.contact:hover,
.contact:focus-visible {
  color: var(--gold-light);
  border-color: var(--gold-light);
  text-shadow: 0 0 8px rgba(232, 179, 77, 0.6);
}

/* horizon silhouette */
.horizon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: var(--horizon);
  z-index: 1;
  clip-path: polygon(
    0% 100%, 0% 40%, 6% 40%, 6% 20%, 12% 20%, 12% 45%,
    20% 45%, 20% 10%, 26% 10%, 26% 35%, 34% 35%, 34% 50%,
    42% 50%, 42% 15%, 50% 15%, 50% 40%, 58% 40%, 58% 25%,
    66% 25%, 66% 48%, 74% 48%, 74% 20%, 80% 20%, 80% 40%,
    88% 40%, 88% 15%, 94% 15%, 94% 45%, 100% 45%, 100% 100%
  );
}

/* the lurker: something watching from the shadow of the horizon */
.lurker {
  position: fixed;
  left: 11%;
  bottom: 0;
  z-index: 2;
}

.hideout {
  width: 44px;
  height: 28px;
  background: var(--horizon);
  border-radius: 50% 50% 3px 3px / 100% 100% 3px 3px;
}

.eyes {
  position: absolute;
  top: 7px;
  left: 13px;
  display: flex;
  gap: 9px;
}

.eye {
  position: relative;
  width: 5px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(232, 179, 77, 0.75), 0 0 2px var(--gold-light);
  animation: blink 7s ease-in-out infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.eye::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--bg-deep);
  transform: translateX(-50%);
}

@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); opacity: 1; }
  93% { transform: scaleY(0.15); opacity: 0.5; }
  96% { transform: scaleY(1); opacity: 1; }
}

.lurker:hover .eye {
  transform: scale(1.3);
  box-shadow: 0 0 10px 2px rgba(232, 179, 77, 1), 0 0 4px var(--gold-light);
  animation-play-state: paused;
}

/* footer */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 2;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .word { transition: none; opacity: 1; }
  .cat-pair { animation: none; opacity: var(--peak, 0.3); }
  .eye { animation: none; }
}

@media (max-width: 480px) {
  :root { --px: 6px; }
}