/* Pre-login front door styles. The bits that can't live as inline React style: the body
   reset/scrollbar, the card hover-lift, and the CTA pulse keyframes. Everything else is
   inline in client.jsx so it stays colocated with the components it themes. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { width: 100%; min-height: 100%; }
body {
  background: #0b0d14; color: #dde0f2;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2c3050; border-radius: 5px; }

/* Cards lift on hover. Per-card accent rides in as a --accent custom property so one rule
   themes every card (same pattern the real Board uses with --kb-accent). Deliberately NO
   cursor: pointer here — the lift is ambient polish, not a click affordance. A card that
   becomes genuinely clickable should express that via an <a>/onClick (which gets the pointer
   for free), so the hover-lift never lies about being interactive. */
.lift { transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.lift:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--accent) 55%, #232640);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in oklch, var(--accent) 22%, transparent);
}

/* Pulsing ring to pull a first-time visitor's eye to the primary CTA. */
@keyframes pulse-cta {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, oklch(0.72 0.16 185) 55%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in oklch, oklch(0.72 0.16 185) 0%, transparent); }
}
.pulse-cta { animation: pulse-cta 2.6s ease-out infinite; border-radius: 9px; }