:root { --bg: #040508; --ink: #d8cfc2; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* Entrance: the whole composition fades up from black on load. */
body { opacity: 0; animation: page-in 1.6s ease forwards; }
@keyframes page-in { to { opacity: 1; } }

@font-face {
  font-family: "Mono"; font-display: swap; font-weight: 400;
  src: url("/assets/fonts/mono.woff2") format("woff2");
}

#wordmark {
  position: fixed; left: clamp(18px, 4vw, 56px); bottom: clamp(16px, 4vh, 48px);
  font-family: "Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: clamp(13px, 1.5vw, 18px); letter-spacing: 0.42em; color: var(--ink);
  opacity: 0.5; user-select: none; pointer-events: none;
  transition: opacity 600ms ease;
}
#wordmark .oli, #wordmark .hinge, #wordmark .map { transition: margin 380ms ease, color 380ms ease, opacity 380ms ease; }
/* Hover reveal: the linking 'o' fades and 'oli' / 'map' part — surfacing Oli + map. */
#wordmark.reveal { opacity: 0.85; }
#wordmark.reveal .oli { margin-right: 0.35em; }
#wordmark.reveal .hinge { opacity: 0.25; }
#wordmark.reveal .map { margin-left: 0.35em; color: #ffe7c2; }
#wordmark .hinge { cursor: pointer; } /* the hidden 'o' is the LinkedIn secret */

/* Easter-egg links: invisible to the eye, but real for keyboard/AT. */
#eggs .egg {
  position: fixed; padding: 0; margin: 0; border: 0; color: transparent; background: transparent;
  width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
  pointer-events: none; /* keyboard/AT only — canvas is the sole mouse target */
}
/* When focused via keyboard, show a subtle ring at the hotspot location (set by JS). */
#eggs .egg:focus-visible {
  width: 2.4em; height: 2.4em; border-radius: 50%; overflow: visible; color: transparent;
  outline: 2px solid rgba(255, 240, 220, 0.95); outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.65); /* dark halo keeps the ring visible over the bright light */
}

@media (prefers-reduced-motion: reduce) {
  body { opacity: 1; animation: none; }
  #wordmark, #wordmark .oli, #wordmark .hinge, #wordmark .map { transition: none; }
}