/**
 * Glow Effects — Optymizer 2.o Dark-First Design System
 * =======================================================
 *
 * "Linear look" ambient glow treatment.
 * Technique: Angular gradient ellipses with filter:blur()
 * These create organic, painterly light sources, not crisp rings.
 *
 * Performance rules:
 * - Use filter:blur() on GPU-composited layers only (position: absolute/fixed)
 * - Add will-change: filter only while animating, remove after
 * - Do NOT put blur on inline elements — always isolate with position
 * - Respect prefers-reduced-motion (all glows collapse to opacity:0)
 *
 * Usage pattern:
 * <div class="glow-container">
 *   <div class="glow-ellipse-blue" aria-hidden="true"></div>
 *   <div class="your-content">...</div>
 * </div>
 *
 * Or via utility classes on wrapper:
 * <section class="has-glow-hero"> ... </section>
 */

/* ===========================================
 * FOUNDATION: Glow Ellipse Primitives
 * Base class for all ambient glow elements.
 * =========================================== */

.glow-ellipse {
  position: absolute;
  pointer-events: none;
  user-select: none;
  border-radius: 50%;
  /* Isolate compositing layer for GPU acceleration */
  transform: translateZ(0);
}

/* ===========================================
 * BRAND BLUE GLOW — Primary glow treatment
 * Use for hero sections, primary CTAs, feature cards
 * =========================================== */

/* Small — 200px, subtle ambient */
.glow-blue-sm {
  width: 200px;
  height: 100px;
  background: radial-gradient(ellipse at center,
    rgba(59, 130, 246, 0.60) 0%,
    rgba(59, 130, 246, 0.30) 40%,
    rgba(59, 130, 246, 0) 70%
  );
  filter: blur(24px);
  opacity: 0.6;
}

/* Medium — 400px, hero section glow */
.glow-blue-md {
  width: 400px;
  height: 200px;
  background: radial-gradient(ellipse at center,
    rgba(59, 130, 246, 0.55) 0%,
    rgba(59, 130, 246, 0.28) 40%,
    rgba(59, 130, 246, 0) 70%
  );
  filter: blur(40px);
  opacity: 0.55;
}

/* Large — 700px, page-level ambient glow */
.glow-blue-lg {
  width: 700px;
  height: 350px;
  background: radial-gradient(ellipse at center,
    rgba(59, 130, 246, 0.45) 0%,
    rgba(59, 130, 246, 0.22) 40%,
    rgba(59, 130, 246, 0) 70%
  );
  filter: blur(60px);
  opacity: 0.5;
}

/* XL — Full-width hero atmosphere */
.glow-blue-xl {
  width: 100%;
  max-width: 900px;
  height: 400px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(59, 130, 246, 0.40) 0%,
    rgba(99, 102, 241, 0.20) 30%,
    rgba(59, 130, 246, 0.10) 55%,
    rgba(59, 130, 246, 0) 70%
  );
  filter: blur(80px);
  opacity: 0.65;
}

/* ===========================================
 * PURPLE-BLUE GLOW — For premium/feature sections
 * Blends blue + violet for depth
 * =========================================== */

.glow-violet-md {
  width: 400px;
  height: 200px;
  background: radial-gradient(ellipse at center,
    rgba(139, 92, 246, 0.55) 0%,
    rgba(99, 102, 241, 0.30) 40%,
    rgba(59, 130, 246, 0) 70%
  );
  filter: blur(44px);
  opacity: 0.50;
}

.glow-violet-lg {
  width: 700px;
  height: 300px;
  background: radial-gradient(ellipse at center,
    rgba(139, 92, 246, 0.45) 0%,
    rgba(99, 102, 241, 0.22) 40%,
    rgba(59, 130, 246, 0.08) 60%,
    transparent 70%
  );
  filter: blur(64px);
  opacity: 0.55;
}

/* ===========================================
 * EMERALD GLOW — For success/trust sections
 * =========================================== */

.glow-emerald-md {
  width: 360px;
  height: 180px;
  background: radial-gradient(ellipse at center,
    rgba(16, 185, 129, 0.55) 0%,
    rgba(16, 185, 129, 0.25) 40%,
    rgba(16, 185, 129, 0) 70%
  );
  filter: blur(40px);
  opacity: 0.50;
}

/* ===========================================
 * SECTION GLOW HELPERS
 * Preset positioning for common page layouts.
 * Add to a position:relative wrapper.
 * =========================================== */

/* Hero top-center glow — sits behind headline */
.glow-hero-top {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  width: min(900px, 100%);
  height: 500px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(59, 130, 246, 0.35) 0%,
    rgba(99, 102, 241, 0.15) 35%,
    transparent 65%
  );
  filter: blur(80px);
  opacity: 0.70;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Section edge glow — bottom-right accent */
.glow-section-right {
  position: absolute;
  bottom: -5%;
  right: -5%;
  width: 500px;
  height: 350px;
  background: radial-gradient(ellipse at 100% 100%,
    rgba(59, 130, 246, 0.30) 0%,
    rgba(59, 130, 246, 0.12) 40%,
    transparent 65%
  );
  filter: blur(60px);
  opacity: 0.60;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Section edge glow — top-left accent */
.glow-section-left {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 500px;
  height: 350px;
  background: radial-gradient(ellipse at 0% 0%,
    rgba(99, 102, 241, 0.28) 0%,
    rgba(59, 130, 246, 0.12) 40%,
    transparent 65%
  );
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ===========================================
 * GLASSMORPHISM SURFACE UTILITIES
 * backdrop-filter + surface tint + thin border
 * WCAG: Ensure text meets 4.5:1 on glass surfaces
 * =========================================== */

/* Base glass — cards, callouts */
.glass {
  background: var(--glass-bg-soft, rgba(255, 255, 255, 0.06));
  backdrop-filter: var(--glass-blur-md, blur(6px));
  -webkit-backdrop-filter: var(--glass-blur-md, blur(6px));
  border: var(--glass-border-default, 1px solid rgba(255, 255, 255, 0.10));
}

/* Subtle glass — nav bars, tooltips */
.glass-subtle {
  background: var(--glass-bg-subtle, rgba(255, 255, 255, 0.03));
  backdrop-filter: var(--glass-blur-sm, blur(4px));
  -webkit-backdrop-filter: var(--glass-blur-sm, blur(4px));
  border: var(--glass-border-subtle, 1px solid rgba(255, 255, 255, 0.06));
}

/* Medium glass — feature cards, hero callouts */
.glass-medium {
  background: var(--glass-bg-medium, rgba(255, 255, 255, 0.10));
  backdrop-filter: var(--glass-blur-lg, blur(12px));
  -webkit-backdrop-filter: var(--glass-blur-lg, blur(12px));
  border: var(--glass-border-default, 1px solid rgba(255, 255, 255, 0.10));
}

/* Strong glass — modals, drawers */
.glass-strong {
  background: var(--glass-bg-strong, rgba(255, 255, 255, 0.16));
  backdrop-filter: var(--glass-blur-xl, blur(24px));
  -webkit-backdrop-filter: var(--glass-blur-xl, blur(24px));
  border: var(--glass-border-strong, 1px solid rgba(255, 255, 255, 0.18));
}

/* Blue glass — interactive/CTA glass elements */
.glass-blue {
  background: var(--glass-bg-blue, rgba(59, 130, 246, 0.08));
  backdrop-filter: var(--glass-blur-md, blur(6px));
  -webkit-backdrop-filter: var(--glass-blur-md, blur(6px));
  border: var(--glass-border-glow, 1px solid rgba(59, 130, 246, 0.40));
}

/* Blue glass — strong variant for primary CTAs */
.glass-blue-strong {
  background: var(--glass-bg-blue-strong, rgba(59, 130, 246, 0.15));
  backdrop-filter: var(--glass-blur-lg, blur(12px));
  -webkit-backdrop-filter: var(--glass-blur-lg, blur(12px));
  border: var(--glass-border-glow, 1px solid rgba(59, 130, 246, 0.40));
  box-shadow: 0 0 24px 4px rgba(59, 130, 246, 0.20);
}

/* ===========================================
 * GLOW BORDER — Animated glowing border effect
 * Uses box-shadow to simulate a glowing ring
 * =========================================== */

.glow-border {
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.40),
    0 0 12px 2px rgba(59, 130, 246, 0.20);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.glow-border:hover,
.glow-border:focus-within {
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.70),
    0 0 24px 4px rgba(59, 130, 246, 0.35);
}

/* ===========================================
 * REDUCED MOTION: All glow effects static
 * =========================================== */

@media (prefers-reduced-motion: reduce) {
  .glow-blue-sm,
  .glow-blue-md,
  .glow-blue-lg,
  .glow-blue-xl,
  .glow-violet-md,
  .glow-violet-lg,
  .glow-emerald-md,
  .glow-hero-top,
  .glow-section-right,
  .glow-section-left {
    opacity: 0;
    /* Hide decorative glows entirely for reduced motion preference */
  }

  .glow-border,
  .glow-border:hover,
  .glow-border:focus-within {
    /* Keep glow border functional but remove animation */
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.40);
    transition: none;
  }
}

/* ===========================================
 * LIGHT-MODE OVERRIDES (OPT-144)
 * :root is now light-default (OPT-143 convention flip).
 * Dark-tuned glow ellipses look muddy on white.
 *
 * Strategy:
 *   - Decorative glow ellipses → opacity: 0 by default
 *   - Glass surfaces → dark-tinted borders/bg for light canvas
 *   - Glow border → toned down for light backgrounds
 *   - html.dark restores all original dark-mode values
 * =========================================== */

/* --- Glass surface tokens: light-mode defaults --- */
:root {
  --glass-bg-soft:        rgba(0, 0, 0, 0.03);
  --glass-bg-subtle:      rgba(0, 0, 0, 0.02);
  --glass-bg-medium:      rgba(0, 0, 0, 0.05);
  --glass-bg-strong:      rgba(0, 0, 0, 0.08);
  --glass-bg-blue:        rgba(59, 130, 246, 0.06);
  --glass-bg-blue-strong: rgba(59, 130, 246, 0.10);
  --glass-border-default: 1px solid rgba(0, 0, 0, 0.08);
  --glass-border-subtle:  1px solid rgba(0, 0, 0, 0.05);
  --glass-border-strong:  1px solid rgba(0, 0, 0, 0.12);
  --glass-border-glow:    1px solid rgba(59, 130, 246, 0.35);
}

/* Restore white-tint glass in dark mode */
html.dark {
  --glass-bg-soft:        rgba(255, 255, 255, 0.06);
  --glass-bg-subtle:      rgba(255, 255, 255, 0.03);
  --glass-bg-medium:      rgba(255, 255, 255, 0.10);
  --glass-bg-strong:      rgba(255, 255, 255, 0.16);
  --glass-bg-blue:        rgba(59, 130, 246, 0.08);
  --glass-bg-blue-strong: rgba(59, 130, 246, 0.15);
  --glass-border-default: 1px solid rgba(255, 255, 255, 0.10);
  --glass-border-subtle:  1px solid rgba(255, 255, 255, 0.06);
  --glass-border-strong:  1px solid rgba(255, 255, 255, 0.18);
  --glass-border-glow:    1px solid rgba(59, 130, 246, 0.40);
}

/* --- Decorative glow ellipses: hidden by default (light mode) --- */
.glow-blue-sm,
.glow-blue-md,
.glow-blue-lg,
.glow-blue-xl,
.glow-violet-md,
.glow-violet-lg,
.glow-emerald-md,
.glow-hero-top,
.glow-section-right,
.glow-section-left {
  opacity: 0;
}

/* Restore full-intensity glows in dark mode */
html.dark .glow-blue-sm    { opacity: 0.60; }
html.dark .glow-blue-md    { opacity: 0.55; }
html.dark .glow-blue-lg    { opacity: 0.50; }
html.dark .glow-blue-xl    { opacity: 0.65; }
html.dark .glow-violet-md  { opacity: 0.50; }
html.dark .glow-violet-lg  { opacity: 0.55; }
html.dark .glow-emerald-md { opacity: 0.50; }
html.dark .glow-hero-top   { opacity: 0.70; }
html.dark .glow-section-right { opacity: 0.60; }
html.dark .glow-section-left  { opacity: 0.55; }

/* --- Glow border: toned down for light backgrounds --- */
.glow-border {
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.25),
    0 0 8px 1px rgba(59, 130, 246, 0.10);
}

.glow-border:hover,
.glow-border:focus-within {
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.50),
    0 0 12px 2px rgba(59, 130, 246, 0.18);
}

/* Restore full glow border in dark mode */
html.dark .glow-border {
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.40),
    0 0 12px 2px rgba(59, 130, 246, 0.20);
}

html.dark .glow-border:hover,
html.dark .glow-border:focus-within {
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.70),
    0 0 24px 4px rgba(59, 130, 246, 0.35);
}