/* =====================================================
   VEKTOR DESIGN SYSTEM v2
   Typography scale, spacing tokens, hover states,
   focus states, shimmer animation, card polish
   ===================================================== */

/* ---- TYPOGRAPHY SCALE TOKENS ---- */
:root {
  /* Type sizes — 6-step scale */
  --text-h1: clamp(2.8rem, 6vw, 5rem);
  --text-h2: clamp(2rem, 4vw, 3rem);
  --text-h3: 1.75rem;
  --text-h4: 1.35rem;
  --text-h5: 1.05rem;
  --text-h6: 0.9rem;
  --text-body: 0.9rem;
  --text-small: 0.82rem;
  --text-caption: 0.75rem;
  --text-label: 0.7rem;

  /* Line heights */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-subheading: 1.25;
  --lh-body: 1.65;
  --lh-caption: 1.5;
  --lh-relaxed: 1.75;

  /* Letter spacing */
  --ls-display: -0.03em;
  --ls-heading: -0.025em;
  --ls-subheading: -0.018em;
  --ls-body: -0.01em;
  --ls-label: 0.06em;
  --ls-eyebrow: 0.09em;
  --ls-wide: 0.12em;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing — 8px baseline grid */
  --sp-1: 0.5rem;    /* 8px */
  --sp-2: 1rem;      /* 16px */
  --sp-3: 1.5rem;    /* 24px */
  --sp-4: 2rem;      /* 32px */
  --sp-5: 2.5rem;    /* 40px */
  --sp-6: 3rem;      /* 48px */
  --sp-8: 4rem;      /* 64px */
  --sp-10: 5rem;     /* 80px */
  --sp-12: 6rem;     /* 96px */
  --sp-16: 8rem;     /* 128px */

  /* Border radius */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 100px;

  /* Shadows */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-card:  0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 8px 32px rgba(99, 102, 241, 0.12), 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.35);
  --shadow-glow:  0 0 20px rgba(99, 102, 241, 0.2);

  /* Transitions */
  --ease-fast:   150ms ease-out;
  --ease-base:   220ms ease-out;
  --ease-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Extended surface colors (for pages that need them) */
  --surface-3: #1a1a26;
  --border-soft: rgba(99, 102, 241, 0.15);
  --border-accent: rgba(99, 102, 241, 0.3);
}

/* ================================================================
   GLOBAL RESETS & BASE
   ================================================================ */

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border, #1e1e2e);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
  transition: background var(--ease-fast);
}

/* Text selection */
::selection {
  background: rgba(99, 102, 241, 0.28);
  color: var(--text-bright, #fafafa);
}

/* ================================================================
   FOCUS STATES — WCAG AA accessible, brand-styled
   ================================================================ */

*:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 3px;
  border-radius: var(--r-sm, 6px);
  box-shadow: var(--shadow-focus);
  transition: outline var(--ease-fast), box-shadow var(--ease-fast);
}

*:focus:not(:focus-visible) {
  outline: none;
}

/* Inputs get inset focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--accent, #6366f1) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 0 0 1px var(--accent, #6366f1) !important;
}

/* Buttons/links — standard ring */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 3px;
}

/* ================================================================
   NAV REFINEMENTS
   ================================================================ */

/* Nav link underline-grow */
nav .nav-link {
  position: relative;
}

nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--text-bright, #fafafa);
  transition: width var(--ease-fast);
  pointer-events: none;
}

nav .nav-link:hover::after {
  width: 100%;
}

nav .nav-link.active::after {
  width: 100%;
  background: var(--accent, #6366f1);
}

/* Nav button — scale + glow on hover */
nav .nav-btn,
.nav-btn {
  transition: transform var(--ease-fast), box-shadow var(--ease-fast), opacity var(--ease-fast) !important;
}

nav .nav-btn:hover,
.nav-btn:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.35) !important;
  opacity: 1 !important;
}

nav .nav-btn:active,
.nav-btn:active {
  transform: scale(0.98) !important;
}

/* ================================================================
   CARD POLISH — unified hover behavior
   ================================================================ */

/* All primary card types get the lift treatment */
.how-card,
.recent-card,
.brief-card,
.brief-item,
.catalyst-card,
.catalyst-item,
.event-card,
.method-card,
.source-card {
  transition: transform var(--ease-fast), box-shadow var(--ease-fast), border-color var(--ease-fast) !important;
  will-change: transform;
}

.how-card:hover,
.recent-card:hover,
.brief-card:hover,
.brief-item:hover,
.catalyst-card:hover,
.catalyst-item:hover,
.event-card:hover,
.method-card:hover,
.source-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(99, 102, 241, 0.22) !important;
}

/* Report cards (non-interactive content cards) get a subtler lift */
.report-card {
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast) !important;
}

.report-card:hover {
  border-color: rgba(99, 102, 241, 0.18) !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.06) !important;
}

/* ================================================================
   BUTTON POLISH
   ================================================================ */

/* Primary CTA buttons (not nav) */
.cta-btn,
.search-btn,
.lead-btn,
.subscribe-btn {
  transition: transform var(--ease-fast), box-shadow var(--ease-fast), opacity var(--ease-fast) !important;
}

.cta-btn:hover,
.search-btn:hover,
.lead-btn:hover,
.subscribe-btn:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 4px 18px rgba(99, 102, 241, 0.3) !important;
  opacity: 1 !important;
}

.cta-btn:active,
.search-btn:active,
.lead-btn:active,
.subscribe-btn:active {
  transform: scale(0.98) !important;
}

/* ================================================================
   LINK UNDERLINE-GROW UTILITY
   ================================================================ */

.link-grow {
  position: relative;
  text-decoration: none;
}

.link-grow::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  transition: width var(--ease-fast);
}

.link-grow:hover::after {
  width: 100%;
}

/* ================================================================
   LIST ITEM HOVER TINTS
   ================================================================ */

.list-hover-item {
  transition: background var(--ease-fast), border-color var(--ease-fast);
  border-radius: var(--r-md, 10px);
}

.list-hover-item:hover {
  background: rgba(255, 255, 255, 0.025);
}

/* Table row hover tints */
tbody tr {
  transition: background var(--ease-fast);
}

tbody tr:hover {
  background: rgba(99, 102, 241, 0.04) !important;
}

/* ================================================================
   LOADING SHIMMER / SKELETON
   ================================================================ */

@keyframes vk-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Base skeleton container */
.skeleton-wrap {
  position: relative;
  overflow: hidden;
  background: var(--surface, #12121a);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: var(--r-lg, 14px);
}

.skeleton-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.05) 60%,
    transparent 100%
  );
  animation: vk-shimmer 1.6s ease-in-out infinite;
}

/* Skeleton line blocks */
.sk-line {
  height: 12px;
  border-radius: var(--r-sm, 6px);
  background: rgba(255, 255, 255, 0.06);
  margin-bottom: 0.65rem;
}
.sk-line:last-child { margin-bottom: 0; }
.sk-line.w-full  { width: 100%; }
.sk-line.w-3-4   { width: 75%; }
.sk-line.w-2-3   { width: 66%; }
.sk-line.w-1-2   { width: 50%; }
.sk-line.w-1-3   { width: 33%; }
.sk-line.h-title { height: 20px; width: 55%; margin-bottom: 1rem; }
.sk-line.h-sm    { height: 10px; }

/* Skeleton card for brief/catalyst lists */
.skeleton-card {
  background: var(--surface, #12121a);
  border: 1px solid var(--border, #1e1e2e);
  border-radius: var(--r-lg, 14px);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 35%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.04) 65%,
    transparent 100%
  );
  animation: vk-shimmer 1.6s ease-in-out infinite;
}

/* Inline shimmer for text being generated (ask page) */
.sk-inline {
  display: inline-block;
  width: 100%;
  height: 1em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}

.sk-inline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  animation: vk-shimmer 1.4s ease-in-out infinite;
}

/* ================================================================
   SECTION SPACING RHYTHM — 8px grid
   ================================================================ */

.section {
  padding-top: var(--sp-16, 8rem);
  padding-bottom: var(--sp-16, 8rem);
}

.section-sm {
  padding-top: var(--sp-10, 5rem);
  padding-bottom: var(--sp-10, 5rem);
}

/* Inner container spacing */
.section-header {
  margin-bottom: var(--sp-8, 4rem);
}

/* ================================================================
   TYPOGRAPHY REFINEMENTS
   ================================================================ */

/* Consistent heading rhythm across all pages */
h1 { line-height: var(--lh-display, 1.05); letter-spacing: var(--ls-display, -0.03em); }
h2 { line-height: var(--lh-heading, 1.15); letter-spacing: var(--ls-heading, -0.025em); }
h3 { line-height: var(--lh-subheading, 1.25); letter-spacing: var(--ls-subheading, -0.018em); }
h4 { line-height: 1.3; letter-spacing: -0.015em; }
h5 { line-height: 1.4; }
h6 { line-height: 1.5; }

/* Body text breathing room */
p { line-height: var(--lh-body, 1.65); }

/* Eyebrow / label text (all-caps labels) */
.eyebrow {
  font-size: var(--text-label, 0.7rem);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow, 0.09em);
  color: var(--accent, #6366f1);
}

/* ================================================================
   GRADIENT BANDING FIX — hero/section dividers
   ================================================================ */

/* Smooth gradient for section dividers — prevents banding */
.gradient-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border, #1e1e2e) 20%,
    var(--border, #1e1e2e) 80%,
    transparent 100%
  );
  border: none;
}

/* Hero background radial gradient — anti-banding with multiple stops */
.hero-glow {
  background: radial-gradient(
    ellipse 70% 50% at 50% 30%,
    rgba(99, 102, 241, 0.12) 0%,
    rgba(99, 102, 241, 0.06) 30%,
    rgba(99, 102, 241, 0.02) 60%,
    transparent 100%
  );
}

/* ================================================================
   CONTRAST FIXES — WCAG AA compliance
   ================================================================ */

/* Ensure muted text meets 4.5:1 on dark bg (#0a0a0f)
   #71717a on #0a0a0f = ~4.6:1 ✓ (just barely AA)
   For small text, bump to slightly lighter to be safe */
.text-muted-aa {
  color: #7c7c8a; /* ~4.8:1 on #0a0a0f */
}

/* Large text (18px+ or 14px bold) needs 3:1 minimum — existing muted is fine */

/* ================================================================
   ACCESSIBILITY EXTRAS
   ================================================================ */

/* Skip to main content */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--accent, #6366f1);
  color: white;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 9999;
  transition: top var(--ease-fast);
}

.skip-link:focus {
  top: 0;
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Kill shimmer animations */
  .skeleton-wrap::after,
  .skeleton-card::after,
  .sk-inline::after {
    animation: none;
    background: rgba(255, 255, 255, 0.04);
  }

  /* Kill card transforms */
  .how-card:hover,
  .recent-card:hover,
  .brief-card:hover,
  .brief-item:hover,
  .catalyst-card:hover,
  .catalyst-item:hover,
  .event-card:hover,
  .method-card:hover {
    transform: none !important;
  }

  nav .nav-btn:hover,
  .nav-btn:hover,
  .cta-btn:hover,
  .search-btn:hover {
    transform: none !important;
  }

  nav .nav-link::after,
  .link-grow::after {
    transition: none;
  }
}

/* ================================================================
   MOTION PRIMITIVES — shared scroll-reveal, stagger, mesh, flash
   All GPU-accelerated (transform + opacity only)
   ================================================================ */

/* ── Scroll Reveal Base States ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Stagger Delay Utilities ── */
.stagger-1  { transition-delay: 60ms !important; }
.stagger-2  { transition-delay: 120ms !important; }
.stagger-3  { transition-delay: 180ms !important; }
.stagger-4  { transition-delay: 240ms !important; }
.stagger-5  { transition-delay: 300ms !important; }
.stagger-6  { transition-delay: 360ms !important; }
.stagger-7  { transition-delay: 420ms !important; }
.stagger-8  { transition-delay: 480ms !important; }

/* ── Gradient Mesh Background ── */
.mesh-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

@keyframes vk-blob-fade-in {
  to { opacity: 1; }
}

@keyframes vk-blob-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(28px, -18px) scale(1.04); }
  66%  { transform: translate(-18px, 14px) scale(0.97); }
  100% { transform: translate(22px, 8px) scale(1.02); }
}

@keyframes vk-blob-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-22px, 18px) scale(1.06); }
  100% { transform: translate(14px, -10px) scale(0.96); }
}

@keyframes vk-blob-drift-3 {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(18px, -14px) scale(1.05); }
  100% { transform: translate(-8px, 18px) scale(0.98); }
}

.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  will-change: transform;
}

.mesh-blob-1 {
  width: 560px; height: 560px;
  top: -180px; left: calc(50% - 280px);
  background: radial-gradient(circle at center, var(--mesh-color-1, rgba(79,70,229,0.14)) 0%, transparent 70%);
  animation:
    vk-blob-fade-in 2s ease forwards,
    vk-blob-drift-1 20s ease-in-out 2s infinite alternate;
}

.mesh-blob-2 {
  width: 380px; height: 380px;
  bottom: -60px; right: 8%;
  background: radial-gradient(circle at center, var(--mesh-color-2, rgba(99,102,241,0.1)) 0%, transparent 70%);
  animation:
    vk-blob-fade-in 2.5s ease forwards,
    vk-blob-drift-2 26s ease-in-out 2.5s infinite alternate;
}

.mesh-blob-3 {
  width: 280px; height: 280px;
  top: 40%; left: -50px;
  background: radial-gradient(circle at center, var(--mesh-color-3, rgba(168,85,247,0.07)) 0%, transparent 70%);
  animation:
    vk-blob-fade-in 3s ease forwards,
    vk-blob-drift-3 18s ease-in-out 3s infinite alternate;
}

/* Working-page mesh (lower opacity variant) */
.mesh-subtle .mesh-blob-1 { --mesh-color-1: rgba(79,70,229,0.08); }
.mesh-subtle .mesh-blob-2 { --mesh-color-2: rgba(99,102,241,0.05); }
.mesh-subtle .mesh-blob-3 { --mesh-color-3: rgba(168,85,247,0.04); }

/* ── Filter Chip Spring-In ── */
@keyframes vk-chip-spring {
  0%   { opacity: 0; transform: translateY(10px) scale(0.88); }
  60%  { transform: translateY(-2px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.chip-spring-in {
  opacity: 0;
  animation: vk-chip-spring 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Status Chip Pulse (Brief Shipping) ── */
@keyframes vk-chip-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  50%       { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); }
}

.chip-pulse {
  animation: vk-chip-pulse 2.8s ease-in-out infinite;
}

/* ── Idle Shimmer Sweep for sticky CTAs ── */
@keyframes vk-shimmer-sweep {
  0%, 20%  { background-position: 200% 0; opacity: 0; }
  30%      { opacity: 1; }
  70%      { opacity: 1; }
  85%      { opacity: 0; background-position: -100% 0; }
  100%     { opacity: 0; background-position: 200% 0; }
}

.shimmer-idle {
  position: relative;
  overflow: hidden;
}

.shimmer-idle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.035) 30%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.035) 70%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: vk-shimmer-sweep 5s ease-in-out 2s infinite;
  pointer-events: none;
  border-radius: inherit;
}

/* ── Correct-Card Entry Flash ── */
@keyframes vk-flash-correct {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); background: var(--surface); }
  20%  { box-shadow: 0 0 20px 0 rgba(34, 197, 94, 0.2); background: rgba(34, 197, 94, 0.04); }
  100% { box-shadow: none; background: var(--surface); }
}

.entry-flash-correct {
  animation: vk-flash-correct 600ms ease-out forwards;
}

/* ── Reduced Motion: disable all motion primitives ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .chip-spring-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .chip-pulse,
  .mesh-blob,
  .mesh-blob-1,
  .mesh-blob-2,
  .mesh-blob-3 {
    animation: none !important;
    opacity: 0.3 !important;
  }

  .shimmer-idle::after {
    animation: none !important;
    display: none;
  }

  .entry-flash-correct {
    animation: none !important;
  }
}