/* UA1s — coming soon. One dark page: a forged wheel behind smoked glass. */
/* IBM Plex (the Electric Sites marketing face), self-hosted, latin subset. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/fonts/plex-sans.woff2") format("woff2");
}

:root {
  --bg: #000;
  --fg: #f4f4f5;
  --muted: #a1a1aa;
  --faint: #5c5c63;
  --lime: #bfff00; /* Electric Sites neon — used on fills, sparingly */
  --glass: rgba(255, 255, 255, 0.025);
  --edge: rgba(255, 255, 255, 0.07);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { background: var(--bg); color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(118vmin, 720px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: url("/wheel.svg") center / contain no-repeat;
  border-radius: 50%;
  opacity: 0.55;
  animation: turn 240s linear infinite;
}

@keyframes turn { to { rotate: 360deg; } }

/* Darkens the edges and pulls a faint cool light across the top. */
.shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle min(340px, 48vmin) at 50% 50%, rgba(0, 0, 0, 0.94) 35%, rgba(0, 0, 0, 0)),
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.85) 70%, #000 100%),
    linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7));
}

.grain {
  position: absolute;
  inset: -50%;
  opacity: 0.05;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ---------- the glass panel ---------- */

.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 48px 16px 24px;
}

.panel {
  position: relative;
  width: min(100%, 520px);
  padding: 40px 24px;
  text-align: center;
  animation: rise 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes rise {
  from { opacity: 0.35; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.kicker {
  margin: 0 0 20px;
  font: 400 11px/1 var(--sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--faint);
}

.mark {
  margin: 0;
  font-weight: 600;
  font-size: clamp(40px, 11vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #8a8a92;
}

.soon {
  margin: 18px 0 0;
  font-weight: 300;
  font-size: clamp(15px, 4vw, 17px);
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- 404 bits ---------- */

.code {
  margin: 0 0 16px;
  font: 400 11px/1 var(--sans);
  letter-spacing: 0.32em;
  color: var(--faint);
}

.back {
  display: inline-block;
  margin-top: 30px;
  padding-bottom: 3px;
  font: 400 12px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transition: color 150ms ease, border-color 150ms ease;
}
.back:hover,
.back:focus-visible { color: var(--fg); border-color: var(--fg); outline: none; }

/* ---------- the quiet credit ---------- */

.credit {
  position: relative;
  z-index: 1;
  padding: 0 16px max(22px, env(safe-area-inset-bottom));
  text-align: center;
}

.credit a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 12px/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--faint);
  text-decoration: none;
  transition: color 150ms ease;
}
.credit a:hover,
.credit a:focus-visible { color: var(--fg); }
.credit a:focus-visible { outline: 1px solid var(--edge); outline-offset: 6px; border-radius: 4px; }

.es { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

.bolt {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--lime);
  opacity: 0.45;
  transition: opacity 150ms ease;
}
.credit a:hover .bolt { opacity: 1; }
.bolt svg { width: 10px; height: 10px; fill: #0a0a0a; }

/* ---------- small screens + motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .wheel, .panel { animation: none; }
}