:root {
  --bg: #121315;
  --bg-deep: #08090a;
  --fog: rgba(255, 255, 255, 0.12);
  --fog-strong: rgba(255, 255, 255, 0.2);
  --runner: rgba(255, 255, 255, 0.96);
  --runner-glow: rgba(255, 255, 255, 0.22);
  --text: rgba(255, 255, 255, 0.95);
  --text-soft: rgba(255, 255, 255, 0.55);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.08), transparent 22rem),
    radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.05), transparent 28rem),
    linear-gradient(180deg, #1b1c1f 0%, var(--bg) 45%, var(--bg-deep) 100%);
  color: var(--text);
  font-family: "Poiret One", sans-serif;
}

.page-shell {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

.map-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: invert(1) opacity(0.07);
  z-index: 0;
}

.noise,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.noise {
  opacity: 0.12;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.16) 0 0.08rem, transparent 0.09rem),
    radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.14) 0 0.07rem, transparent 0.08rem),
    radial-gradient(circle at 35% 80%, rgba(255, 255, 255, 0.1) 0 0.06rem, transparent 0.07rem);
  background-size: 11rem 11rem, 13rem 13rem, 17rem 17rem;
}

.vignette {
  background:
    radial-gradient(circle at center, transparent 0 35%, rgba(0, 0, 0, 0.38) 70%, rgba(0, 0, 0, 0.72) 100%);
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.runner-stage {
  position: relative;
  z-index: 1;
  width: min(88vw, 44rem);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.runner-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 15rem;
  height: 18rem;
  animation: hover 1.15s ease-in-out infinite;
  filter: drop-shadow(0 0 1.5rem var(--runner-glow));
}

.runner-shadow {
  position: absolute;
  bottom: 1rem;
  width: 7rem;
  height: 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  filter: blur(0.7rem);
  animation: shadowPulse 1.15s ease-in-out infinite;
}

/* CodePen running figure */
.running {
  --color: #fff;
  --duration: 1.4s;
  --scale: 6;
  transform: scale(var(--scale, 1));
  transform-origin: center center;
}

.running .outer {
  animation: outer var(--duration) linear infinite;
}

.running .body {
  background: var(--color);
  height: 15px;
  width: 10px;
  border-radius: 10px;
  transform-origin: 10px 10px;
  position: relative;
  transform: rotate(32deg);
  animation: runBody var(--duration) linear infinite;
}

.running .body:before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 10px;
  bottom: 16px;
  left: 0;
  position: absolute;
  background: var(--color);
}

.running .arm,
.running .arm:before,
.running .leg,
.running .leg:before {
  content: '';
  width: var(--w, 11px);
  height: 4px;
  top: var(--t, 0);
  left: var(--l, 2px);
  border-radius: 2px;
  transform-origin: 2px 2px;
  position: absolute;
  background: var(--c, var(--color));
  transform: rotate(var(--r, 0deg));
  animation: var(--name, arm-leg) var(--duration) linear infinite;
}

.running .arm:before {
  --l: 7px;
  --name: arm-b;
}

.running .arm.front {
  --r: 24deg;
  --r-to: 164deg;
}

.running .arm.front:before {
  --r: -48deg;
  --r-to: -36deg;
}

.running .arm.behind {
  --r: 164deg;
  --r-to: 24deg;
}

.running .arm.behind:before {
  --r: -36deg;
  --r-to: -48deg;
}

.running .leg {
  --w: 12px;
  --t: 11px;
}

.running .leg:before {
  --t: 0;
  --l: 8px;
}

.running .leg.front {
  --r: 10deg;
  --r-to: 100deg;
}

.running .leg.front:before {
  --r: 10deg;
  --r-to: 100deg;
}

.running .leg.behind {
  --r: 100deg;
  --r-to: 10deg;
  --c: transparent;
}

.running .leg.behind:before {
  --c: var(--color);
  --r: 76deg;
  --r-to: 18deg;
}

.running .leg.behind:after {
  content: '';
  top: 0;
  right: 0;
  height: 4px;
  width: 6px;
  clip-path: polygon(2px 0, 6px 0, 6px 4px, 0 4px);
  border-radius: 0 2px 2px 0;
  position: absolute;
  background: var(--color);
}

.copy {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.48rem;
}

.copy h1,
.copy p {
  margin: 0;
}

.eyebrow {
  margin-bottom: 0.8rem;
  color: var(--text-soft);
  font-size: clamp(0.8rem, 1.4vw, 1rem);
}

.copy h1 {
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.75rem);
  letter-spacing: 0.72rem;
  text-shadow: 0 0 1.5rem rgba(255, 255, 255, 0.14);
}

.fog {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.fog-cloud {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: calc(var(--size) * 0.5);
  transform:
    translate(-50%, -50%)
    translate3d(var(--x), var(--y), 0)
    scale(var(--scale));
  border-radius: 999px;
  opacity: var(--opacity);
  background:
    radial-gradient(circle at 22% 62%, rgba(255, 255, 255, 0.32) 0 18%, transparent 19%),
    radial-gradient(circle at 38% 36%, rgba(255, 255, 255, 0.28) 0 22%, transparent 23%),
    radial-gradient(circle at 56% 52%, rgba(255, 255, 255, 0.24) 0 21%, transparent 22%),
    radial-gradient(circle at 75% 40%, rgba(255, 255, 255, 0.22) 0 17%, transparent 18%),
    radial-gradient(ellipse at center, var(--fog-strong) 0 44%, transparent 45%);
  filter: blur(1.1rem);
  animation:
    drift var(--duration) ease-in-out infinite alternate,
    breathe calc(var(--duration) * 0.72) ease-in-out infinite;
}

.fog-front .fog-cloud {
  filter: blur(1.45rem);
}

.fog-front::after {
  content: "";
  position: absolute;
  inset: 18% 10%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 54%);
  filter: blur(2.2rem);
}

@keyframes hover {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.45rem);
  }
}

@keyframes shadowPulse {
  0%,
  100% {
    transform: scaleX(0.94);
    opacity: 0.14;
  }

  50% {
    transform: scaleX(1.04);
    opacity: 0.2;
  }
}

@keyframes outer {
  50% {
    transform: translateY(-1px);
  }
}

@keyframes runBody {
  25%,
  75% {
    transform: rotate(28deg);
  }

  50% {
    transform: rotate(36deg);
  }
}

@keyframes arm-leg {
  50% {
    transform: rotate(var(--r-to));
  }
}

@keyframes arm-b {
  30%,
  70% {
    transform: rotate(var(--r-to));
  }
}

@keyframes drift {
  from {
    transform:
      translate(-50%, -50%)
      translate3d(calc(var(--x) * 0.82), calc(var(--y) * 1.08), 0)
      scale(calc(var(--scale) * 0.94));
  }

  to {
    transform:
      translate(-50%, -50%)
      translate3d(calc(var(--x) * 1.14), calc(var(--y) * 0.9), 0)
      scale(calc(var(--scale) * 1.06));
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: calc(var(--opacity) * 0.72);
  }

  50% {
    opacity: calc(var(--opacity) * 1.18);
  }
}

@media (max-width: 640px) {
  .runner-stage {
    width: min(100vw, 28rem);
  }

  .copy {
    bottom: 9vh;
    width: calc(100vw - 2rem);
    letter-spacing: 0.28rem;
  }

  .copy h1 {
    letter-spacing: 0.42rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}