/* =========================================================
   SPARKY DESIGN TOKENS — Neon Cyber, Cyan accent
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif&display=swap');

:root {
  /* ——— Base colors (deep space) ——— */
  --bg-0:        #06070D;   /* page */
  --bg-1:        #0B0D17;   /* surface */
  --bg-2:        #11141F;   /* card */
  --bg-3:        #161A28;   /* raised */
  --bg-4:        #1D2233;   /* hover */
  --bg-glass:    rgba(20,24,38,0.55);
  --bg-glass-2:  rgba(28,33,52,0.55);

  --line-1:      rgba(255,255,255,0.06);
  --line-2:      rgba(255,255,255,0.10);
  --line-3:      rgba(255,255,255,0.16);
  --line-hot:    rgba(34,211,238,0.35);

  /* ——— Text ——— */
  --fg-0:        #F4F6FB;   /* primary */
  --fg-1:        #C8CEDD;   /* secondary */
  --fg-2:        #8B92A8;   /* tertiary */
  --fg-3:        #5C6276;   /* quaternary / muted */
  --fg-4:        #3A3F52;   /* disabled */

  /* ——— Accent: Cyan ——— */
  --c-50:  #ECFEFF;
  --c-100: #CFFAFE;
  --c-200: #A5F3FC;
  --c-300: #67E8F9;
  --c-400: #22D3EE;   /* primary accent */
  --c-500: #06B6D4;
  --c-600: #0891B2;
  --c-700: #0E7490;
  --c-800: #155E75;
  --c-900: #164E63;
  --c-950: #083344;

  /* electric purple supporting */
  --p-300: #C4B5FD;
  --p-400: #A78BFA;
  --p-500: #8B5CF6;
  --p-600: #7C3AED;

  /* status */
  --ok-400:   #34D399;
  --ok-500:   #10B981;
  --warn-400: #FBBF24;
  --warn-500: #F59E0B;
  --err-400:  #F87171;
  --err-500:  #EF4444;
  --info-400: #60A5FA;

  /* discord-ish for previews */
  --d-bg:      #313338;
  --d-bg-2:    #2B2D31;
  --d-bg-3:    #1E1F22;
  --d-fg:      #DBDEE1;
  --d-fg-mute: #949BA4;
  --d-blurple: #5865F2;
  --d-green:   #23A559;
  --d-red:     #F23F43;
  --d-embed:   #2B2D31;
  --d-divider: #3F4147;

  /* ——— Effects ——— */
  --glow-cyan:   0 0 0 1px rgba(34,211,238,0.35), 0 0 24px -4px rgba(34,211,238,0.55);
  --glow-cyan-sm:0 0 0 1px rgba(34,211,238,0.30), 0 0 12px -2px rgba(34,211,238,0.45);
  --glow-purple: 0 0 0 1px rgba(139,92,246,0.30), 0 0 24px -4px rgba(139,92,246,0.45);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.6), 0 8px 32px -8px rgba(0,0,0,0.6);
  --shadow-pop:  0 24px 80px -20px rgba(0,0,0,0.8), 0 8px 24px -8px rgba(0,0,0,0.6);

  /* ——— Radii ——— */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 10px;
  --r-5: 12px;
  --r-6: 16px;
  --r-7: 20px;
  --r-8: 28px;
  --r-full: 9999px;

  /* ——— Type ——— */
  --font-sans:    'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;
  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-serif:   'Instrument Serif', ui-serif, serif;
}

/* ——— Reset / base ——— */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg-0);
  background: var(--bg-0);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ——— Surfaces ——— */
.surf-page { background:
  radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,0.10), transparent 70%),
  radial-gradient(900px 500px at 10% 100%, rgba(34,211,238,0.08), transparent 70%),
  var(--bg-0);
}
.surf-card {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-5);
  box-shadow: var(--shadow-card);
}
.surf-glass {
  background: linear-gradient(180deg, rgba(28,33,52,0.65), rgba(17,20,31,0.55));
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.surf-raised {
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
}

/* ——— Grid bg ——— */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.bg-dot {
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* ——— Type utilities ——— */
.t-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.t-serif   { font-family: var(--font-serif); font-style: italic; letter-spacing: -0.01em; }
.t-mono    { font-family: var(--font-mono); }
.t-eyebrow { font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-400); }

/* ——— Buttons ——— */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-3);
  font: 500 13px/1 var(--font-sans);
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--fg-0);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-4); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--c-400), var(--c-500));
  color: #042027;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--glow-cyan-sm), inset 0 1px 0 rgba(255,255,255,0.4);
  font-weight: 600;
}
.btn-primary:hover { box-shadow: var(--glow-cyan), inset 0 1px 0 rgba(255,255,255,0.5); background: linear-gradient(180deg, var(--c-300), var(--c-400)); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-1); }
.btn-ghost:hover { background: var(--bg-3); color: var(--fg-0); }
.btn-danger { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.30); color: #FCA5A5; }
.btn-danger:hover { background: rgba(239,68,68,0.18); }
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: var(--r-2); }
.btn-lg { padding: 12px 20px; font-size: 14px; border-radius: var(--r-3); }

/* ——— Pills / badges ——— */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--r-full);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  background: var(--bg-3);
  color: var(--fg-1);
  border: 1px solid var(--line-2);
  text-transform: uppercase;
}
.pill-cyan   { background: rgba(34,211,238,0.10); color: var(--c-300); border-color: rgba(34,211,238,0.30); }
.pill-purple { background: rgba(139,92,246,0.12); color: var(--p-300); border-color: rgba(139,92,246,0.30); }
.pill-ok     { background: rgba(16,185,129,0.10); color: var(--ok-400); border-color: rgba(16,185,129,0.30); }
.pill-warn   { background: rgba(245,158,11,0.10); color: var(--warn-400); border-color: rgba(245,158,11,0.30); }
.pill-err    { background: rgba(239,68,68,0.10);  color: var(--err-400); border-color: rgba(239,68,68,0.30); }
.pill-mute   { background: var(--bg-3); color: var(--fg-2); }

/* ——— Inputs ——— */
.input, .textarea, .select {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  color: var(--fg-0);
  font: 400 13px/1.4 var(--font-sans);
  padding: 9px 12px;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: rgba(34,211,238,0.5);
  box-shadow: 0 0 0 4px rgba(34,211,238,0.10);
}
.input::placeholder { color: var(--fg-3); }
.label { font: 500 11px/1 var(--font-mono); color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.10em; margin-bottom: 6px; display:block; }

/* ——— Toggles ——— */
.switch { position: relative; width: 32px; height: 18px; background: var(--bg-3); border-radius: var(--r-full); border: 1px solid var(--line-2); transition: background .15s ease; cursor: pointer; flex-shrink:0; }
.switch::after { content:''; position: absolute; top:1px; left:1px; width:14px; height:14px; border-radius: 50%; background: var(--fg-2); transition: transform .15s ease, background .15s ease; }
.switch.on { background: linear-gradient(180deg, var(--c-400), var(--c-500)); border-color: rgba(34,211,238,0.6); box-shadow: var(--glow-cyan-sm); }
.switch.on::after { transform: translateX(14px); background: white; }

/* ——— Scrollbar (dim) ——— */
::-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: rgba(255,255,255,0.12); background-clip: padding-box; border: 2px solid transparent; }

/* ——— Misc ——— */
.divider { height: 1px; background: var(--line-1); margin: 16px 0; }
.kbd {
  font: 500 11px/1 var(--font-mono);
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--fg-1);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.spark-text-static {
  background: linear-gradient(90deg, var(--c-300), var(--p-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* glow ring around focused cards */
.ring-cyan { box-shadow: var(--glow-cyan-sm); }

/* sticky top bar can be turned off via Tweaks */
html[data-sticky-top="0"] .sparky-topbar { position: static !important; }
@keyframes pulse-cyan {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,211,238,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(34,211,238,0); }
}

/* ============================================================
   HOMEPAGE ANIMATIONS
   ============================================================ */
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes float-y-lg { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes glow-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(34,211,238,0.30), 0 0 12px -2px rgba(34,211,238,0.40); }
  50% { box-shadow: 0 0 0 1px rgba(34,211,238,0.55), 0 0 28px -2px rgba(34,211,238,0.80); }
}
@keyframes draw-line {
  from { stroke-dashoffset: var(--dash-len, 600); }
  to { stroke-dashoffset: 0; }
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}
@keyframes orbit-drift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(40px, -30px); }
  66% { transform: translate(-30px, 20px); }
  100% { transform: translate(0, 0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes hero-spark-rise {
  0% { transform: translate(0, 100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% { transform: translate(var(--dx, 40px), -100vh) scale(1); opacity: 0; }
}

/* Stagger fade-in utility — apply on container, items get delays */
.stagger > * { opacity: 0; animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.15s; }
.stagger > *:nth-child(3) { animation-delay: 0.25s; }
.stagger > *:nth-child(4) { animation-delay: 0.35s; }
.stagger > *:nth-child(5) { animation-delay: 0.45s; }
.stagger > *:nth-child(6) { animation-delay: 0.55s; }
.stagger > *:nth-child(7) { animation-delay: 0.65s; }
.stagger > *:nth-child(8) { animation-delay: 0.75s; }
.stagger > *:nth-child(9) { animation-delay: 0.85s; }

.float-y    { animation: float-y 5s ease-in-out infinite; }
.float-y-lg { animation: float-y-lg 7s ease-in-out infinite; }
.dot-pulse  { animation: dot-pulse 2s ease-in-out infinite; }
.glow-breathe { animation: glow-breathe 3s ease-in-out infinite; }
.orbit-drift { animation: orbit-drift 18s ease-in-out infinite; }
.shimmer-bg {
  background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 50%, transparent);
  background-size: 200% 100%;
  animation: shimmer 3.5s linear infinite;
}

/* In-view trigger class for scroll animations */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Gradient text that breathes */
.spark-text {
  background: linear-gradient(90deg, var(--c-300), var(--p-400), var(--c-300));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradient-shift 6s ease-in-out infinite;
}

/* ========================================================= */
/* RESPONSIVE — app frame collapses on narrow viewports       */
/* ========================================================= */
.rs-shell { display: grid; grid-template-columns: 64px 1fr; }
.rs-shell-inner { display: grid; grid-template-columns: 240px 1fr; }

@media (max-width: 1080px) {
  .rs-shell-inner { grid-template-columns: 200px 1fr; }
}
@media (max-width: 860px) {
  .rs-shell { grid-template-columns: 56px 1fr; }
  /* hide the secondary nav sidebar; the ⌘K/search button + server rail remain
     for navigation. !important is required: ServerSidebar sets display:flex
     inline, which would otherwise beat this rule. */
  .rs-shell-inner { grid-template-columns: 1fr !important; }
  .rs-shell-inner > aside:first-child { display: none !important; }
  /* let dense multi-column page grids reflow */
  .rs-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .rs-split { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  /* Collapse inline CSS grids to a single column on phones (both dashboard and
     marketing). Screens set grid-template-columns as INLINE styles, so the
     override needs the attribute hook + !important to win. */
  .sparky-content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .rs-grid-4 { grid-template-columns: 1fr !important; }
  .rs-pad { padding: 16px !important; }
  .rs-hide-narrow { display: none !important; }
  .rs-case-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .rs-shell-inner > div { min-width: 0; }
}