/* ── Offsuit Labs · launching soon ────────────────────────────────────────── */

:root {
  /* dark grey ground */
  --bg:        #1b1c1e;
  --bg-deep:   #141517;
  --panel:     #212326;

  /* silver greys */
  --silver:    #c8ced4;
  --silver-hi: #eef1f4;
  --silver-lo: #8b9299;
  --silver-xl: #5d6369;
  --line:      #34373b;

  /* four-colour deck, desaturated so it still sits calmly on dark grey */
  --spade:       #8b9299;   /* silver */
  --club:        #cdd3d9;   /* #9bb9a2 green  */
  --heart:       #eef1f4; /* #c79ba2    red    */
  --diamond:     #5d6369;   /* #93aac6 blue   */

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  /* block art needs EVERY glyph from one font that covers U+2588 — if the
     blocks fall back to a different font than the spaces, the columns drift */
  --mono-art: "DejaVu Sans Mono", "Liberation Mono", "Noto Sans Mono", "Menlo",
              "Cascadia Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 50% -10%, #26282b 0%, transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
  color: var(--silver);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* film grain + vignette so the flat grey has some tooth */
.grain, .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.grain {
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 5s steps(6) infinite;
}
.vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,.55) 100%); }

@keyframes grain {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-3%, 2%) }  40% { transform: translate(2%, -3%) }
  60% { transform: translate(-2%, -2%) } 80% { transform: translate(3%, 1%) }
}

/* ── layout ───────────────────────────────────────────────────────────────── */
.stage {
  position: relative; z-index: 1;
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 5.5rem) clamp(1.1rem, 5vw, 2.5rem) 3.5rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: clamp(1.3rem, 3.2vh, 2.1rem);
}

/* staggered deal-in */
.reveal { animation: deal .9s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--d, 0s); }
@keyframes deal {
  from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ── the clover mark ──────────────────────────────────────────────────────── */
.mark { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; }

.clover {
  width: clamp(165px, 28vh, 235px); height: auto;
  overflow: visible;
}

.halo { animation: breathe 5.5s ease-in-out infinite; transform-origin: 160px 160px; }
@keyframes breathe {
  0%,100% { opacity: .12; transform: scale(.86) }
  50%     { opacity: .26; transform: scale(1.02) }
}

/* ── the rotor ─────────────────────────────────────────────────────────────
   Ring quarters and leaves live in ONE <g> and turn together as a single
   rigid piece. Because they never move relative to each other, a leaf and
   the quarter behind it — always the same fill, no separate "ring colour" —
   stay in perfect registration at every angle: nothing to seam, ever. The
   continuous turn is the loading tell, in place of a spinner. */
.rotor {
  transform-origin: 160px 160px;
  transform-box: view-box;
  animation: spin 10s linear infinite;
  animation-delay: 1.05s; /* starts once the deal-in below has finished */
}
@keyframes spin { to { transform: rotate(360deg) } }

.wedge {
  stroke: none;
  opacity: 0;
  animation: wedge-in .7s ease 1.05s both;
}
.wedge--heart   { fill: var(--heart);   }
.wedge--club    { fill: var(--club);    }
.wedge--diamond { fill: var(--diamond); }
.wedge--spade   { fill: var(--spade);   }
@keyframes wedge-in { to { opacity: 1 } }

.leaf {
  transform-box: fill-box; transform-origin: 50% 50%;
  /* stroke in the leaf's own colour rounds off every sharp join */
  stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; paint-order: stroke;
  animation: pop .8s cubic-bezier(.18,.9,.28,1.2) both;
  animation-delay: var(--d);
}
@keyframes pop {
  from { opacity: 0; scale: .35; }
  60%  { opacity: 1; scale: 1.07; }
  to   { opacity: 1; scale: 1; }
}

.leaf--spade   { fill: var(--spade);   stroke: var(--spade);   }
.leaf--club    { fill: var(--club);    stroke: var(--club);    }
.leaf--heart   { fill: var(--heart);   stroke: var(--heart);   }
.leaf--diamond { fill: var(--diamond); stroke: var(--diamond); }

@keyframes fade-in { to { opacity: .75 } }

.mark-cap {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--silver-xl);
  opacity: 0; animation: fade-in 1.2s ease 1.15s both;
}
.mark:hover .mark-cap { color: var(--silver-lo); }

/* ── the logo ──────────────────────────────────────────────────────────────
   The official mark (same geometry as the favicon and the footer credit),
   sized with real presence but a clear step down from the hero clover above
   it — this holds still, on purpose, while that one spins. */
.brand {
  display: block;
  height: clamp(52px, 9vh, 76px);
  width: auto;
  filter: drop-shadow(0 0 14px rgba(74, 122, 184, .22));
}

/* ── wordmark ─────────────────────────────────────────────────────────────
   Both rows are svgbob-generated glyphs — plain <rect> fills, no font/kerning/
   line-height fight the way monospace block characters needed workarounds
   for (see git history: hairline seams between blocks, per-row centring
   drift). Source files: public/assets/offbob.svg, public/assets/labsbob.svg.

   The gradient shine is applied via mask-image instead of background-clip:
   text, since these are shapes, not glyphs — same gradient, same animation,
   just clipped by the SVG's silhouette. The SVGs are inlined as base64 data
   URIs rather than referenced by path: mask-image is a stricter external
   resource load than background-image in some browsers, and it failed
   silently under file:// when pointed at a sibling file. A data URI can't
   fail to resolve — there's nothing to fetch.

   font-size is a sizing anchor only (nothing here renders as text): both
   rows share one clamp() so they grow with the viewport together, but each
   row's own height/width is set independently on .wordmark-main and
   .wordmark-sub below — not inherited from one shared box — so either can be
   resized on its own. Width is always height x the SVG's real aspect ratio
   (392:128 for OFFSUIT, 224:128 for LABS — both are 128 tall now, not the
   original 96, because of the extra rows the binary-noise margin added), so
   mask-size:100% 100% stretches evenly and nothing distorts. */
.wordmark {
  margin: .2rem 0 0; font-weight: 400;
  display: flex; flex-direction: column; align-items: center;
  gap: .55em;
  font-size: clamp(5px, 1.72vw, 12px);
}

.wordmark-line {
  display: block;
  background: linear-gradient(100deg,
      var(--silver-lo) 0%, var(--silver-hi) 42%, #ffffff 50%, var(--silver-hi) 58%, var(--silver-lo) 100%);
  background-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  filter: drop-shadow(0 0 26px rgba(200,206,212,.10));
  animation: shine 7s linear infinite;
}

.wordmark-main {
  height: 9.9em; /* 150% of 6.6em */
  width: 30.319em; /* 9.9em x (392/128) */
  -webkit-mask-image: url("offglitch.svg");
          mask-image: url("offglitch.svg");
}

.wordmark-sub {
  height: 9.9em; /* 150% of 6.6em */
  width: 17.325em; /* 9.9em x (224/128) */
  opacity: .82;
  -webkit-mask-image: url("labsglitch.svg");
          mask-image: url("labsglitch.svg");
}

@keyframes shine {
  from { background-position: 130% 0 }
  to   { background-position: -130% 0 }
}

/* ── launching soon rule ──────────────────────────────────────────────────── */
.status-line {
  display: flex; align-items: center; gap: 1rem; width: min(100%, 34rem);
  margin: .2rem 0 0;
}
.rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.tagword {
  font-size: .78rem; letter-spacing: .42em; text-transform: uppercase;
  color: var(--silver-lo); white-space: nowrap; padding-left: .42em;
  animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .6 } 50% { opacity: 1 } }

/* ── definition ───────────────────────────────────────────────────────────── */
.define {
  width: min(100%, 33rem); text-align: left;
  border: 1px solid var(--line); border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
  padding: 1.05rem 1.25rem 1.15rem;
}
.define-head { margin: 0 0 .55rem; color: var(--silver-hi); font-size: .95rem; }
.define-head i { color: var(--silver-xl); font-style: normal; }
.define-list { margin: 0; padding-left: 1.35rem; font-size: .84rem; color: var(--silver-lo); }
.define-list li { margin: .25rem 0; }
.define-list li::marker { color: var(--silver-xl); }
.n {
  display: inline-block; margin-right: .5em; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--silver-xl);
}

/* ── vision ───────────────────────────────────────────────────────────────── */
.vision {
  max-width: 40rem; margin: 0; font-size: .92rem; color: var(--silver-lo); text-wrap: balance;
}
.vision b { color: var(--silver); font-weight: 600; }

/* ── loader ───────────────────────────────────────────────────────────────── */
.loader { width: min(100%, 34rem); }

.loader-top {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .78rem; color: var(--silver-lo);
}
.spinner { font-size: .95rem; color: var(--spade); transition: color .18s linear; }
.loader-msg { letter-spacing: .06em; }
.caret { margin-left: -.42rem; color: var(--silver-xl); animation: blink 1.05s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.loader-pct { margin-left: auto; color: var(--silver); font-variant-numeric: tabular-nums; }

.bar {
  margin: .4rem 0 0;
  font-family: var(--mono-art);   /* same reason as the wordmark: █ ▓ ░ */
  font-size: clamp(9px, 2.5vw, 14px);
  letter-spacing: -.03em;
  color: var(--silver);
  white-space: pre; overflow: hidden;
  color: var(--silver-xl);
}
.bar-fill { color: var(--silver-hi); text-shadow: 0 0 14px rgba(200,206,212,.35); }
.bar-rest { color: #3a3e42; }

/* the bar rests on 77 — keep it breathing so it reads as paused, not broken */
.loader.is-settled .bar-fill { animation: rest-glow 3.6s ease-in-out infinite; }
@keyframes rest-glow {
  0%,100% { opacity: .8; text-shadow: 0 0 10px rgba(200,206,212,.20) }
  50%     { opacity: 1;  text-shadow: 0 0 18px rgba(200,206,212,.45) }
}
.loader.is-settled .loader-pct { color: var(--silver-hi); }

.hand {
  margin: .75rem 0 0; font-size: .72rem; letter-spacing: .1em;
  color: var(--silver-xl); text-transform: uppercase;
}
.c-s { color: var(--spade) } .c-d { color: var(--diamond) }
.c-h { color: var(--heart) } .c-c { color: var(--club) }

/* ── footer ───────────────────────────────────────────────────────────────── */
.foot { margin-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.foot-line { margin: 0; font-size: .76rem; color: var(--silver-xl); max-width: 34rem; text-wrap: balance; }
.foot-meta { margin: 0; font-size: .72rem; color: var(--silver-xl); letter-spacing: .05em; }
.foot-meta a { color: var(--silver-lo); text-decoration: none; border-bottom: 1px solid var(--line); }
.foot-meta a:hover { color: var(--silver-hi); border-color: var(--silver-lo); }
.dot { margin: 0 .5rem; }

/* the official mark (ring + hanging diamond), used subtly here — the animated
   clover above is a launch-only teaser, not the brand mark */
.brandmark {
  width: auto; height: 1.4em;
  vertical-align: -.32em;
  margin-right: .38em;
  opacity: .82;
}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 460px) {
  .define { padding: .9rem 1rem; }
  .loader-top { flex-wrap: wrap; }
  .hand { letter-spacing: .06em; }
}

/* ── motion off ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .grain { display: none; }
  .wordmark-line { background: var(--silver-hi); }
}