/**
 * Medina Law Associates — Optimized Bottom Ambient Blur System
 * --------------------------------------------------------------
 * High-performance static gradient backdrop-filter glass layer.
 * Keeps variables static to enable complete GPU/compositor caching,
 * preventing scroll jank and animation delay.
 */

:root {
  --ambient-blur-val: 45;
  --ambient-saturate-val: 180;
  --ambient-brightness-val: 104;
}

/* Main Fixed Container */
.ambient-blur-container {
  position: fixed !important;
  opacity: 1;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9990 !important; /* Under modal, above site content */
  pointer-events: none !important; /* Let clicks pass through to underlying content */
  overflow: hidden !important;
  
  /* Optimized heights to reduce pixel shader calculations */
  height: 180px;
}

@media (max-width: 991px) {
  .ambient-blur-container {
    height: 140px;
  }
}

@media (max-width: 767px) {
  .ambient-blur-container {
    height: 100px;
  }
}

/* Backdrop Blur + Gradient Overlay */
.ambient-blur-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(
    to top, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.03) 30%, 
    rgba(255, 255, 255, 0) 100%
  ) !important;
  
  /* Static filter definitions to enable hardware texture caching */
  backdrop-filter: blur(calc(var(--ambient-blur-val) * 1px)) saturate(calc(var(--ambient-saturate-val) * 1%)) brightness(calc(var(--ambient-brightness-val) * 1%)) !important;
  -webkit-backdrop-filter: blur(calc(var(--ambient-blur-val) * 1px)) saturate(calc(var(--ambient-saturate-val) * 1%)) brightness(calc(var(--ambient-brightness-val) * 1%)) !important;
  
  /* Hint browser for compositor optimization */
  will-change: backdrop-filter;
  
  /* Feather mask on the blur layer itself */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 20%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 100%) !important;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 20%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 100%) !important;
}


/* 
 * iOS WebKit Compatibility:
 * Hides the custom bottom ambient blur overlay on iOS devices (Safari & Chrome).
 * Since iOS browsers already have a native, blurred bottom URL bar that floats 
 * over the page content, stacking our custom blur layer directly above it 
 * creates a double-stacked blur overlay that blocks bottom links and navigation.
 */
@supports (-webkit-touch-callout: none) {
  .ambient-blur-container {
    display: none !important;
  }
}
