/* RSH AI — landing v3 rules. Design tokens live in site-tokens.css, loaded before this file. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100svh;
  transition: color 0.35s ease;
}
a { color: inherit; text-decoration: none; }
em { font-style: normal; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
::selection { background: var(--accent-soft); }

/* ---------- ground behind the glass ---------- */
.field {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(900px 520px at 24% 22%, var(--field-sheen), transparent 72%),
    radial-gradient(760px 500px at 82% 76%, var(--field-accent), transparent 76%),
    radial-gradient(620px 340px at 58% 56%, var(--field-depth), transparent 72%),
    var(--bg);
  transition: background 0.4s ease;
}
/* quiet source texture for the glass: no hard glow, no blob lighting */
.field::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 360px at 50% 28%, var(--field-accent), transparent 72%);
  opacity: .55;
}

/* ---------- liquid glass ---------- */
.glass {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  -webkit-backdrop-filter: blur(26px) saturate(145%) contrast(1.07);
  backdrop-filter: blur(26px) saturate(145%) contrast(1.07);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 1px 1px var(--glass-spec),
    inset 0 -1px 2px var(--glass-spec-2),
    inset 0 0 0 0.6px rgba(255,255,255,0.07),
    0 16px 42px var(--glass-shadow);
}
[data-theme="dark"] .glass {
  box-shadow:
    inset 0 1px 1px var(--glass-spec),
    inset 0 -1px 2px var(--glass-spec-2),
    inset 0 0 0 0.6px rgba(255,255,255,0.05),
    0 16px 42px var(--glass-shadow);
}
.glass > :not(.lens) { position: relative; z-index: 1; } /* content sits above the lens */
.glass > .lens {
  position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  pointer-events: none; mix-blend-mode: screen; opacity: .18;
  background:
    radial-gradient(280px 140px at var(--gx, 18%) var(--gy, 10%), var(--glass-spec), transparent 76%),
    linear-gradient(180deg, rgba(255,255,255,0.07), transparent 34%, transparent 76%, rgba(0,0,0,0.04));
}
[data-theme="dark"] .glass > .lens { opacity: .22; }
/* subtle gradient rim-light, guarded for browsers with mask support */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .glass::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2;
    padding: .75px; pointer-events: none; opacity: .42;
    background: linear-gradient(150deg, var(--glass-spec) 0%, transparent 30%, transparent 72%, var(--glass-spec-2) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
}
/* accessibility: drop translucency for users who ask for it */
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass > .lens { display: none; }
}

/* The Nexa Glass theme (a screenshot ground under the landing panels) is retired: Reza asked for
   the landing to carry no screenshot behind it for now, and for the theme switch to offer light
   and dark only. Its ground, tokens and icon are gone rather than left dormant. */

/* ---------- shared chrome ---------- */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px clamp(22px, 4.5vw, 56px);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: var(--fs-lead); letter-spacing: 0.18em;
}
/* The mark ships as one monochrome file and takes the theme's ink here, the same way the
   partner logos do. The filter forces solid ink whatever colour the file itself carries,
   so the site's own theme toggle wins over the OS colour scheme. */
.brand-core { width: 24px; height: 24px; display: block; flex: none; filter: var(--logo-filter); }
.brand-core.mini { width: 16px; height: 16px; opacity: .9; }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; }
.bar-links { display: flex; align-items: center; gap: 22px; }
.bar-links a { font-size: var(--fs-lead); color: var(--ink-60); letter-spacing: 0.04em; transition: color 0.25s ease; }
.bar-links a:hover { color: var(--ink); }
.bar-links .pill {
  color: var(--pill-ink);
  background: var(--pill-bg);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  box-shadow: 0 8px 24px rgba(12, 19, 34, 0.25);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.3s ease;
}
.bar-links .pill:hover { color: var(--pill-ink); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(12, 19, 34, 0.32); }
/* signed-out pair: quiet "Sign in" text link + "Sign up" pill as the primary action for new
   visitors. On mobile the text link collapses with the other nav links (see polish.css) and the
   pill carries the entry on its own. */
.bar-links .bar-signin { font-weight: 500; color: var(--ink); }
/* session.js hides this one when signed in - restate [hidden] so no layout rule outranks it */
.bar-links a[hidden] { display: none !important; }
/* signed-in: the pill carries the account name + person glyph (see session.js) */
.bar-links .pill.is-account { display: inline-flex; align-items: center; gap: 7px; padding-left: 14px; }
.bar-links .pill.is-account svg { flex: none; opacity: 0.85; }
/* theme toggle */
.theme-tog {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: var(--r-pill); cursor: pointer; color: var(--ink-60);
  background: var(--glass-tint); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: color 0.25s ease, transform 0.25s ease;
}
.theme-tog:hover { color: var(--ink); transform: translateY(-1px); }
.theme-tog svg { width: 16px; height: 16px; display: block; }
/* The button shows the theme you will GET, not the one you are in - light shows a moon, dark
   shows a sun. */
.theme-tog .ico-sun { display: none; }
[data-theme="dark"] .theme-tog .ico-moon { display: none; }
[data-theme="dark"] .theme-tog .ico-sun { display: block; }

.foot {
  display: flex; align-items: center; gap: 24px;
  padding: 30px clamp(22px, 4.5vw, 56px) 38px;
  font-size: var(--fs-lead); color: var(--ink-40); letter-spacing: 0.03em;
  border-top: 1px solid var(--hairline);
}
.foot a:hover { color: var(--ink); }
.foot .spacer { flex: 1; }

/* ---------- caret ---------- */
.caret {
  display: inline-block;
  width: 3px; height: 0.92em;
  background: var(--accent);
  vertical-align: -0.12em;
  margin-left: 2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- front door (rshai.dev) ---------- */
.home { min-height: 100svh; display: flex; flex-direction: column; }
.home-main {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  /* clear gap under the hero CTA so the Meet Nexa card + shot sit below the Beta button, not under it */
  gap: clamp(44px, 7vh, 72px);
  padding: 0 clamp(22px, 4.5vw, 56px);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.statement {
  font-weight: 500;
  font-size: clamp(44px, 7.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.statement em { color: var(--accent); letter-spacing: -0.01em; }
.statement .ln { display: block; overflow: hidden; padding-bottom: 0.13em; margin-bottom: -0.13em; }
.statement .ln > span {
  display: inline-block;
  transform: translateY(130%);
  animation: rise 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes rise { to { transform: none; } }

.door-row { perspective: 1100px; position: relative; z-index: 0; width: min(620px, 100%); }
.door-row::before {
  content: ""; position: absolute; inset: -26px auto auto -30px;
  width: min(620px, calc(100vw - 44px)); height: 144px; border-radius: 34px;
  pointer-events: none; z-index: -1; opacity: .28; filter: blur(10px);
  background: radial-gradient(520px 120px at 50% 50%, var(--field-accent), transparent 78%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
[data-theme="dark"] .door-row::before { opacity: .30; }
.door {
  display: flex; align-items: center; gap: 20px;
  width: min(560px, 100%);
  height: 100%; /* fill the column half so the card matches the screenshot height */
  padding: 22px 26px;
  transform-style: preserve-3d;
  opacity: 0;
  animation: door-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
  transition: box-shadow 0.4s ease;
  will-change: transform;
}
@keyframes door-in { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
.door:hover {
  box-shadow:
    inset 0 1px 1px var(--glass-spec),
    inset 0 -1px 2px var(--glass-spec-2),
    0 18px 46px var(--glass-shadow);
}
.door .glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.06), transparent 66%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.door:hover .glare { opacity: .24; }
.door .mark {
  flex: none;
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  background: transparent;
  transform: translateZ(28px);
  overflow: hidden;
}
.door .mark img { width: 74px; height: 74px; display: block; }
.door .body { flex: 1; min-width: 0; transform: translateZ(18px); }
.door .name {
  display: flex; align-items: baseline; gap: 10px;
  font-weight: 600; font-size: 21px; letter-spacing: -0.01em;
}
.door .name .beta {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em;
  color: var(--accent); text-transform: uppercase;
}
/* the CTA shares the row: keep the copy in even lines beside it */
.door .desc { margin-top: 3px; font-size: var(--fs-copy); color: var(--ink-60); }
.door .body .desc { display: block; text-wrap: balance; }

/* ---------- Nexa "in the making" live count-up (pinned top-right corner) ---------- */
.door .uptime { position: absolute; top: 14px; right: 16px; z-index: 3; display: flex; align-items: center; gap: 7px; transform: translateZ(30px); pointer-events: none; }
.door .ut-cap { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-40); white-space: nowrap; }
.door .ut-clock { display: flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: var(--r-sm); background: var(--glass-tint); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 1px var(--glass-spec); }
.door .ut-cell { display: flex; align-items: baseline; gap: 1px; }
.door .ut-cell b { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-sub); line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.door .ut-cell i { font-style: normal; font-size: var(--fs-micro); font-weight: 600; color: var(--accent); }
.door .ut-cell:last-child b { color: var(--accent); }
.door .body { padding-right: 6px; }
@media (max-width: 560px) {
  .door .uptime { position: static; transform: translateZ(20px); order: 3; width: 100%; justify-content: flex-start; margin-top: 2px; }
  /* The cap used to be hidden here, which left a bare "175d 20h 08m 12s" on the card with
     nothing saying what was being counted. It shrinks now instead of disappearing. */
  .door .ut-cap { font-size: 8px; letter-spacing: 0.1em; }
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .door, .statement .ln > span { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .door { flex-wrap: wrap; }
}