@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap; src: url(/assets/fonts/instrument-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }

:root { --text: #ecebe8; --muted: #8a8a90; --dim: #6d6d72; --line: #1d1d20; --bg: #0e0e10; color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; color: var(--text);
  font-family: "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(90% 55% at 15% 0%, #3b3c42 0%, rgba(59,60,66,0) 60%),
    radial-gradient(70% 45% at 90% 75%, #2b2c31 0%, rgba(43,44,49,0) 65%),
    linear-gradient(165deg, #202125 0%, #0e0e10 38%, #1d1e22 68%, #09090a 100%);
  background-color: var(--bg);
}
h1, p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: #c9c9cf; }
a:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; }

/* Background dust (canvas) sits behind everything */
#dust { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

.page {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto; gap: 40px;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }

.top { display: flex; justify-content: space-between; gap: 16px; line-height: 1.5; }
.top .r { text-align: right; font-variant-numeric: tabular-nums; }

.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; }
.logo { width: min(560px, 82vw); height: auto; display: block; }
.status { display: inline-flex; align-items: center; gap: 10px; }
.dot { width: 7px; height: 7px; background: var(--text); animation: rec 2.4s ease-in-out infinite; }

/* Logo: slow float + cursor parallax + a chrome glint every few seconds */
.parallax { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.float { position: relative; animation: float 9s ease-in-out infinite; }
.glint {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.65) 50%, transparent 58%) no-repeat;
  background-size: 260% 100%;
  -webkit-mask: url(/assets/rift-logo-640.webp) center / contain no-repeat;
          mask: url(/assets/rift-logo-640.webp) center / contain no-repeat;
  animation: glint 7s ease-in-out infinite 2s;
}

/* Ring that trails the cursor (added by site.js on desktop) */
.ring {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 1px solid rgba(236,235,232,.45);
  opacity: 0; transition: opacity .3s, width .3s cubic-bezier(.2,.7,.2,1), height .3s cubic-bezier(.2,.7,.2,1), margin .3s cubic-bezier(.2,.7,.2,1), background-color .3s, border-color .3s;
}
.ring.on { opacity: 1; }
.ring.big { width: 58px; height: 58px; margin: -29px 0 0 -29px; background-color: rgba(236,235,232,.06); border-color: rgba(236,235,232,.7); }

.contact { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact .mono { color: var(--muted); }
.email { font-size: clamp(30px, 8.4vw, 96px); font-weight: 500; letter-spacing: -.05em; line-height: .95; overflow-wrap: anywhere; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 24px; margin-top: 18px; color: var(--dim); }
.social { display: flex; flex-wrap: wrap; gap: 0 20px; color: var(--text); }
.social a { min-height: 44px; display: flex; align-items: center; }
.copy { min-height: 44px; display: flex; align-items: center; }

.hero > *, .contact { animation: rise 1.4s cubic-bezier(.2,.7,.2,1) both; }
.hero > :nth-child(2) { animation-delay: .25s; }
.contact { animation-delay: .45s; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes rec { 50% { opacity: .2; } }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-7px) rotate(-.6deg); }
  66% { transform: translateY(4px) rotate(.4deg); }
}
@keyframes glint { 0%, 72% { background-position: 140% 0; } 100% { background-position: -40% 0; } }

/* Visitors who asked their device for less motion: no float, glint or parallax.
   The dust still drifts, slower (handled in site.js). */
@media (prefers-reduced-motion: reduce) {
  .float, .glint, .dot, .hero > *, .contact { animation: none; }
  .parallax { transition: none; transform: none; }
  .glint { display: none; }
}

@media (min-width: 768px) {
  .page { padding: 16px 24px 24px; }
  .logo { width: min(620px, 56vw); }
}