/* Cripple.AI — shared styles */
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: hsl(222 45% 4%);
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Sharper italic serif rendering on dark backgrounds */
.font-heading, [class*="italic"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Grid background */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}
.grid-bg-tight {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Glass */
.glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 40px -20px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.08) 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;
}
.glass > * { position: relative; z-index: 1; }

.glass-strong {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 30px 60px -30px rgba(0,0,0,0.7);
  position: relative;
  overflow: hidden;
}
.glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.12) 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;
}
.glass-strong > * { position: relative; z-index: 1; }

/* Pulse dot */
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 hsl(138 85% 55% / 0.6); } 50% { box-shadow: 0 0 0 6px hsl(138 85% 55% / 0); } }
.pulse-dot { width: 6px; height: 6px; border-radius: 999px; background: hsl(138 85% 55%); animation: pulseDot 1.8s ease-out infinite; }
@keyframes pulseDotAmber { 0%,100% { box-shadow: 0 0 0 0 hsl(38 95% 60% / 0.6); } 50% { box-shadow: 0 0 0 6px hsl(38 95% 60% / 0); } }
.pulse-dot-amber { width: 6px; height: 6px; border-radius: 999px; background: hsl(38 95% 60%); animation: pulseDotAmber 1.8s ease-out infinite; }
@keyframes pulseDotBlood { 0%,100% { box-shadow: 0 0 0 0 hsl(358 80% 58% / 0.6); } 50% { box-shadow: 0 0 0 8px hsl(358 80% 58% / 0); } }
.pulse-dot-blood { width: 6px; height: 6px; border-radius: 999px; background: hsl(358 80% 58%); animation: pulseDotBlood 1.4s ease-out infinite; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1), filter 600ms ease-out; }
.reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Ticker */
@keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-track { animation: tickerScroll 60s linear infinite; }
.ticker-track-fast { animation: tickerScroll 35s linear infinite; }

/* Radial glow */
.radial-glow {
  background:
    radial-gradient(60% 40% at 20% 10%, hsl(138 85% 55% / 0.10) 0%, transparent 70%),
    radial-gradient(50% 40% at 85% 30%, hsl(220 80% 60% / 0.12) 0%, transparent 70%);
}
.radial-glow-red {
  background:
    radial-gradient(50% 40% at 15% 20%, hsl(358 80% 58% / 0.12) 0%, transparent 70%),
    radial-gradient(60% 40% at 80% 80%, hsl(38 95% 60% / 0.08) 0%, transparent 70%);
}

/* Tabular nums */
.tabular { font-variant-numeric: tabular-nums; }

/* Hide scrollbars */
.no-bar::-webkit-scrollbar { display: none; }
.no-bar { scrollbar-width: none; }

/* Tick marker */
@keyframes ticker-in { 0% { opacity: 0; transform: translateX(-8px); } 100% { opacity: 1; transform: translateX(0); } }
.tick-in { animation: ticker-in 500ms ease-out forwards; }

/* Scanlines for war-room feel */
.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

/* Heatmap cell */
.cell-0 { background: rgba(255,255,255,0.02); }
.cell-1 { background: hsl(138 80% 40% / 0.15); }
.cell-2 { background: hsl(138 80% 45% / 0.3); }
.cell-3 { background: hsl(38 90% 55% / 0.35); }
.cell-4 { background: hsl(358 80% 58% / 0.35); }
.cell-5 { background: hsl(358 80% 58% / 0.6); }

/* Blur-in */
@keyframes blurInWord { 0% { filter: blur(10px); opacity: 0; transform: translateY(20px); } 100% { filter: blur(0); opacity: 1; transform: translateY(0); } }
.word { display: inline-block; opacity: 0; animation: blurInWord 0.8s ease-out forwards; }

/* Count-flip */
@keyframes countFlip { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.flip-in { animation: countFlip 400ms cubic-bezier(.2,.8,.2,1); }

/* Terminal caret */
@keyframes caret { 50% { opacity: 0; } }
.caret { display: inline-block; width: 0.6ch; background: hsl(138 85% 55%); animation: caret 1s steps(2) infinite; }

/* SEO pre-render fallback — visible until React mounts, then replaced.
   Crawlers without JS (LinkedIn, Slack, Discord, Bing, most social previews) see this. */
.seo-fallback { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 4rem; color: #fff; min-height: 100vh; font-family: 'Space Grotesk', system-ui, sans-serif; }
.seo-fallback .seo-nav { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; margin-bottom: 4rem; font-size: 13px; }
.seo-fallback .seo-brand { color: #fff; text-decoration: none; font-weight: 600; letter-spacing: 0.12em; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.seo-fallback .seo-brand span { color: #2BEE65; }
.seo-fallback .seo-nav-links { display: flex; flex-wrap: wrap; gap: 1.5rem; color: rgba(255,255,255,0.6); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.seo-fallback .seo-nav-links a { color: inherit; text-decoration: none; }
.seo-fallback .seo-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #2BEE65; margin-bottom: 1rem; }
.seo-fallback h1 { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: clamp(2.25rem, 5.5vw, 4.5rem); line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 1.5rem; max-width: 60rem; font-weight: 400; }
.seo-fallback h1 .accent { color: #2BEE65; }
.seo-fallback p { max-width: 42rem; line-height: 1.6; color: rgba(255,255,255,0.7); margin: 0 0 1.25rem; font-size: 1.05rem; }
.seo-fallback .seo-cta { display: inline-block; margin-top: 1.5rem; padding: 0.75rem 1.5rem; background: #2BEE65; color: #060A12; text-decoration: none; font-weight: 600; border-radius: 999px; font-size: 0.9rem; }