/* Material study after Guglielmo Giannattasio's Liquid Glass Navbar.
   Source and deliberate differences are documented in glass-controls.js.
   Borderless reflected light + tap wave use DOM/CSS, not the water shader. */
.glass-control {
  --glass-ink: #fff9ec;
  --glass-fill: rgba(18, 31, 37, .65);
  --glass-rim: rgba(255, 246, 225, .56);
  --glass-lens-edge: rgba(250, 234, 204, .62);
  --glass-shadow: rgba(0, 8, 17, .24);
  --glass-ease: cubic-bezier(.23, 1, .32, 1);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 21px;
  border: 1px solid var(--glass-rim);
  border-radius: 999px;
  color: var(--glass-ink);
  background: var(--glass-fill);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), inset 0 -1px 2px rgba(1,15,26,.28), 0 6px 18px -8px var(--glass-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(1.2) brightness(1.08);
  backdrop-filter: blur(10px) saturate(1.2) brightness(1.08);
  text-decoration: none;
  vertical-align: middle;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.glass-control.glass-light,
.glass-light .glass-control {
  --glass-ink: #12332e;
  --glass-fill: rgba(255, 253, 244, .73);
  --glass-rim: rgba(255, 255, 255, .94);
  --glass-lens-edge: rgba(255,255,255,.96);
  --glass-shadow: rgba(28, 63, 59, .24);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 3px rgba(24, 91, 99, .20), 0 6px 18px -8px var(--glass-shadow);
}
.glass-control > .glass-label,
.site-header .glass-control > .glass-label,
.chapters .glass-control > .glass-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: 1.2;
  opacity: 1;
  pointer-events: none;
}
.glass-control > .glass-material {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  margin: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.glass-material::before,
.glass-material::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.glass-material::before {
  background: linear-gradient(165deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.035) 36%, transparent 55%, rgba(105,180,185,.11) 92%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.glass-material::after {
  inset: 2px 4px;
  border-top: 1px solid rgba(255,255,255,.31);
  border-bottom: 1px solid rgba(251,224,178,.18);
  opacity: .75;
}
.glass-material > .glass-meniscus {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin: 0;
  width: 128px;
  height: 128px;
  /* A diffuse light change, with no material edge or filled moving shape. */
  background: radial-gradient(circle, rgba(255,251,238,.18) 0%, rgba(255,251,238,.08) 30%, rgba(255,251,238,.025) 52%, rgba(255,251,238,0) 74%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.glass-control[data-glass-hover] .glass-meniscus { opacity: .65; }
.glass-material > .glass-wave {
  position: absolute;
  display: block;
  margin: 0;
  border: 1px solid rgba(255,251,236,.75);
  border-radius: 50%;
  box-shadow: 0 0 1px 2px rgba(255,255,255,.09), inset 0 0 9px rgba(150,207,212,.17);
  opacity: 0;
  pointer-events: none;
}
.glass-control:active { border-color: var(--glass-lens-edge); }
.glass-control:focus-visible { outline: 2px solid var(--brass, #c8a36a); outline-offset: 5px; }
.glass-control.glass-light:focus-visible,
.glass-light .glass-control:focus-visible { outline-color: #1e5c50; }
.glass-control[aria-current],
.glass-control[aria-pressed='true'] { border-color: #dfc18d; }
.chapters .glass-control[aria-current]::after { content: none; }
.glass-control:disabled,
.glass-control[aria-disabled='true'] { opacity: .5; cursor: default; }
.site-header nav .glass-control,
.chapters .glass-control { min-height: 44px; padding: 10px 16px; }
.experience-options .glass-control { min-height: 44px; padding: 9px 14px; font-size: 12px; }
.round-button.glass-control { width: auto; min-width: 90px; height: auto; font-size: 14px; }
.project-link.glass-control { padding: 13px 21px; }
@media (hover:hover) and (pointer:fine) {
  .glass-control:hover,
  .site-header nav .glass-control:hover,
  .contact-result .glass-control:hover { color: var(--glass-ink); border-color: var(--glass-lens-edge); background: var(--glass-fill); }
}
.glass-control[data-glass-reduced] .glass-meniscus,
.glass-control[data-glass-reduced] .glass-wave { display: none; }
.glass-control[data-glass-reduced],
.glass-control[data-glass-reduced] .glass-material { transition: none; }
.glass-control[data-glass-reduced]:active > .glass-material { transform: none; }
@media (prefers-reduced-motion:reduce) {
  .glass-control .glass-meniscus,
  .glass-control .glass-wave { display:none; }
  .glass-control,
  .glass-control .glass-material { transition: none; }
  .glass-control:active > .glass-material { transform: none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .glass-control { background: #1e3038; }
  .glass-control.glass-light,.glass-light .glass-control { background: #f3eee1; }
}
@media (forced-colors:active) {
  .glass-control { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; box-shadow:none; }
  .glass-control .glass-material { display:none; }
  .glass-control:focus-visible { outline-color: Highlight; }
}

@media(max-width:760px){.site-header nav .nav-feedback{display:none}.site-header nav .nav-contact{white-space:nowrap}}