/* ============================================================
   KATALYST · EFFECTS TOKENS
   Radii, the signature 4-stop gradient + glow shadows, glass
   blur, and the motion system (easing + the named keyframes the
   marketing pages reuse: drift glows, pulse dot, skeleton
   shimmer, rise-in, loading dots).
   ============================================================ */
:root {
  /* ---- Radii ---- */
  --radius-xs:   8px;    /* chips / small tags */
  --radius-sm:   9px;    /* logo tile / icon button */
  --radius-md:   11px;   /* inputs / secondary buttons */
  --radius-lg:   13px;   /* inner panels */
  --radius-xl:   16px;   /* standard card */
  --radius-2xl:  18px;   /* large card */
  --radius-3xl:  22px;   /* hero demo panel */
  --radius-4xl:  26px;   /* full-width CTA block */
  --radius-pill: 100px;  /* badges / pills / status */

  /* ---- The signature gradient (use everywhere brand reads "Kataclyzim") ---- */
  --gradient-brand: linear-gradient(120deg,#5EEAD4 0%,#56C7E8 38%,#A78BFA 72%,#C084FC 100%); /* @kind color */
  --gradient-brand-2: linear-gradient(120deg,#5EEAD4,#A78BFA); /* @kind color */
  --gradient-brand-text: linear-gradient(120deg,#5EEAD4,#56C7E8 45%,#C084FC); /* @kind color */
  --gradient-card: linear-gradient(180deg,#101019,#0B0B12); /* @kind color */
  --gradient-card-violet: linear-gradient(180deg,#121120,#0C0C14); /* @kind color */
  --gradient-impact: linear-gradient(120deg,rgba(94,234,212,0.09),rgba(192,132,252,0.10)); /* @kind color */
  --gradient-veil: linear-gradient(180deg,rgba(255,255,255,0.014),transparent); /* @kind color */

  /* ---- Katya edge + provenance treatments ----
     katya = cyan→violet edge · katya-say = speech block · provenance = expert→standard line */
  --gradient-katya: linear-gradient(180deg,#56C7E8,#A78BFA); /* @kind color */
  --gradient-katya-say: linear-gradient(120deg,rgba(86,199,232,0.08),rgba(167,139,250,0.10)); /* @kind color */
  --gradient-provenance: linear-gradient(90deg,#A78BFA,#56C7E8); /* @kind color */

  /* ---- Shadows ---- */
  --shadow-card:     0 22px 50px rgba(0,0,0,0.40);
  --shadow-panel:    0 30px 70px rgba(0,0,0,0.50);
  --shadow-hero:     0 36px 80px rgba(0,0,0,0.55);
  --shadow-btn:      0 8px 30px rgba(94,234,212,0.20);   /* resting glow */
  --shadow-btn-hover:0 14px 40px rgba(167,139,250,0.34); /* lifted glow */
  --shadow-violet:   0 24px 60px rgba(120,80,200,0.12);  /* featured card halo */
  --shadow-katya:    0 0 24px rgba(86,199,232,0.14);      /* Katya presence glow */

  /* ---- Glow color stops (for radial ambient + dot glows) ---- */
  --glow-teal:   rgba(94,234,212,0.15);
  --glow-violet: rgba(167,139,250,0.17);

  /* ---- Glass ---- */
  --blur-nav:   blur(14px);   /* @kind other */
  --blur-glow:  blur(22px);   /* @kind other */
  --nav-bg:     rgba(7,7,11,0.78);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16,1,0.3,1); /* @kind other */
  --ease-soft:  ease;                       /* @kind other */
  --dur-fast:   0.15s;   /* @kind other */
  --dur-mid:    0.2s;    /* @kind other */
  --dur-rise:   0.42s;   /* @kind other */
  --lift-hover: translateY(-2px);  /* @kind other */
  --lift-press: translateY(0);     /* @kind other */
}

/* ============================================================
   NAMED KEYFRAMES — the brand's motion vocabulary
   ============================================================ */
@keyframes k-drift  { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(4%,-3%) scale(1.08)} 100%{transform:translate(0,0) scale(1)} }
@keyframes k-drift2 { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5%,4%) scale(1.1)} 100%{transform:translate(0,0) scale(1)} }
@keyframes k-pulse  { 0%,100%{opacity:0.55} 50%{opacity:1} }
@keyframes k-shimmer{ 0%{background-position:-420px 0} 100%{background-position:420px 0} }
@keyframes k-rise   { 0%{opacity:0;transform:translateY(8px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes k-dots   { 0%,80%,100%{opacity:0.2} 40%{opacity:1} }
@keyframes k-listen { 0%,100%{opacity:0.35} 50%{opacity:0.9} }   /* Katya listening ring */
@keyframes k-prism  { 0%,100%{opacity:0.7} 50%{opacity:1} }      /* Katya prism active */

/* Reusable utility classes built on the keyframes */
.k-skeleton {
  background: linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.10) 37%,rgba(255,255,255,0.04) 63%);
  background-size: 840px 100%;
  animation: k-shimmer 1.3s linear infinite;
  border-radius: 7px;
}
.k-rise-in { animation: k-rise var(--dur-rise) var(--ease-soft) both; }

@media (prefers-reduced-motion: reduce) {
  .k-skeleton, .k-rise-in { animation: none; }
}