/* ============================================================
   aike — Effects: shadows, borders, dot-pattern, motion
   ============================================================ */

:root {
  /* ---- Elevation shadows (used sparingly — flat-ish UI) ---- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow-menu: 0 8px 32px rgba(0, 0, 0, 0.40);   /* floating menus / dropdowns */
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.45);

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-hairline: 1px solid var(--border-subtle);
  --border-card:     1px solid var(--border-default);

  /* ---- Signature dot-grid canvas texture ----
     Apply as a background layer behind the chat canvas.
     The "lens" mask concentrates dots toward the composer. */
  --dot-color: var(--warm-fg-400);
  --dot-size: 16px;
  --dot-radius: 0.6px;
  --dot-pattern: radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent var(--dot-radius));
  --dot-lens-mask: radial-gradient(ellipse 380px 340px at 55% 45%,
                     rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 50%, transparent 100%); /* @kind other */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   0.12s; /* @kind other */
  --dur-normal: 0.15s; /* @kind other */
  --dur-slow:   0.25s; /* @kind other */
  --transition-hover: background var(--dur-fast) var(--ease-standard),
                      color var(--dur-fast) var(--ease-standard);
}

/* ---- Shared keyframes (signature entrances) ---- */
@keyframes aike-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aike-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aike-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}