src/app/globals.css

@import "tailwindcss";

/* ── Design tokens ────────────────────────────────────────────────
   Consolidated palette + surface scale. Use via Tailwind arbitrary
   values (bg-[var(--surface-1)]) or via the semantic helpers below. */
:root {
  /* surface / depth scale */
  --bg: #0a0e17;
  --surface-0: #0d1220;
  --surface-1: #11172a;
  --surface-2: #151c33;
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.1);

  /* text scale */
  --text-primary: #e7ebf3;
  --text-muted: #9aa3b5;
  --text-faint: #5b6274;

  /* single accent (cyan). Orange is reserved for destructive. */
  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.18);
  --accent-ring: rgba(56, 189, 248, 0.55);

  --radius: 6px;
}

@theme inline {
  --color-bg: var(--bg);
  --color-surface-0: var(--surface-0);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-accent: var(--accent);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html {
  font-size: 18px;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-feature-settings:
    "cv11" 1,
    "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numeric readouts always use tabular figures so rows don't jitter. */
.tabular,
[data-tabular] {
  font-variant-numeric: tabular-nums;
}

/* ── Semantic helpers ────────────────────────────────────────────── */
.panel {
  @apply rounded-md border border-white/5 bg-white/[0.02];
}
.panel-raised {
  @apply rounded-md border border-white/10 bg-white/[0.03];
}

/* Scrollbar: thin, subtle, matches the surface palette. */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.12);
  background-clip: padding-box;
}

/* ── Background video (used on the landing page) ─────────────────── */
.video-background {
  @apply fixed top-0 right-0 bottom-0 left-0 -z-10 overflow-hidden w-screen h-screen;
}
.video-background video {
  @apply absolute top-1/2 left-1/2 pointer-events-none bg-black;
  min-width: 100vw;
  min-height: 100vh;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: brightness(0.55) saturate(0.85);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.55s ease-out forwards;
}

/* Late entry — used for elements that should arrive after the hero stack
   has settled, so they read as a quiet afterthought rather than another
   simultaneous CTA. `both` fill mode keeps the element invisible during
   the delay so it doesn't briefly flash with the parent's animation. */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-late {
  animation: fadeIn 0.45s ease-out 0.55s both;
}

/* Pop animation for dropdowns — anchors at top-right and scales up
   slightly while fading in. Short enough (140ms) to feel snappy. */
@keyframes menuPop {
  from {
    opacity: 0;
    transform: translateY(-2px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-menu-pop {
  animation: menuPop 0.14s ease-out forwards;
  transform-origin: top right;
}