/* ============================================================
   VIXA · EFFECTS — shadows, glows, textures, motion
   WEBSITE mode is restrained: soft layered black shadows on flat
   dark cards & pill buttons (no glow). SOCIAL/POSTER mode adds the
   electric-blue glow + HUD outlines seen in the marketing graphics.
   ============================================================ */

:root {
  /* ---- Website elevation (verified — soft, layered, low-opacity) ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg:  0 18px 50px rgba(0,0,0,0.45);
  --shadow-xl:  0 30px 80px rgba(0,0,0,0.55);

  /* Pill button float (verified from site) */
  --shadow-pill:
    0 0.602px 3.011px -1.25px rgba(0,0,0,0.11),
    0 2.289px 11.443px -2.5px rgba(0,0,0,0.10),
    0 10px 50px -3.75px rgba(0,0,0,0.04);
  /* Nav pill (verified from site) */
  --shadow-nav:
    0 0.602px 0.602px -1.25px rgba(0,0,0,0.18),
    0 2.289px 2.289px -2.5px rgba(0,0,0,0.16),
    0 10px 10px -3.75px rgba(0,0,0,0.06);

  /* ---- Brand glows — SOCIAL/POSTER MODE (the marketing signature) ---- */
  --glow-sm:   0 0 12px color-mix(in srgb, var(--blue-500) 45%, transparent);
  --glow-md:   0 0 24px color-mix(in srgb, var(--blue-500) 50%, transparent);
  --glow-lg:   0 0 48px color-mix(in srgb, var(--blue-500) 55%, transparent);
  --glow-cyan: 0 0 28px color-mix(in srgb, var(--cyan-500) 50%, transparent);

  /* HUD outline: hairline + inner sheen + outer glow */
  --hud-border: 1px solid color-mix(in srgb, var(--blue-400) 35%, transparent);
  --hud-ring:
    inset 0 1px 0 color-mix(in srgb, var(--white) 6%, transparent),
    0 0 0 1px color-mix(in srgb, var(--blue-400) 22%, transparent),
    0 0 30px color-mix(in srgb, var(--blue-500) 18%, transparent);

  /* Focus ring */
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Textures (CSS-only, no image deps) ---- */
  /* Dotted halftone wash used at the top of dark layouts */
  --texture-dots:
    radial-gradient(circle at center, color-mix(in srgb, var(--white) 5%, transparent) 1px, transparent 1.6px);
  --texture-dots-size: 18px 18px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);      /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */

  /* Hover/press conventions:
     WEBSITE → hover lifts (translateY) + raises shadow; blue/white pills
               swap toward darker; press scales to 0.98.
     SOCIAL  → hover brightens toward --blue-400 + lifts glow.            */
  --press-scale: 0.98; /* @kind other */
}