/* ============================================================
   Metrix — Effects: gradients, shadows, glows, blur, motion
   ------------------------------------------------------------
   Rule: shadows & glows live in brand tones (purple) or neutral.
   NEVER opaque black shadows on interactive elements. Icon glows
   use filter: drop-shadow(), not box-shadow.
   All custom motion must respect prefers-reduced-motion.
============================================================ */
:root {
  /* ---- Gradients (135° diagonal; bars 90°) ---- */
  --grad-brand:        linear-gradient(135deg, var(--purple), var(--pink)); /* @kind color */
  --grad-button:       linear-gradient(135deg, #7C3AED, #9D4EDD); /* @kind color */
  --grad-progress:     linear-gradient(90deg, #7C3AED, #C084FC, #F4A7BB); /* @kind color */
  --grad-bar:          linear-gradient(90deg, #7C3AED, #F4A7BB); /* @kind color */
  --grad-brand-soft:   linear-gradient(135deg, rgba(124,58,237,0.20), rgba(244,167,187,0.10)); /* @kind color */
  --grad-featured:     linear-gradient(135deg, rgba(124,58,237,0.15), rgba(244,167,187,0.06)); /* @kind color */
  --grad-text:         linear-gradient(135deg, #F4A7BB 0%, #fff 25%, #7C3AED 55%, #F4A7BB 100%); /* @kind color */
  --grad-avatar-purple:linear-gradient(135deg, rgba(124,58,237,0.90), rgba(167,139,250,0.70)); /* @kind color */
  --grad-avatar-pink:  linear-gradient(135deg, rgba(244,167,187,0.90), rgba(124,58,237,0.65)); /* @kind color */
  --grad-avatar-green: linear-gradient(135deg, rgba(52,211,153,0.85), rgba(124,58,237,0.60)); /* @kind color */

  /* ---- Radial orbs / ambient glows ---- */
  --orb-purple: radial-gradient(circle, rgba(124,58,237,0.40), transparent 70%); /* @kind color */
  --orb-pink:   radial-gradient(circle, rgba(244,167,187,0.30), transparent 70%); /* @kind color */

  /* ---- Shadows & glows ---- */
  --shadow-xs:        0 1px 2px rgba(0,0,0,0.22);
  --shadow-sm:        0 6px 18px rgba(0,0,0,0.24);
  --shadow-md:        0 12px 30px rgba(0,0,0,0.32);
  --shadow-lg:        0 20px 48px rgba(0,0,0,0.42);
  --shadow-btn-glow:  0 8px 32px rgba(124,58,237,0.50);   /* button hover */
  --shadow-card-hover:0 20px 60px rgba(124,58,237,0.12);  /* card hover */
  --shadow-nav:       0 4px 32px rgba(0,0,0,0.45);         /* nav scrolled */
  --shadow-avatar:    0 18px 40px rgba(124,58,237,0.18);
  --glow-primary:     0 0 0 1px rgba(124,58,237,0.22), 0 0 24px rgba(124,58,237,0.16);
  --glow-secondary:   0 0 0 1px rgba(244,167,187,0.22), 0 0 24px rgba(244,167,187,0.16);
  --glow-icon:        drop-shadow(0 0 8px rgba(124,58,237,0.60)); /* @kind shadow */
  --shadow-hero:      0 0 0 1px rgba(124,58,237,0.20), 0 40px 120px rgba(124,58,237,0.20), 0 80px 200px rgba(0,0,0,0.80);

  /* ---- Blur ---- */
  --blur-sm: 8px; /* @kind other */
  --blur-md: 14px; /* @kind other */
  --blur-lg: 20px; /* @kind other */

  /* ---- Motion: easing ---- */
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);  /* @kind other */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);   /* @kind other */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);/* @kind other */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --ease-standard:  cubic-bezier(0.2, 0.8, 0.2, 1);  /* @kind other */

  /* ---- Motion: duration ---- */
  --dur-fast:   150ms;  /* @kind other */
  --dur-normal: 300ms;  /* @kind other */
  --dur-reveal: 600ms;  /* @kind other */
  --dur-slow:   900ms;  /* @kind other */

  /* App motion (live product, tighter) */
  --app-dur-fast:   120ms; /* @kind other */
  --app-dur-normal: 180ms; /* @kind other */
  --app-dur-slow:   280ms; /* @kind other */

  --opacity-disabled: 0.45; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}