:root {
  --bg: #0b0e12;
  --fg: #e8ecef;
  --muted: #8b929b;
  --faint: #565c66;
  --rule: #1e242c;
  --accent: #3aa8dc;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

a { color: var(--fg); text-decoration: none; }

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(36px, 7vh, 72px) clamp(24px, 6vw, 80px);
  background: var(--bg);
  color: var(--fg);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow: hidden;
  cursor: default;
}

/* --- background layers --- */

.particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  background: radial-gradient(closest-side,
    rgba(120, 220, 255, 0.13) 0%,
    rgba(58, 168, 220, 0.09) 25%,
    rgba(50, 119, 210, 0.045) 50%,
    rgba(50, 119, 210, 0.015) 72%,
    transparent 92%);
  mix-blend-mode: screen;
  filter: blur(30px);
  pointer-events: none;
  will-change: transform;
  transform: translate(1000px, 120px);
}

/* --- social links --- */

.social {
  position: relative;
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  opacity: 0;
  animation: fadeIn 0.9s ease 1.1s forwards;
}

.social a { color: var(--muted); transition: color 0.2s; }
.social a:hover,
.social a:focus-visible { color: var(--accent); }

/* --- wordmark --- */

.wordmark {
  position: relative;
  margin: 0;
  font-size: clamp(44px, 11.5vw, 148px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -3px;
  text-transform: uppercase;
}

.line { display: block; overflow: hidden; }

.word {
  display: block;
  position: relative;
  opacity: 0;
  animation: blurIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) forwards;
}

/* Cursor-tracked spotlight clipped to the glyphs. */
.highlight {
  position: absolute;
  inset: 0;
  color: transparent;
  background-image: radial-gradient(circle closest-side,
    rgba(170, 230, 255, 0.95) 0%,
    rgba(58, 168, 220, 0.5) 40%,
    transparent 72%);
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-size: 760px 760px;
  background-position: -9999px -9999px;
  pointer-events: none;
}

/* --- footer --- */

.footer { position: relative; }

.rule {
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left;
  animation: lineGrow 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding-top: 28px;
  opacity: 0;
  animation: fadeIn 0.9s ease 1s forwards;
}

.identity { display: flex; align-items: center; gap: 18px; }
.identity img { width: 40px; height: auto; }

.mail {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(15px, 2.4vw, 20px);
  padding-bottom: 6px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
}

.mail:hover,
.mail:focus-visible { color: var(--accent); background-size: 100% 2px; }

.copy {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--faint);
  letter-spacing: 1px;
}

/* --- animations --- */

@keyframes blurIn {
  from { opacity: 0; filter: blur(14px); letter-spacing: 6px; }
  to { opacity: 1; filter: blur(0); letter-spacing: -3px; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .social, .word, .footer-row { animation: none; opacity: 1; }
  .word { filter: none; letter-spacing: -3px; }
  .rule { animation: none; transform: scaleX(1); }
  .glow, .particles { display: none; }
}