/* Convex optical surface: no Gaussian blur on the backdrop. */
:is(.site-header, .ss-nav, .detail-nav, .p-nav).liquid-glass-header,
:is(.site-header, .ss-nav, .detail-nav, .p-nav).liquid-glass-header.scrolled,
.hero-floating.portfolio-card.liquid-glass-surface,
.hero-floating.portfolio-card.liquid-glass-surface:hover {
  background: transparent;
  -webkit-backdrop-filter: saturate(1.45);
  backdrop-filter: saturate(1.45);
  border-color: transparent;
  box-shadow:
    0 4px 16px rgba(17,17,26,.12),
    0 8px 24px rgba(17,17,26,.10),
    0 16px 56px rgba(17,17,26,.08);
}

.liquid-glass-header { overflow: visible; border-radius: 999px; }

:is(.site-header, .ss-nav, .detail-nav, .p-nav).liquid-glass-header.glass-surface--refractive,
.hero-floating.portfolio-card.liquid-glass-surface.glass-surface--refractive {
  -webkit-backdrop-filter: var(--glass-filter) saturate(1.45);
  backdrop-filter: var(--glass-filter) saturate(1.45);
}

/* Mobile devices use the compositor's live Gaussian backdrop, never snapshots. */
:is(.site-header, .ss-nav, .detail-nav, .p-nav).liquid-glass-header.glass-surface--native-blur,
.hero-floating.portfolio-card.liquid-glass-surface.glass-surface--native-blur,
:is(.site-header, .ss-nav, .detail-nav, .p-nav).liquid-glass-header.glass-surface--native-blur > nav {
  -webkit-backdrop-filter: blur(16px) saturate(1.45);
  backdrop-filter: blur(16px) saturate(1.45);
}

/* The floating cards keep their own rounded rectangles, with the same clear
   optical material as the header. Exclude the old broad card sheen. */
.hero-floating.liquid-glass-surface::before { display: none; }
.hero-floating.liquid-glass-surface > :is(span, strong, p) {
  position: relative;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 1px rgba(0,0,0,.85);
}
.hero-floating.liquid-glass-surface > :is(.card-kicker, p) { color: #d3d9e3; }


/* Expanded menus share the material, with a larger readable content surface. */
:is(.site-header.menu-open, .ss-nav.nav-open, .detail-nav.nav-open, .p-nav.nav-open).liquid-glass-header > nav {
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.025)), rgba(12,18,26,.88);
  -webkit-backdrop-filter: saturate(1.45);
  backdrop-filter: saturate(1.45);
  border-color: rgba(255,255,255,.19);
  box-shadow: 0 16px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
}

.liquid-glass-filter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

.liquid-glass-webgl {
  position: absolute;
  /* Match the border-box used by the optical map and scene crop. */
  inset: -1px;
  border-radius: inherit;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.liquid-glass-webgl[hidden] { display: none; }
/* One foreground material layer above native backdrops and WebGL output.
   Parent backgrounds/inset shadows paint BELOW child canvases. An opaque
   snapshot would cover those highlights, so put them after the optical layer
   while keeping both behind navigation text and controls. */
:is(.liquid-glass-header, .hero-floating.liquid-glass-surface)::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: rgba(255,255,255,.07);
  box-shadow:
    0 0 2px 1px rgba(255,255,255,.35) inset,
    0 0 10px 4px rgba(255,255,255,.12) inset,
    0 4px 16px rgba(255,255,255,.08) inset,
    0 8px 24px rgba(255,255,255,.06) inset,
    0 16px 56px rgba(255,255,255,.04) inset;
}

/* Land home sections below the taller site header without trapping the
   preceding paragraph against the navigation labels. */
html:has(.site-header.liquid-glass-header) { scroll-padding-top: 80px; }
#top > section[id] { scroll-margin-top: 0; }

@media (min-width: 1161px) {
  .site-header.liquid-glass-header > nav { position: relative; }
}
@media (min-width: 861px) {
  :is(.ss-nav, .detail-nav, .p-nav).liquid-glass-header > nav { position: relative; }
}

:is(.site-header, .ss-nav, .detail-nav, .p-nav).liquid-glass-header > nav > a {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 1px rgba(0,0,0,.85);
}

/* Keep foreground controls legible when a white project image passes behind
   the clear lens; this does not add a blur or opaque fill to the long bar. */
:is(.site-header, .ss-nav, .detail-nav, .p-nav).liquid-glass-header > :is(.brand, .ss-brand, .detail-brand, .p-home-link) {
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 1px rgba(0,0,0,.85);
}
:is(.site-header, .ss-nav, .detail-nav, .p-nav).liquid-glass-header :is(.mobile-menu-toggle, .secondary-menu-toggle, .music-toggle, .lang-toggle, .header-cta) {
  background: rgba(14,20,29,.62);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18);
}

:is(.site-header, .ss-nav, .detail-nav, .p-nav).liquid-glass-header > nav > a:not([aria-current="location"]) {
  color: rgba(245,247,251,.85);
}

.liquid-nav-hover {
  position: absolute;
  top: 50%;
  left: var(--pill-left, 0px);
  width: 0;
  height: 22px;
  transform: translateY(-50%);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  border: .5px solid rgba(255, 255, 255, .25);
  border-top-color: rgba(255, 255, 255, .50);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .50), inset 0 -.5px 0 rgba(255, 255, 255, .08);
  transition: left .5s cubic-bezier(.34, 1.56, .64, 1), width .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}

.liquid-nav-hover::after {
  content: "";
  position: absolute;
  inset: -150%;
  pointer-events: none;
  background: radial-gradient(circle at var(--liquid-x, 50%) var(--liquid-y, 50%), rgba(255, 255, 255, .25), rgba(255, 255, 255, .05) 30%, transparent 55%);
  mix-blend-mode: screen;
}

@media (max-width: 1160px) {
  .site-header .liquid-nav-hover { display: none; }
}
@media (max-width: 860px) {
  :is(.ss-nav, .detail-nav, .p-nav) .liquid-nav-hover { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-nav-hover { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  :is(.site-header, .ss-nav, .detail-nav, .p-nav).liquid-glass-header,
  :is(.site-header, .ss-nav, .detail-nav, .p-nav).liquid-glass-header:is(.scrolled, .glass-surface--refractive, .glass-surface--fallback),
  :is(.site-header.menu-open, .ss-nav.nav-open, .detail-nav.nav-open, .p-nav.nav-open).liquid-glass-header > nav,
  .hero-floating.portfolio-card.liquid-glass-surface:is(:hover, .glass-surface--refractive, .glass-surface--fallback) {
    background: rgba(18,24,32,.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}