/* ==========================================================================
   MLinside — Effects: blur, glow, gradients, transitions
   ========================================================================== */
:root {
  /* ---- Glassmorphism (benefit cards, pricing cards over navy hero) ----
     SCREEN-ONLY. --glass-blur/--glass-bg do not survive PPTX export (rgba
     flattens to white, backdrop-filter is dropped). For anything exportable
     use the opaque --surface-glass-* tokens and no backdrop-filter. */
  --glass-blur: blur(14px); /* @kind other */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: 1px solid var(--violet-border);

  /* ---- Decorative accent glow (blurred lime circle behind numerals/icons) ----
     SCREEN-ONLY: these gradients + --glow-blur render as flat solid circles in
     PPTX export. For slides / anything exported, use the PNG glows in
     assets/glows/ (glow-{lime|magenta}-{tl|tr|bl|br|center}.png) instead. */
  --glow-lime: radial-gradient(circle, rgba(192, 255, 106, 0.6) 0%, rgba(206, 255, 139, 0.3) 100%); /* @kind other */
  /* Magenta counterpart to --glow-lime (solution-space numerals/icons/personas) */
  --glow-magenta: radial-gradient(circle, rgba(210, 109, 239, 0.6) 0%, rgba(210, 109, 239, 0.28) 100%); /* @kind other */
  --glow-blur: blur(25px); /* @kind other */

  /* ---- Blue section glow (background wash behind title / section-divider slides) ----
     Soft radial wash ~28% at the anchor fading to 0; layered over --black-1,
     kept out from under body copy. Color = --blue-glow. */
  --glow-blue-section: radial-gradient(60% 55% at 50% 0%, rgba(40, 80, 190, 0.28) 0%, rgba(40, 80, 190, 0) 62%); /* @kind other */

  /* ---- Gradient text (headline treatment used throughout both pages) ---- */
  --gradient-text-hero: linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
  --gradient-text-muted: linear-gradient(100deg, rgba(237,237,237,0.85) 0%, rgba(96,96,96,1) 100%);
  --gradient-text-card: linear-gradient(100deg, rgba(255,255,255,1) 0%, rgba(203,203,203,1) 100%);

  /* ---- Overlay fades (used to fade video/hero art into background color) ---- */
  --fade-to-page: linear-gradient(0deg, var(--black-1) 0%, rgba(13,13,13,0) 100%);
  --fade-to-navy: linear-gradient(0deg, var(--navy-1) 0%, rgba(3,0,47,0) 100%);

  /* ---- Beveled accent shape (alternative to the pill) ----
     Rectangle with two opposite corners cut at 45° — top-left & bottom-right. */
  --bevel-cut: 16px; /* @kind other */
  --shape-bevel: polygon(var(--bevel-cut) 0, 100% 0, 100% calc(100% - var(--bevel-cut)), calc(100% - var(--bevel-cut)) 100%, 0 100%, 0 var(--bevel-cut)); /* @kind other */

  /* ---- Motion ---- */
  --ease-standard: ease-in-out; /* @kind other */
  --duration-fast: 0.15s; /* @kind other */
  --duration-base: 0.2s; /* @kind other */
  --duration-slow: 0.3s; /* @kind other */
  --transition-interactive: background-color var(--duration-base) var(--ease-standard),
                            color var(--duration-base) var(--ease-standard),
                            border-color var(--duration-base) var(--ease-standard),
                            box-shadow var(--duration-base) var(--ease-standard);
}