:root {
  color-scheme: dark;

  --color-space: #030409;
  --color-text: #eef0f7;
  --color-muted: #8a90a8;
  --color-faint: #7f86a8;
  --color-accent: #a9b8ff;
  --color-star: rgba(255, 255, 255, 0.85);
  --color-star-dim: rgba(200, 210, 255, 0.45);
  --color-nebula-a: rgba(92, 72, 210, 0.22);
  --color-nebula-b: rgba(40, 110, 200, 0.16);
  --color-name-top: #ffffff;
  --color-name-mid: #dfe3f5;
  --color-name-bottom: #8e95d8;
  --color-shine-peak: #ffffff;
  --color-glass: rgba(255, 255, 255, 0.04);
  --color-glass-hover: rgba(255, 255, 255, 0.09);
  --color-glass-edge: rgba(255, 255, 255, 0.1);
  --color-glass-edge-hover: rgba(169, 184, 255, 0.45);
  --color-planet: #04050c;
  --color-planet-rim: rgba(150, 170, 255, 0.55);
  --color-planet-haze: rgba(90, 110, 255, 0.18);
  --color-frame-glow: rgba(110, 120, 255, 0.18);
  --color-frame-glow-warm: rgba(255, 120, 90, 0.12);
  --color-glass-highlight: rgba(255, 255, 255, 0.08);
  --color-frame-edge-a: rgba(169, 184, 255, 0.6);
  --color-frame-edge-b: rgba(255, 255, 255, 0.04);
  --color-meteor: rgba(255, 255, 255, 0.9);
  --color-live: #5ee6a8;
  --color-live-glow: rgba(94, 230, 168, 0.6);
  --color-selection: rgba(169, 184, 255, 0.35);
  --color-spotlight: rgba(140, 150, 255, 0.09);
  --color-name-aura: rgba(150, 165, 255, 0.16);
  --color-rim-bright: rgba(190, 205, 255, 0.9);
  --color-glow-mail: rgba(255, 196, 120, 0.35);
  --color-glow-linkedin: rgba(80, 160, 255, 0.4);
  --color-glow-github: rgba(255, 255, 255, 0.28);

  --font-display: "Unbounded", "Space Grotesk", system-ui, sans-serif;
  --font-body: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --size-name: clamp(4.5rem, 19vw, 12rem);
  --size-building: clamp(1.25rem, 3.2vw, 1.75rem);
  --size-body: 1rem;
  --size-label: 0.75rem;
  --size-stat: clamp(2.5rem, 7vw, 3.5rem);
  --size-icon: 1.125rem;
  --weight-name: 800;
  --weight-medium: 500;
  --leading-tight: 1;
  --leading-body: 1.5;
  --tracking-name: -0.03em;
  --tracking-label: 0.28em;

  --space-gutter: 1rem;
  --space-1: 0.5rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: 7rem;
  --pill-pad-y: 0.625rem;
  --pill-pad-x: 1.125rem;
  --width-video: 56rem;
  --radius-pill: 999px;
  --radius-frame: 1.25rem;
  --border-hairline: 1px;
  --focus-ring: 2px;
  --underline-offset: 0.25em;
  --glow-planet-outer: 0 -2rem 6rem;
  --glow-planet-inner: inset 0 2rem 5rem;
  --glow-frame: 0 0 6rem;
  --glow-frame-under: 0 2.5rem 6rem -1rem;
  --highlight-glass: inset 0 1px 0;
  --planet-size: 180vmax;
  --planet-peek: 14vh;
  --star-tile-far: 211px;
  --star-tile-near: 337px;

  --duration-shine: 5s;
  --duration-hover: 160ms;
  --duration-drift-far: 56s;
  --duration-drift-near: 52s;
  --duration-twinkle: 6s;
  --ease-shine: ease-in-out;
  --ease-hover: ease-out;
  --opacity-twinkle-low: 0.55;
  --opacity-live-low: 0.35;
  --meteor-top: 12%;
  --meteor-right: -10%;
  --glint-share: 0.3;
  --name-descender-room: 0.2em;
  --lift-hover: -2px;
  --size-live-dot: 0.4375rem;
  --size-cue: 1.75rem;
  --meteor-length: 12rem;
  --meteor-thickness: 1.5px;
  --meteor-angle: -28deg;
  --meteor-travel-x: -60vw;
  --meteor-travel-y: 32vw;
  --rise-distance: 1rem;
  --cue-bob: 0.375rem;
  --duration-meteor: 11s;
  --duration-rise: 900ms;
  --duration-live: 2.4s;
  --duration-cue: 2s;
  --delay-rise-1: 100ms;
  --delay-rise-2: 350ms;
  --delay-rise-3: 550ms;
  --ease-rise: cubic-bezier(0.2, 0.7, 0.2, 1);
  --size-spotlight: 44rem;
  --glow-pill: 0 0.5rem 2rem;
  --opacity-grain: 0.06;
  --opacity-rim-low: 0.35;
  --duration-rim: 7s;
  --duration-spotlight-fade: 600ms;
}

* {
  box-sizing: border-box;
}

::selection {
  background: var(--color-selection);
}

html,
body {
  margin: 0;
}

body {
  min-height: 100vh;
  background-color: var(--color-space);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  overflow-x: hidden;
}

.sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stars {
  position: absolute;
  inset: 0 0 calc(-1 * var(--star-tile)) 0;
}

.stars-far {
  background-image:
    radial-gradient(1px 1px at 20px 30px, var(--color-star-dim), transparent),
    radial-gradient(1px 1px at 90px 140px, var(--color-star-dim), transparent),
    radial-gradient(1px 1px at 160px 70px, var(--color-star-dim), transparent),
    radial-gradient(1px 1px at 130px 190px, var(--color-star-dim), transparent);
  --star-tile: var(--star-tile-far);
  background-size: var(--star-tile) var(--star-tile);
}

.stars-near {
  background-image:
    radial-gradient(1.5px 1.5px at 50px 80px, var(--color-star), transparent),
    radial-gradient(1px 1px at 240px 30px, var(--color-star), transparent),
    radial-gradient(1.5px 1.5px at 300px 260px, var(--color-star), transparent),
    radial-gradient(1px 1px at 120px 300px, var(--color-star), transparent);
  --star-tile: var(--star-tile-near);
  background-size: var(--star-tile) var(--star-tile);
}

.nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 28% 14% at 50% 36%, var(--color-name-aura), transparent 70%),
    radial-gradient(ellipse 60% 45% at 22% 18%, var(--color-nebula-a), transparent 70%),
    radial-gradient(ellipse 55% 40% at 82% 35%, var(--color-nebula-b), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .stars-far {
    animation: drift var(--duration-drift-far) linear infinite;
  }

  .stars-near {
    animation:
      drift var(--duration-drift-near) linear infinite,
      twinkle var(--duration-twinkle) ease-in-out infinite alternate;
  }
}

@keyframes drift {
  to {
    transform: translateY(calc(-1 * var(--star-tile)));
  }
}

@keyframes twinkle {
  to {
    opacity: var(--opacity-twinkle-low);
  }
}

.spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size-spotlight);
  height: var(--size-spotlight);
  margin: calc(var(--size-spotlight) / -2) 0 0 calc(var(--size-spotlight) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-spotlight), transparent 65%);
  opacity: 0;
  transition: opacity var(--duration-spotlight-fade) var(--ease-hover);
}

.spotlight.is-on {
  opacity: 1;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: var(--opacity-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.meteor {
  position: absolute;
  top: var(--meteor-top);
  right: var(--meteor-right);
  width: var(--meteor-length);
  height: var(--meteor-thickness);
  background: linear-gradient(90deg, var(--color-meteor), transparent);
  opacity: 0;
  transform: rotate(var(--meteor-angle));
}

@media (prefers-reduced-motion: no-preference) {
  .meteor {
    animation: meteor var(--duration-meteor) linear infinite;
  }

  .rise {
    animation: rise var(--duration-rise) var(--ease-rise) both;
  }

  .rise-1 {
    animation-delay: var(--delay-rise-1);
  }

  .rise-2 {
    animation-delay: var(--delay-rise-2);
  }

  .rise-3 {
    animation-delay: var(--delay-rise-3);
  }

  .live-dot {
    animation: live var(--duration-live) ease-in-out infinite;
  }

  .planet-rim {
    animation: rim var(--duration-rim) ease-in-out infinite;
  }

  .scroll-cue svg {
    animation: bob var(--duration-cue) ease-in-out infinite;
  }
}

@keyframes meteor {
  0%,
  88% {
    opacity: 0;
    transform: translate(0, 0) rotate(var(--meteor-angle));
  }

  90% {
    opacity: 1;
  }

  96%,
  100% {
    opacity: 0;
    transform: translate(var(--meteor-travel-x), var(--meteor-travel-y)) rotate(var(--meteor-angle));
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(var(--rise-distance));
  }
}

@keyframes live {
  50% {
    opacity: var(--opacity-live-low);
  }
}

@keyframes rim {
  50% {
    opacity: var(--opacity-rim-low);
  }
}

@keyframes bob {
  50% {
    transform: translateY(var(--cue-bob));
  }
}

main {
  position: relative;
  overflow: hidden;
}

.hero {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 100svh;
  padding: var(--space-4) var(--space-gutter) calc(var(--planet-peek) + var(--space-3));
  text-align: center;
}

.name {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: var(--name-descender-room);
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--size-name);
  font-weight: var(--weight-name);
  letter-spacing: var(--tracking-name);
  line-height: var(--leading-tight);
  color: var(--color-name-top);
  background-image: linear-gradient(180deg, var(--color-name-top) 20%, var(--color-name-mid) 55%, var(--color-name-bottom));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.glint {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% * var(--glint-share));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
  transform: translateX(-100%);
  pointer-events: none;
}

.glint::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--glint-share));
  white-space: nowrap;
  color: var(--color-shine-peak);
  -webkit-text-fill-color: var(--color-shine-peak);
  transform: translateX(calc(100% * var(--glint-share)));
}

@media (prefers-reduced-motion: no-preference) {
  .glint {
    animation: glint-window var(--duration-shine) var(--ease-shine) infinite;
  }

  .glint::before {
    animation: glint-text var(--duration-shine) var(--ease-shine) infinite;
  }
}

@keyframes glint-window {
  60%,
  100% {
    transform: translateX(calc(100% / var(--glint-share)));
  }
}

@keyframes glint-text {
  60%,
  100% {
    transform: translateX(-100%);
  }
}

.label {
  display: block;
  margin: 0;
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-faint);
}

.live-dot {
  display: inline-block;
  width: var(--size-live-dot);
  height: var(--size-live-dot);
  margin-right: var(--space-1);
  border-radius: 50%;
  background: var(--color-live);
  box-shadow: 0 0 var(--space-1) var(--color-live-glow);
  vertical-align: middle;
}

.building {
  margin: var(--space-3) 0 0;
}

.building-line {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-building);
  color: var(--color-muted);
}

.building-line a {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
  text-underline-offset: var(--underline-offset);
  transition: color var(--duration-hover) var(--ease-hover);
}

.building-line a:hover {
  color: var(--color-accent);
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--pill-pad-y) var(--pill-pad-x);
  border: var(--border-hairline) solid var(--color-glass-edge);
  border-radius: var(--radius-pill);
  background-color: var(--color-glass);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--highlight-glass) var(--color-glass-highlight);
  transition:
    transform var(--duration-hover) var(--ease-hover),
    background-color var(--duration-hover) var(--ease-hover),
    border-color var(--duration-hover) var(--ease-hover),
    box-shadow var(--duration-hover) var(--ease-hover);
}

.pill:hover {
  transform: translateY(var(--lift-hover));
  background-color: var(--color-glass-hover);
  border-color: var(--color-glass-edge-hover);
  box-shadow:
    var(--highlight-glass) var(--color-glass-highlight),
    var(--glow-pill) var(--pill-glow);
}

.pill-mail {
  --pill-glow: var(--color-glow-mail);
}

.pill-linkedin {
  --pill-glow: var(--color-glow-linkedin);
}

.pill-github {
  --pill-glow: var(--color-glow-github);
}

.icon {
  flex: none;
  width: var(--size-icon);
  height: var(--size-icon);
}

a:focus-visible {
  outline: var(--focus-ring) solid var(--color-accent);
  outline-offset: var(--focus-ring);
}

.scroll-cue {
  position: absolute;
  bottom: calc(var(--planet-peek) + var(--space-1));
  left: 50%;
  z-index: 1;
  width: var(--size-cue);
  height: var(--size-cue);
  color: var(--color-muted);
  transform: translateX(-50%);
  transition: color var(--duration-hover) var(--ease-hover);
}

.scroll-cue:hover {
  color: var(--color-text);
}

.scroll-cue svg {
  display: block;
  width: 100%;
  height: 100%;
}

.planet {
  position: absolute;
  top: calc(100% - var(--planet-peek));
  left: 50%;
  width: var(--planet-size);
  height: var(--planet-size);
  border-radius: 50%;
  background: var(--color-planet);
  box-shadow:
    0 calc(-1 * var(--border-hairline)) 0 var(--color-planet-rim),
    var(--glow-planet-outer) var(--color-planet-haze),
    var(--glow-planet-inner) var(--color-planet-haze);
  transform: translateX(-50%);
}

.planet-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 calc(-1 * var(--border-hairline)) 0 var(--color-rim-bright);
}

.video {
  position: relative;
  max-width: var(--width-video);
  margin: 0 auto;
  padding: var(--space-4) var(--space-gutter) var(--space-5);
  scroll-margin-top: var(--space-3);
  text-align: center;
}

.video-head {
  margin-bottom: var(--space-3);
}

.stat {
  margin: var(--space-1) 0 0;
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--size-stat);
  font-weight: var(--weight-name);
  line-height: var(--leading-tight);
  background-image: linear-gradient(180deg, var(--color-name-top) 20%, var(--color-name-bottom));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-unit {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-muted);
}

.song {
  margin: var(--space-3) 0 0;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-faint);
}

.song-sep {
  margin: 0 var(--space-1);
}

.frame {
  aspect-ratio: 16 / 9;
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-frame);
  overflow: hidden;
  background:
    linear-gradient(var(--color-planet), var(--color-planet)) padding-box,
    linear-gradient(135deg, var(--color-frame-edge-a), var(--color-frame-edge-b) 40%, var(--color-frame-edge-b) 60%, var(--color-frame-edge-a)) border-box;
  box-shadow:
    var(--glow-frame) var(--color-frame-glow),
    var(--glow-frame-under) var(--color-frame-glow-warm);
}

.frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.footer {
  position: relative;
  padding: 0 var(--space-gutter) var(--space-4);
  text-align: center;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-faint);
}