:root {
  color-scheme: dark;
  --bg: #050505;
  --fg: #f3efe6;
  --dim: rgba(243, 239, 230, 0.58);
  --label: "Oswald", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--fg);
}
body {
  font-family: var(--label);
  height: 100dvh;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.grain,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.grain {
  z-index: 50;
  opacity: 0.22;
  background: url("grain.svg") center / 180px 180px repeat;
  mix-blend-mode: overlay;
}
.vignette {
  z-index: 8;
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 35%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 28%);
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  background: #000;
  visibility: visible;
  opacity: 1;
}
.boot.is-out {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.boot-ring {
  width: 52px;
  height: 52px;
  display: block;
  animation: boot-turn 0.78s linear infinite;
}
.boot-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 2.8;
}
.boot-arc {
  fill: none;
  stroke: #fff;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: 70 113;
  animation: boot-draw 1.2s ease-in-out infinite;
}
@keyframes boot-turn {
  to { transform: rotate(360deg); }
}
@keyframes boot-draw {
  0% { stroke-dasharray: 58 113; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 94 113; stroke-dashoffset: -14; }
  100% { stroke-dasharray: 58 113; stroke-dashoffset: -113; }
}

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 22px 28px;
  opacity: 0;
  transition: opacity 0.9s ease;
}
body.is-ready .top { opacity: 1; }

.enter {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 10px 18px;
  transition: background 0.2s ease, color 0.2s ease;
}
.enter:hover,
.enter:focus-visible {
  background: #fff;
  color: #111;
}

main,
.hero {
  height: 100%;
}
.hero {
  position: relative;
  display: grid;
  align-items: end;
  opacity: 0;
  transition: opacity 0.9s ease;
}
body.is-ready .hero { opacity: 1; }

.hero-shot {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.08);
}
.hero-copy {
  position: relative;
  z-index: 12;
  padding: 0 28px 48px;
  max-width: 760px;
}
.kicker {
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 14px;
}
.stats {
  display: flex;
  gap: 28px;
  font-family: var(--label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--dim);
}
.stats b {
  color: var(--fg);
  font-weight: 500;
  letter-spacing: 0.12em;
}

@media (max-width: 900px) {
  .top { padding: 16px; }
  .hero-copy { padding: 0 16px 36px; }
  .hero-shot img { object-position: 78% center; }
}

@media (max-width: 560px) {
  .stats { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot.is-out,
  .top,
  .hero { transition: none; }
  .boot-ring,
  .boot-arc { animation: none; }
  .boot-arc { stroke-dasharray: 80 113; }
}