:root {
  /* matches the dark navy of the image so the edges disappear */
  --bg: #080c16;
  --text: #e8edf7;
  --muted: #8b95ad;
  --line: rgba(120, 160, 255, 0.16);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--mono);
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }

/* ---------- full-bleed scene ---------- */
.scene {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* square image, always fully in frame; edges dissolve into the page */
.scene-frame {
  position: relative;
  width: min(100vw, 100vh);
  aspect-ratio: 1 / 1;
  flex: none;
  transform: scale(1.12);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
.dog {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}

/* soft vignette so the top/bottom bars sit naturally on the image */
.ambient {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 12, 22, .7) 0%, transparent 25%, transparent 72%, rgba(8, 12, 22, .8) 100%),
    radial-gradient(60% 50% at 78% 32%, rgba(79, 163, 255, .14), transparent 70%);
}

/* monitor sits roughly at x 78%→100%, y 6%→60% of the image */
.screen-glow {
  position: absolute;
  left: 74%; top: 2%; width: 30%; height: 62%;
  background: radial-gradient(70% 60% at 60% 45%, rgba(79, 163, 255, .6), rgba(79, 163, 255, 0) 70%);
  mix-blend-mode: screen;
  filter: blur(18px);
  animation: screenPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes screenPulse {
  0%, 100% { opacity: .7; }
  40% { opacity: 1; }
  60% { opacity: .85; }
}
.screen-flicker {
  position: absolute;
  left: 78%; top: 6%; width: 22%; height: 54%;
  background: rgba(130, 190, 255, .18);
  mix-blend-mode: screen;
  animation: flicker 7s infinite;
  pointer-events: none;
}
@keyframes flicker {
  0%, 100% { opacity: 0; }
  7% { opacity: 0; } 7.5% { opacity: .5; } 8% { opacity: 0; }
  31% { opacity: 0; } 31.3% { opacity: .35; } 31.8% { opacity: 0; }
  64% { opacity: 0; } 64.4% { opacity: .55; } 64.9% { opacity: 0; } 65.6% { opacity: .2; } 66% { opacity: 0; }
}
/* screen light hitting the dog's face */
.face-light {
  position: absolute;
  left: 38%; top: 28%; width: 40%; height: 40%;
  background: radial-gradient(60% 60% at 80% 50%, rgba(120, 180, 255, .3), transparent 70%);
  mix-blend-mode: screen;
  filter: blur(20px);
  animation: screenPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- nav (floats over the image) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(16px, 4vw, 48px);
}
.brand { font-size: 14px; font-weight: 600; letter-spacing: 3px; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.nav-link {
  font-size: 13px; color: var(--text);
  padding: 9px 16px; border-radius: 999px;
  background: rgba(8, 12, 22, .5);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  transition: background .2s, border-color .2s;
}
.nav-link:hover { background: rgba(8, 12, 22, .8); border-color: rgba(120, 160, 255, .4); }

/* ---------- CA (floats at the bottom) ---------- */
.ca {
  position: fixed; left: 50%; bottom: clamp(20px, 5vh, 48px); z-index: 10;
  transform: translateX(-50%);
  width: min(92vw, 560px);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: rgba(8, 12, 22, .6);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.ca-label { font-size: 11px; letter-spacing: 3px; color: var(--muted); }
.ca-value {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ca-value.placeholder { color: var(--muted); letter-spacing: 2px; font-size: 12px; }
.copy-btn {
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 1px;
  color: var(--text); background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  transition: background .2s, border-color .2s, color .2s;
}
.copy-btn:hover { background: rgba(255, 255, 255, .12); }
.copy-btn.copied { color: #22e58a; border-color: rgba(34, 229, 138, .5); }
.copy-btn:disabled { opacity: .45; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}