/* Cinematic preview only. Optical layers never contain or filter interactive content.
   Coverage: shared header, desktop dropdowns, mobile panel, lead forms, ordinary
   .glass cards and the existing OpenGlass .ug-surface. No layout/font changes. */
:root {
  --optical-light-fill: rgba(244, 249, 255, .58);
  --optical-dark-fill: rgba(5, 16, 43, .64);
}

/* A transparent center, a narrow polished bevel, and a soft contact shadow.
   The header retains its original pseudo-layer and stacking relationship. */
.ula-header::before {
  background:
    linear-gradient(118deg, rgba(255,255,255,.34), transparent 22%, transparent 73%, rgba(213,232,255,.16)),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 38%, rgba(176,199,228,.10)),
    var(--optical-light-fill);
  border-bottom: 1px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.42),
    inset -1px 0 0 rgba(213,231,255,.4),
    inset 0 -2px 1px rgba(36,64,101,.15),
    0 3px 7px rgba(11,29,58,.06),
    0 16px 40px -20px rgba(7,25,56,.22);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  backdrop-filter: blur(7px) saturate(120%);
  transition: none;
}
.ula-header.is-scrolled::before {
  background-color: rgba(244,249,255,.68);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 1px rgba(36,64,101,.16), 0 12px 32px -14px rgba(7,25,56,.24);
}
.ula-header[data-optical-map]::before {
  -webkit-backdrop-filter: var(--optical-refraction) blur(.8px) saturate(120%);
  backdrop-filter: var(--optical-refraction) blur(.8px) saturate(120%);
}

/* The menu's existing ::before is its hover bridge: deliberately leave it alone.
   Only a decorative child owns the lens. Host dimensions/overflow remain unchanged. */
.ula-header .main-nav .sub-menu[data-optical-surface],
.ula-header .mobile-nav[data-optical-surface],
.lead-form[data-optical-surface],
.lead-card[data-optical-surface],
.glass[data-optical-surface],
.ug-glass-host .ug-surface[data-optical-surface] {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* OpenGlass remains mounted, with its DOM and controls untouched. Its optical skin
   is replaced by one shared pane, rather than stacking two refraction surfaces. */
.ug-surface[data-optical-surface]::before,
.ug-surface[data-optical-surface]::after { content: none !important; }
.optical-pane {
  position: absolute;
  inset: -1px;
  z-index: -1;
  display: block;
  box-sizing: border-box;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(122deg, rgba(255,255,255,.18), transparent 28%, transparent 70%, rgba(154,200,255,.06)),
    var(--optical-light-fill);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 1px 0 1px rgba(255,255,255,.44),
    inset -1px -2px 1px rgba(31,56,89,.18),
    0 3px 6px rgba(3,18,42,.08),
    0 20px 48px -18px rgba(3,18,42,.25);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
}
[data-optical-tone="dark"] > .optical-pane {
  background:
    linear-gradient(125deg, rgba(221,241,255,.10), transparent 26%, transparent 72%, rgba(109,166,232,.07)),
    var(--optical-dark-fill);
  border-color: rgba(205,232,255,.3);
  box-shadow: inset 0 1px 0 rgba(242,250,255,.48), inset 1px 0 0 rgba(222,242,255,.2),
    inset -1px -2px 1px rgba(0,9,32,.35), 0 3px 7px rgba(0,8,30,.12), 0 22px 50px -17px rgba(0,8,30,.38);
}
.ula-header .sub-menu > .optical-pane,
.ula-header .mobile-nav > .optical-pane { --optical-light-fill: rgba(247,251,255,.80); }
/* Reading surfaces need a quieter center than the header and forms. This inset
   sibling lens blurs behind the labels while leaving the outer 9px bevel sharp.
   The dropdown's ::before hover bridge is preserved. */
.ula-header .main-nav .sub-menu[data-optical-surface]::after,
.ula-header .mobile-nav[data-optical-surface]::after {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
  background: rgba(247,251,255,.10);
  -webkit-backdrop-filter: blur(10px) saturate(105%);
  backdrop-filter: blur(10px) saturate(105%);
}
[data-optical-map] > .optical-pane {
  -webkit-backdrop-filter: var(--optical-refraction) blur(.8px) saturate(115%);
  backdrop-filter: var(--optical-refraction) blur(.8px) saturate(115%);
}

/* This clipped highlight has no blur/filter. Its child moves only on fine-pointer
   input, never on a timer. It is faint enough to leave all labels readable. */
.optical-reflection {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}
.ula-header > .optical-reflection { border-radius: 0 0 var(--panel-r,33px) var(--panel-r,33px); }
.optical-reflection__shine {
  position: absolute;
  inset: -25%;
  display: block;
  background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.08) 32%, rgba(255,255,255,.38) 36%, transparent 41%, transparent 69%, rgba(188,225,255,.10) 75%, transparent 80%);
  opacity: .24;
  transform: translate3d(0,0,0);
  transition: transform 450ms cubic-bezier(.2,.7,.2,1), opacity 300ms ease;
}
.optical-reflection__shine.is-tracking { transition-duration: 100ms, 180ms; }

/* Pointer reflections stay off on coarse inputs. Static refraction can still run
   on capable Chromium; accessibility preferences are honored when they change. */
@media (max-width:767px) {
  .ula-header::before { --optical-light-fill: rgba(247,251,255,.68); }
  .optical-reflection__shine { opacity: .15; }
}
@media (prefers-reduced-motion:reduce) {
  .optical-reflection { display:none !important; }
  .optical-reflection__shine { transition:none !important; }
}
html.cinema-motion-paused .optical-reflection { display:none !important; }
html.cinema-motion-paused .optical-reflection__shine { transition:none !important; }
html[data-optical-mode="opaque"] .ula-header::before,
html[data-optical-mode="opaque"] .optical-pane {
  background:#f5f8fc !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
html[data-optical-mode="opaque"] [data-optical-tone="dark"] > .optical-pane { background:#07132d !important; }
html[data-optical-mode="opaque"] .optical-reflection { display:none !important; }
html[data-optical-mode="opaque"] .ula-header .main-nav .sub-menu[data-optical-surface]::after,
html[data-optical-mode="opaque"] .ula-header .mobile-nav[data-optical-surface]::after { display:none; }
@media (prefers-reduced-transparency:reduce) {
  .ula-header::before,.optical-pane { background:#f5f8fc !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  [data-optical-tone="dark"] > .optical-pane { background:#07132d !important; }
  .optical-reflection { display:none !important; }
  .ula-header .main-nav .sub-menu[data-optical-surface]::after,.ula-header .mobile-nav[data-optical-surface]::after { display:none; }
}
@media (forced-colors:active) {
  .ula-header::before,.optical-pane,[data-optical-tone="dark"] > .optical-pane {
    background:Canvas !important; border:1px solid CanvasText !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .optical-reflection { display:none !important; }
  .ula-header .main-nav .sub-menu[data-optical-surface]::after,.ula-header .mobile-nav[data-optical-surface]::after { display:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .ula-header::before,.optical-pane { background:#f5f8fc !important; }
  [data-optical-tone="dark"] > .optical-pane { background:#07132d !important; }
}