/*
 * Base layer — reset, typography, shared chrome (topbar, buttons, chips),
 * entrance-reveal primitives and the accessibility fallbacks.
 */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  /* Spacing lives in rem so a larger system text size scales the layout with it. */
  font: 400 100%/1.5 var(--font-sans);
  color: var(--ink);
  background: var(--app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3 { margin: 0; font-weight: 680; }

h1 {
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: var(--t-display-track);
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: var(--t-h2-track);
}

h3 {
  font-size: var(--t-h3);
  line-height: 1.16;
  letter-spacing: -0.024em;
}

p { margin: 0; }
/* hidden must win over any display rule below it. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { width: var(--stage-w); margin-inline: auto; }

.kicker {
  font-size: var(--t-micro);
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker-dark { color: var(--on-night-3); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: -0.006em;
}

.lede-dark { color: var(--on-night-2); }
.accent { color: var(--blue); }

/* Grain — a single fixed layer, never animated. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.36'/></svg>");
}

/* ---------- Topbar: a translucent material, content scrolls under ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: max(22px, calc((100vw - var(--stage-w)) / 2));
  color: var(--on-night);
  transition: color 300ms var(--spring), background 300ms var(--spring),
    backdrop-filter 300ms var(--spring), border-color 300ms var(--spring);
  border-bottom: 1px solid transparent;
  /* Dark translucent material by default: content scrolling beneath never
     visually collides with the brand/logo. The intro hides the bar anyway,
     and .is-light swaps the material on light scenes. */
  background: rgba(8, 10, 15, 0.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.topbar.is-light {
  color: var(--ink);
  background: rgba(247, 248, 245, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom-color: var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; }

/* ─── Brand mark ───
   The mark is a complete object: envelope silhouette, fold panels and the
   illuminated X. It needs no plate or gradient behind it, so the container is
   just a box that clips. */
.brand .mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  overflow: hidden;
}

.mark svg, .mark img { display: block; }

/* Two constructions of the same mark, stacked. The navbar crosses light and
   dark scenes, so the envelope swaps to whichever keeps its silhouette legible
   against the page — on the same 300ms curve the topbar itself uses.
   (Under reduced motion the global rule shortens this to a 140ms cross-fade,
   which is opacity only and so stays vestibular-safe.) */
.brand .mark .xv-mark { grid-area: 1 / 1; transition: opacity 300ms var(--spring); }
.xv-on-light { opacity: 0; }
.topbar.is-light .xv-on-dark { opacity: 0; }
.topbar.is-light .xv-on-light { opacity: 1; }

/* Entrance: the mark arrives closed, the intersection lights, the X appears.
   Plays once, ~780ms, then holds. */
.xv-mark .xv-beam { animation: xv-open 780ms cubic-bezier(0.33, 1, 0.5, 1) 220ms both; }
.xv-mark .xv-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: xv-core 780ms cubic-bezier(0.33, 1, 0.5, 1) 260ms both,
             xv-breathe 5.5s ease-in-out 1200ms infinite;
}

@keyframes xv-open {
  from { opacity: 0; }
  55%  { opacity: 1; }
  to   { opacity: 1; }
}

@keyframes xv-core {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: scale(1); }
}

/* A very slow internal glow — presence, not pulsing. */
@keyframes xv-breathe {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .xv-mark .xv-beam, .xv-mark .xv-core { animation: none; opacity: 1; }
}

.brand b { display: block; font-size: 0.88rem; font-weight: 730; letter-spacing: -0.025em; }
.brand-words > span {
  display: block;
  margin-top: 1px;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  opacity: 0.5;
}

.topnav { display: flex; align-items: center; gap: 6px; }

.topnav a {
  font-size: 0.79rem;
  font-weight: 640;
  padding: 8px 12px;
  border-radius: 11px;
  opacity: 0.72;
  transition: opacity 180ms var(--spring), background 180ms var(--spring);
}

.topnav a:hover { opacity: 1; background: rgba(127, 137, 155, 0.12); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding-inline: 22px;
  border: 0;
  border-radius: 15px;
  font-size: 0.86rem;
  font-weight: 690;
  letter-spacing: -0.012em;
  /* Feedback lives on the press, and it is instant. */
  transition: transform 110ms ease-out, background 200ms var(--spring),
    box-shadow 200ms var(--spring), opacity 200ms var(--spring);
  will-change: transform;
}

.btn:active { transform: scale(0.972); }

.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 26px rgba(14, 16, 20, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-primary:hover { background: #1c212b; }

.btn-blue {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 11px 26px rgba(18, 101, 242, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-blue:hover { background: var(--blue-dark); }

.btn-light {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(6, 8, 13, 0.3);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-night);
  border: 1px solid var(--night-line-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* Over a light scene the ghost button has to invert or it disappears. */
.topbar.is-light .btn-ghost {
  background: rgba(14, 16, 20, 0.045);
  border-color: var(--line-2);
  color: var(--ink);
}

.topbar.is-light .btn-ghost:hover { background: rgba(14, 16, 20, 0.08); }

.btn-quiet {
  background: rgba(14, 16, 20, 0.045);
  color: var(--ink-2);
}

.btn-quiet:hover { background: rgba(14, 16, 20, 0.075); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding-inline: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.77rem;
  font-weight: 650;
  color: var(--ink-2);
  transition: transform 110ms ease-out, background 180ms var(--spring), border-color 180ms var(--spring);
}

.chip:hover { background: #fff; border-color: var(--line-2); }
.chip:active { transform: scale(0.96); }
.chip-dark { background: var(--ink); color: #fff; border-color: transparent; }
.chip-dark:hover { background: #1c212b; }

.pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 10px;
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 720;
  letter-spacing: 0.01em;
}

.pill-green { background: var(--green-soft); color: var(--green); }
.pill-blue { background: var(--blue-soft); color: var(--blue); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 14%, transparent);
}

/* ---------- Entrance reveal ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 700ms var(--spring-out), transform 700ms var(--spring-out);
  will-change: transform, opacity;
}

.reveal.in { opacity: 1; transform: none; }

/* Word-level blur reveal — the hero materialises rather than sliding. */
.blur-word {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 0.24em, 0) scale(0.985);
  transition: opacity 900ms var(--spring-out), filter 900ms var(--spring-out),
    transform 900ms var(--spring-out);
}

.blur-word.in { opacity: 1; filter: blur(0); transform: none; }

/* ---------- Accessibility fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 140ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .blur-word { opacity: 1; filter: none; transform: none; }
  .btn:active, .chip:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar.is-light { background: var(--app); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .btn-ghost { background: rgba(255, 255, 255, 0.14); backdrop-filter: none; }
  .grain { display: none; }
}

/* The mark at text scale — hero kicker and footer lockup. 24px is the smallest
   size at which the full mark keeps its fold detail, so these match the navbar
   construction exactly rather than dropping to the compact build. */
.mark-sm {
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  vertical-align: -6px;
}

.brand-kicker { display: inline-flex; align-items: center; gap: 9px; }
.foot-brand { display: inline-flex; align-items: center; gap: 9px; }
.foot-brand b { font-weight: 700; }