/* ============================================================
   EFFECTS — shadows, blur, motion tokens.
   Dark UI: shadows are subtle; depth comes from surface steps
   and hairlines more than drop shadows. Glows are accent tints.
   ============================================================ */

:root {
  /* --- Shadows (soft, low; dark UI leans on surface steps) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-inset: inset 0 1px 0 rgba(245, 245, 244, 0.04);

  /* --- Accent glows (used sparingly on active dots/lines) --- */
  --glow-teal: 0 0 20px rgba(94, 170, 168, 0.35);
  --glow-amber: 0 0 20px rgba(224, 164, 88, 0.35);
  --glow-clay: 0 0 20px rgba(201, 123, 99, 0.35);

  /* --- Blur --- */
  --blur-panel: 12px;

  /* --- Gradient masks (text over media — NOT dark scrims) ---
     Use as mask-image / -webkit-mask-image to fade media edges
     so text can sit behind the subject. */
  --mask-fade-bottom: linear-gradient(to bottom, #000 55%, transparent 100%); /* @kind other */
  --mask-fade-b-strong: linear-gradient(to bottom, #000 30%, transparent 92%); /* @kind other */
  --mask-fade-right: linear-gradient(to right, #000 60%, transparent 100%); /* @kind other */

  /* Warm vignette gradient used on hero / media backdrops */
  --grad-warm-vignette:
    radial-gradient(120% 90% at 65% 40%, rgba(224,164,88,0.06), transparent 60%),
    radial-gradient(100% 120% at 20% 90%, rgba(201,123,99,0.05), transparent 55%); /* @kind other */

  /* --- Motion --- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-magnetic: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  --dur-fast: 160ms; /* @kind other */
  --dur-base: 320ms; /* @kind other */
  --dur-slow: 620ms; /* @kind other */
  --dur-reveal: 900ms; /* @kind other */

  --lenis-lerp: 0.1; /* @kind other */
  --countup-dur: 1200ms; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-reveal: 0ms; /* @kind other */
    --countup-dur: 0ms; /* @kind other */
  }
}