/* public/glass-effects.css - LOADS AFTER PAGE LOAD, NON-BLOCKING */

/* Full glass effect variables */
:root {
  --glass-light-gradient-start: rgba(187, 187, 188, 0.08);
  --glass-light-gradient-mid: rgba(232, 232, 255, 0.06);
  --glass-light-gradient-end: rgba(245, 245, 255, 0.04);
  
  --glass-dark-gradient-start: rgba(27, 27, 29, 0.10);
  --glass-dark-gradient-mid: rgba(42, 42, 74, 0.08);
  --glass-dark-gradient-end: rgba(58, 58, 94, 0.06);
  
  --glass-dim-gradient-start: rgba(21, 36, 51, 0.10);
  --glass-dim-gradient-mid: rgba(26, 43, 63, 0.08);
  --glass-dim-gradient-end: rgba(32, 51, 80, 0.06);
  
  --reflex-dim-light: 0.7;
  --reflex-dim-dark: 2;
}

/* Full glass background classes */
.bg-glass-light {
  background: linear-gradient(
    135deg,
    rgba(187, 187, 188, 0.08) 0%,
    rgba(232, 232, 255, 0.06) 50%,
    rgba(245, 245, 255, 0.04) 100%
  );
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

/* Glass shadow classes */
.shadow-glass-light {
  box-shadow: 
    inset 0 0 0 1px color-mix(in srgb, #fff calc(var(--reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, #fff calc(var(--reflex-light) * 90%), transparent), 
    inset -2px -2px 0px -2px color-mix(in srgb, #fff calc(var(--reflex-light) * 80%), transparent), 
    inset -3px -8px 1px -6px color-mix(in srgb, #fff calc(var(--reflex-light) * 60%), transparent), 
    inset -0.3px -1px 4px 0px color-mix(in srgb, #000 calc(var(--reflex-dark) * 12%), transparent), 
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, #000 calc(var(--reflex-dark) * 20%), transparent), 
    inset 0px 3px 4px -2px color-mix(in srgb, #000 calc(var(--reflex-dark) * 20%), transparent), 
    inset 2px -6.5px 1px -4px color-mix(in srgb, #000 calc(var(--reflex-dark) * 10%), transparent), 
    0px 1px 5px 0px color-mix(in srgb, #000 calc(var(--reflex-dark) * 10%), transparent), 
    0px 6px 16px 0px color-mix(in srgb, #000 calc(var(--reflex-dark) * 8%), transparent);
}