/* sharedot — shared styles for all pages
   ----------------------------------------------------------------------------
   • One continuous full-bleed "pixel" field sits behind the whole UI (see app.js
     for the FROZEN square layouts). The navbar is clear glass floating on top.
   • Nav links About/Product/Team are shown; Careers/Privacy/Terms stay [hidden].
   • < 860px the inline nav collapses into a hamburger dropdown (see app.js).
   • Tune the glass via --glass / --glass-blur. */

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

:root {
  --bg:  #000;
  --ink: #fff;
  --bar: 64px;                 /* navbar height */
  --glass: rgba(255,255,255,.04);
  --glass-blur: 3px;           /* slight blur; no color shift (colors match across the navbar edge) */
  color-scheme: dark;
}

html { height: 100%; overscroll-behavior: none; }
body {
  height: 100%; margin: 0;
  background: var(--bg); color: var(--ink);
  font-family: "Poppins", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;            /* locked: no scrolling */
}

/* ---------- App shell: pinned navbar + content ---------- */
.app { position: fixed; inset: 0; display: grid; grid-template-rows: var(--bar) 1fr; }

/* Brand "pixel" field — one continuous full-bleed surface behind the whole UI */
.pixels { position: fixed; inset: 0; z-index: 0; pointer-events: none; contain: layout style paint; }
.px { position: absolute; display: block; opacity: 0; transform: scale(.55); transform-origin: center; }
.px.show { opacity: 1; transform: none; }
.pixels.intro .px { transition: opacity .55s ease, transform .6s cubic-bezier(.2,.85,.25,1); will-change: transform, opacity; }

/* ---------- Navbar ---------- */
.topbar {
  position: relative; z-index: 20;
  display: flex; align-items: center;
  padding: 0 clamp(16px, 3vw, 30px);
  background: var(--glass);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 18px rgba(0,0,0,.18);
}
.topbar::after {                /* faint glass sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 55%);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .topbar {
    /* blur ONLY — no saturate/brightness/contrast — so a square's color is
       unchanged through the glass and matches its native color exactly. */
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
}

.brand-sm { display: inline-flex; align-items: center; color: var(--ink); line-height: 0; text-decoration: none; }
.brand-sm svg { height: 24px; width: auto; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

/* Hamburger (mobile only): three-dot icon. White on the dark UI; the black
   variant is wired for a future light theme via html[data-theme="light"]
   (keyed to the site theme, NOT the OS, so it can't go invisible on dark). */
.menu-btn {
  display: none;            /* desktop: hidden (inline links shown instead) */
  margin-left: auto;
  width: 44px; height: 44px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: transparent url("white_menu.svg") no-repeat center / 26px auto;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn:hover, .menu-btn:focus-visible { background-color: rgba(255,255,255,.08); outline: none; }
html[data-theme="light"] .menu-btn { background-image: url("black_menu.svg"); }

/* Primary nav */
.topnav { display: flex; margin-left: auto; align-items: center; gap: 2px; }
.topnav a {
  position: relative; display: inline-block;
  padding: 8px 14px; border-radius: 9px;
  color: rgba(255,255,255,.82); text-decoration: none;
  font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
  transition: color .2s, background .2s;
}
.topnav a:hover, .topnav a:focus-visible { color: #fff; background: rgba(255,255,255,.08); outline: none; }
.topnav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.10); }
.topnav a[hidden] { display: none; }
/* ---------- Hero stage ---------- */
.stage {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
}

/* Home hero — the wordmark */
.brand {
  position: relative; z-index: 1; margin: 0;
  width: min(86%, 880px); color: var(--ink); line-height: 0;
  opacity: 0; transform: translateY(14px);
  animation: brand-in .8s cubic-bezier(.2,.85,.25,1) .06s forwards;
}
.brand svg { display: block; width: 100%; height: auto; }
@keyframes brand-in { to { opacity: 1; transform: none; } }
@media (orientation: landscape) and (max-height: 560px) { .brand { width: min(72%, 640px); } }

/* Sub-page hero — page title + "coming soon" */
.page-hero {
  position: relative; z-index: 1; text-align: center;
  opacity: 0; transform: translateY(14px);
  animation: brand-in .7s cubic-bezier(.2,.85,.25,1) .06s forwards;
}
.page-title {
  margin: 0; color: var(--ink);
  font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(44px, 10vw, 112px); letter-spacing: -.02em; line-height: .92;
}
.page-soon {
  margin: 20px 0 0; padding-left: .44em;   /* nudge for the trailing letter-spacing */
  font-weight: 500; font-size: clamp(12px, 2.4vw, 15px);
  letter-spacing: .44em; text-transform: uppercase; color: rgba(255,255,255,.5);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Mobile (< 860px): hamburger + dropdown menu ---------- */
@media (max-width: 859.98px) {
  .menu-btn { display: inline-flex; }

  .topnav {
    position: absolute; top: calc(var(--bar) + 6px); right: clamp(10px, 3vw, 18px);
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 8px; min-width: 210px;
    background: rgba(12,12,16,.92);
    border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.55);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(.98); transform-origin: top right;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .topnav {
      background: rgba(12,12,16,.6);
      -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    }
  }
  .topnav.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity .18s ease, transform .18s ease;
  }
  .topnav a { display: block; width: 100%; padding: 11px 14px; font-size: 14px; border-radius: 9px; }}

@media (prefers-reduced-motion: reduce) {
  .px, .px.show { opacity: 1; transform: none; }
  .pixels.intro .px { transition: none; }
  .brand, .page-hero { opacity: 1; transform: none; animation: none; }
}