/* ============================================================
   Tachikoma — Effects: shadows, glows, blur, grid texture
   The brand reads "glass over a dark whiteboard": frosted cards
   with purple glow, a faint dotted/line grid, and radial purple
   ambience. Motion is calm — fades and gentle scale, ease-out.
   ============================================================ */
:root {
  /* glassmorphism */
  --tk-blur: 12px;            /* card backdrop-blur (backdrop-blur-md) */
  --tk-blur-lg: 20px;         /* header / CTA panel */
  --tk-glass-fill: rgba(139, 92, 246, 0.05);
  --tk-glass-fill-soft: rgba(30, 30, 50, 0.5);

  /* shadows & glows */
  --tk-glow-purple: 0 0 60px rgba(139, 92, 246, 0.3);
  --tk-glow-purple-sm: 0 0 20px rgba(139, 92, 246, 0.3);
  --tk-glow-purple-lg: 0 0 40px rgba(139, 92, 246, 0.4);
  --tk-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);
  --tk-shadow-2xl: 0 20px 80px rgba(107, 33, 168, 0.4), 0 0 120px rgba(139, 92, 246, 0.15);
  --tk-shadow-elev: 0 18px 45px rgba(15, 23, 42, 0.45);

  /* per-layer glow helper (multiply with a color in component) */
  --tk-glow-alpha: 0.33; /* @kind other */

  /* motion */
  --tk-ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --tk-dur-fast: 150ms; /* @kind other */
  --tk-dur: 300ms; /* @kind other */
  --tk-dur-slow: 600ms; /* @kind other */

  /* whiteboard background — apply on a full-bleed canvas */
  --tk-grid-size: 32px; /* @kind spacing */
  --tk-grid: 
    radial-gradient(circle, var(--tk-grid-line) 1px, transparent 1px); /* @kind other */
  --tk-radial-purple: radial-gradient(circle at 50% 0%, rgba(107, 33, 168, 0.2) 0%, transparent 70%); /* @kind color */
}

/* Reusable whiteboard canvas: dark base + dotted grid + purple halo.
   Usage: <div class="tk-whiteboard"> ... </div> */
.tk-whiteboard {
  background-color: var(--tk-bg);
  background-image: var(--tk-radial-purple), var(--tk-grid);
  background-size: 100% 100%, var(--tk-grid-size) var(--tk-grid-size);
  background-repeat: no-repeat, repeat;
}

/* Firefly border keyframe (signature detail: a light point gliding a border). */
@keyframes tk-firefly {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
@keyframes tk-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@keyframes tk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}