@font-face {
  font-family: "Pixelify Sans";
  src: url("fonts/pixelify-sans.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night: #05040a;
  --ivory: #f3e4cc;
  --muted: #b39c86;
  --amber: #ffb35c;
  --teal: #7fe8d4;
  --line: rgba(243, 228, 204, .16);
  --gutter: clamp(16px, 3vw, 40px);
  --pixel: "Pixelify Sans", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); }
body { color: var(--ivory); font-family: var(--pixel); -webkit-font-smoothing: none; }
a, button { color: inherit; font: inherit; }
a { text-decoration: none; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.world { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }

/* Pixel layers are scaled by whole numbers only, set in horizon.js. */
#sky, .scene, #life {
  position: absolute; left: 0; top: 0; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.scene, #life { width: calc(448px * var(--s, 4)); height: calc(192px * var(--s, 4)); transform: translate(var(--scene-x, 0px), var(--scene-y, 0px)); }
.scene { opacity: 0; transition: opacity .9s ease; }
.scene.is-ready { opacity: 1; }
#life { pointer-events: none; }

.masthead {
  position: absolute; inset: 0 0 auto; z-index: 3;
  padding: clamp(16px, 2.6vw, 30px) var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: .02em; }
.brand img { width: 36px; height: 36px; border-radius: 50%; }

/* One bar along the foot of the scene: work on the left, contact on the right. */
.bar {
  position: absolute; inset: auto 0 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 48px var(--gutter) clamp(14px, 2vw, 22px);
  background: linear-gradient(transparent, rgba(5, 4, 10, .78) 55%);
}
.projects { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(8px, 1.4vw, 16px); }
.project { position: relative; }
.project-trigger {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 10px;
  border: 1px solid var(--line); background: rgba(10, 7, 14, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 16px; transition: border-color .15s, background .15s;
}
.project.shown .project-trigger {
  border-color: var(--amber); background: rgba(30, 16, 10, .75);
}
.pz-mark { width: 34px; height: 34px; display: block; filter: drop-shadow(0 0 6px rgba(120, 230, 60, .3)); }
.project.shown .pz-mark { filter: drop-shadow(0 0 10px rgba(120, 230, 60, .6)); }
@media (prefers-reduced-motion: no-preference) {
  .project.shown .pz-mark { animation: recoil .32s steps(4) 1; }
}
@keyframes recoil { 30% { transform: translateX(-4px) rotate(-6deg); } 100% { transform: none; } }

/* Outbid's own wordmark: Phosphor fire mark and Space Grotesk, as on outbid.gg. */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-outbid-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
.outbid-mark {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff4e8; font: 700 17px/1.2 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
}
.outbid-mark svg { width: 1.2em; height: 1.2em; fill: #ff4d00; flex: none; }

.preview {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: 280px;
  border: 1px solid var(--line); background: #0d0a12; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility 0s .18s;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.preview-wide { width: 440px; }
/* Outbid's card with its TV: the live channel plays behind the card, through the screen. */
.tv-card { position: relative; aspect-ratio: 720 / 378; }
.tv-card img { position: relative; z-index: 1; }
.tv-screen {
  position: absolute; left: 63.09%; top: 34.22%; width: 23.81%; height: 25.55%;
  overflow: hidden; background: radial-gradient(120% 120% at 50% 40%, #2a2420, #0d0b0a);
}
.tv-screen iframe { position: absolute; left: 50%; top: 50%; width: 480px; height: 270px; border: 0; transform-origin: 0 0; pointer-events: none; }
.preview::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.preview video, .preview img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.preview p { margin: 10px 4px 4px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.project.shown .preview {
  opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s;
}

.contact { display: flex; align-items: center; gap: 6px; }
.mail { font-size: 16px; padding: 10px 6px; transition: color .15s; }
.mail:hover { color: var(--amber); }
.x { display: grid; place-items: center; width: 40px; height: 40px; opacity: .8; }
.x:hover { opacity: 1; }
.x svg { width: 16px; height: 16px; }
.map { width: 92px; aspect-ratio: 1.12; display: block; margin-left: 6px; }

@media (max-width: 760px) {
  .bar { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 64px; }
  .projects { justify-content: space-between; }
  .project { flex: 1; }
  .project-trigger { width: 100%; justify-content: flex-start; }
  .project:nth-child(2) .preview { left: auto; right: 0; }
  .preview { width: min(280px, calc(100vw - 32px)); }
  .contact { justify-content: space-between; }
  .map { width: 64px; }
}