/* ==================================================================
   MYSTORiQ · EFFECTS — radii, borders, shadows, glows, motion
   The realm is rounded, warm, and softly luminous. Nothing is sharp;
   everything can glow.
   ================================================================== */

:root {
  /* ---- CORNER RADII (generous & rounded — MG-friendly) ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;    /* default card radius */
  --r-lg:   24px;    /* large panels */
  --r-xl:   32px;
  --r-pill: 999px;   /* buttons, chips, tags are pill-shaped */

  /* ---- BORDERS --------------------------------------------------- */
  --bw-hair:  1px;
  --bw-solid: 2px;
  --bw-chunk: 3px;   /* playful chunky outline on cards/buttons */

  /* ---- SHADOWS (warm-tinted, soft, never harsh black) ----------- */
  --shadow-sm:  0 1px 2px rgba(27, 58, 107, 0.08);
  --shadow-md:  0 6px 16px rgba(27, 58, 107, 0.10);
  --shadow-lg:  0 14px 40px rgba(27, 58, 107, 0.14);
  --shadow-card:0 8px 24px rgba(27, 58, 107, 0.10);

  /* Warm "lift" shadow tinted orange for brand surfaces */
  --shadow-warm: 0 10px 30px rgba(244, 124, 32, 0.22);

  /* ---- GLIMMER GLOWS (the signature luminous halo) -------------- */
  --glow-orange: 0 0 24px rgba(250, 138, 46, 0.55);
  --glow-sori:   0 0 22px rgba(247, 168, 30, 0.60);
  --glow-tides:  0 0 22px rgba(21, 159, 224, 0.55);
  --glow-terra:  0 0 22px rgba(53, 185, 15, 0.50);
  --glow-sparks: 0 0 22px rgba(251, 212, 10, 0.60);
  --glow-shadows:0 0 22px rgba(142, 23, 212, 0.50);
  --glow-mist:   0 0 30px rgba(221, 198, 58, 0.60);

  /* ---- MOTION ---------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */

  /* Interaction defaults:
     hover  = lighten + lift (translateY -2px)
     press  = darken  + shrink (scale .97)
     focus  = 3px orange ring, offset 2px */
  --ring: 0 0 0 3px rgba(244, 124, 32, 0.45);
}

/* ---- KEYFRAMES: gentle Glimmer shimmer & float ------------------ */
@keyframes mq-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes mq-glimmer {
  0%, 100% { opacity: 0.85; filter: brightness(1); }
  50%      { opacity: 1;    filter: brightness(1.15); }
}
@keyframes mq-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg);   opacity: 0.9; }
  50%      { transform: scale(1.12) rotate(8deg); opacity: 1; }
}