/* =========================================================================
   Delistaff Design System — EFFECTS
   Radii, shadows, the signature map-pin teardrop, motion tokens.
   ========================================================================= */

:root{
  /* corner radii */
  --radius-sm:12px;       /* small cards, inputs, chips */
  --radius:20px;          /* default card */
  --radius-lg:24px;       /* hero photo, modals */
  --radius-xl:32px;       /* spotlight / CTA bands */
  --radius-pill:999px;    /* buttons, tags */

  /* shadows — warm green-tinted, soft */
  --shadow-sm:0 1px 2px rgba(20,40,28,.06),0 2px 8px rgba(20,40,28,.05);
  --shadow-md:0 6px 24px rgba(20,40,28,.08),0 2px 6px rgba(20,40,28,.05);
  --shadow-lg:0 24px 60px rgba(12,58,38,.16),0 6px 18px rgba(12,58,38,.08);
  /* coloured glows for primary CTAs */
  --shadow-green:0 8px 22px rgba(0,164,95,.28);
  --shadow-amber:0 8px 22px rgba(242,178,3,.32);

  /* motion */
  --ease:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --dur-fast:.15s; /* @kind other */
  --dur:.18s; /* @kind other */
  --dur-slow:.3s; /* @kind other */
  /* signature hover lift */
  --lift:translateY(-3px); /* @kind other */
}

/* ---------------------------------------------------------------------------
   THE PIN — the brand's recurring teardrop. A rounded square rotated 45°
   with one square corner. Used for eyebrow bullets, step markers, list
   bullets, badges. Apply .ds-pin or copy: border-radius:50% 50% 50% 0;
   transform:rotate(45deg);
   --------------------------------------------------------------------------- */
.ds-pin{
  border-radius:50% 50% 50% 0;
  transform:rotate(45deg);
  background:var(--accent);
  display:inline-block;
}

/* shared keyframes used by components (live dot, skeleton shimmer, ticker) */
@keyframes ds-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes ds-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ds-skel{0%{background-position:100% 0}100%{background-position:0 0}}