@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Inter+Tight:wght@300;400;500&display=swap');

:root {
  --bg: #000000;
  --fg: #ffffff;
}

/* One family, two cuts. No display serif, no second voice — the restraint is
   the point. Inter for anything you read, Inter Tight for anything you see. */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
}

/* Headlines. Large, light, and tracked in tight — the whole premium effect is
   negative letter-spacing that scales with the size. */
.display {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.display-sm {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Small caps-ish labels: the only place tracking opens up. */
.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Liquid glass
   Panels and pills. The rim is a masked gradient border, not a real border,
   so it can fade from bright at the top and bottom to nothing at the sides.
--------------------------------------------------------------------------- */
.liquid-glass {
  background: rgba(0, 0, 0, 0.10);
  background-blend-mode: luminosity;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Same treatment, no background fill, and a rim that never reaches zero —
   on a 56px circle the transparent band would break the ring into two arcs. */
.liquid-glass-circle {
  background-blend-mode: luminosity;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.22) 30%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.22) 70%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Text auras
   White type has to survive the bright frames of the video. A wide, soft dark
   glow does that without reading as a drop shadow.
--------------------------------------------------------------------------- */
.aura-strong { text-shadow: 0 0 72px rgba(0, 0, 0, 0.42), 0 4px 28px rgba(0, 0, 0, 0.28); }
.aura-soft   { text-shadow: 0 0 30px rgba(0, 0, 0, 0.32), 0 1px 10px rgba(0, 0, 0, 0.20); }

/* ---------------------------------------------------------------------------
   Board
   The bonding-curve meter. Monochrome: fill is white, track is the glass.
--------------------------------------------------------------------------- */
.curve-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.curve-fill {
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}

/* Scrollbars, where a column overflows. */
.thin-scroll::-webkit-scrollbar { width: 6px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

/* The one place the page reveals loading state: a dash, never a zero. */
.dash { color: rgba(255, 255, 255, 0.35); }


/* ---------------------------------------------------------------------------
   Hover
   The page has no other motion, so these stay small on purpose: a one-pixel
   lift and a change of weight in the colour. Anything larger would fight the
   video, which is the only thing meant to move.
--------------------------------------------------------------------------- */
/* The attribute selector is deliberate: Tailwind's own `transition-colors`
   utility is a single class, so a plain `nav a` loses to it and transform would
   snap instead of easing. */
nav a[href],
nav button[class] {
  transition: color 220ms ease, transform 220ms ease, background-color 220ms ease;
}

nav a:hover {
  transform: translateY(-1px);
}

/* The solid pills — "Launch a coin", "Open Pulse" — lift and swell a hair. */
nav a.bg-white:hover,
nav button.bg-white:hover {
  transform: translateY(-1px) scale(1.03);
}

/* The round glass buttons in the footer of the hero. */
.liquid-glass-circle {
  transition: transform 260ms ease, color 260ms ease, background-color 260ms ease;
}

.liquid-glass-circle:hover {
  transform: translateY(-2px) scale(1.05);
}

/* The credit pill, and any other glass pill that is a link. */
a.liquid-glass {
  transition: color 220ms ease, transform 220ms ease;
}

a.liquid-glass:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  nav a,
  nav button,
  .liquid-glass-circle,
  a.liquid-glass {
    transition: color 220ms ease;
  }
  nav a:hover,
  nav a.bg-white:hover,
  nav button.bg-white:hover,
  .liquid-glass-circle:hover,
  a.liquid-glass:hover {
    transform: none;
  }
}


/* The view tabs scroll sideways on a phone; the bar itself would sit on the
   glass and look like a defect, so it is hidden while the scrolling stays. */
.overflow-x-auto::-webkit-scrollbar { height: 0; }
.overflow-x-auto { scrollbar-width: none; }