/* Optical surfaces: a translucent body, a beveled rim and a moving reflection.
   Content cards use a quieter, denser material than floating controls. */
:root {
  --liquid-fill: rgba(25, 22, 37, .58);
  --liquid-edge: rgba(236, 228, 255, .24);
  --liquid-shadow: 0 18px 48px rgba(0, 0, 0, .3),
    inset 0 1px 1px rgba(255, 255, 255, .18),
    inset 0 -1px 1px rgba(255, 255, 255, .05);
}

.liquid-glass {
  --glass-x: 26%;
  --glass-y: 0%;
  --glass-reflection: .38;
  isolation: isolate;
  border: 1px solid var(--liquid-edge);
  background: linear-gradient(150deg, rgba(255, 255, 255, .14),
    rgba(255, 255, 255, .025) 28%, transparent 58%, rgba(255, 255, 255, .04)),
    var(--liquid-fill);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  backdrop-filter: blur(24px) saturate(175%);
  box-shadow: var(--liquid-shadow);
}

.liquid-glass::before,
.liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* The real border remains as a fallback when composite masks are unavailable. */
.liquid-glass::before { display: none; }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .liquid-glass::before {
    display: block;
    padding: 1px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .8),
      rgba(222, 208, 255, .13) 28%, rgba(255, 255, 255, .04) 48%,
      rgba(174, 208, 255, .3) 72%, rgba(255, 255, 255, .55));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
}

.liquid-glass::after {
  background: radial-gradient(ellipse at var(--glass-x) var(--glass-y),
    rgba(255, 255, 255, .2), rgba(211, 194, 255, .07) 35%, transparent 70%);
  opacity: var(--glass-reflection);
  filter: none;
  box-shadow: none;
  transition: opacity .25s ease;
}

.site-nav.liquid-glass {
  --liquid-fill: rgba(20, 17, 32, .85);
  min-height: 64px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.site-nav.liquid-glass::after {
  background: radial-gradient(ellipse at var(--glass-x) var(--glass-y),
    rgba(255, 255, 255, .1), rgba(211, 194, 255, .035) 35%, transparent 70%);
}
.site-nav nav { min-width: 0; }
.site-nav nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  color: #e0dbea;
  border: 1px solid transparent;
}
.site-nav nav a::after { display: none; }
.site-nav nav a.active {
  color: #fff;
  border-color: rgba(242, 235, 255, .2);
  background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(171, 140, 239, .1));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 3px 12px rgba(0, 0, 0, .12);
}
.brand-mark {
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .2), 0 3px 10px rgba(0, 0, 0, .22);
}

.language-switch.liquid-glass,
.sound-toggle.liquid-glass {
  position: relative;
  --liquid-fill: rgba(255, 255, 255, .045);
  /* A single backdrop sample in the navigation avoids stacked blur layers. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .14);
}
.language-switch { gap: 0; }
.language-switch > span { display: none; }
.language-switch button {
  min-width: 44px;
  min-height: 40px;
  font-size: .75rem;
  color: #d4cbdf;
}
.language-switch button.active {
  color: #fff;
  background: linear-gradient(145deg, rgba(216, 198, 255, .3), rgba(143, 92, 255, .35));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .28), 0 3px 9px rgba(0, 0, 0, .24);
}
.sound-toggle.liquid-glass { width: 44px; height: 44px; }
.sound-toggle[aria-pressed="true"] {
  border-color: rgba(209, 191, 247, .5);
  background-color: rgba(143, 92, 255, .13);
}

.btn.liquid-glass {
  position: relative;
  overflow: hidden;
  min-height: 50px;
  padding: 0 22px;
  color: #fbf8ff;
  font-size: .875rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn.primary.liquid-glass {
  --liquid-fill: rgba(119, 75, 200, .56);
  border-color: rgba(229, 212, 255, .42);
  background: linear-gradient(145deg, rgba(231, 215, 255, .25),
    rgba(189, 153, 255, .11) 40%, rgba(117, 81, 192, .16)), var(--liquid-fill);
  box-shadow: var(--liquid-shadow), 0 8px 28px rgba(130, 79, 226, .2);
}
.btn.ghost.liquid-glass { --liquid-fill: rgba(29, 27, 42, .5); }

.skill-card.liquid-glass,
.approach-card.liquid-glass {
  --liquid-fill: rgba(18, 15, 29, .78);
  --glass-reflection: .23;
  --card-tint: 157, 109, 240;
  background: linear-gradient(145deg, rgba(255, 255, 255, .07), transparent 42%),
    radial-gradient(ellipse at 0 0, rgba(var(--card-tint), .18), transparent 75%),
    var(--liquid-fill);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}
.skill-card.card-two { --card-tint: 128, 139, 239; }
.skill-card.card-three { --card-tint: 94, 179, 224; }
.skill-card.card-four { --card-tint: 217, 116, 189; }
.skill-card.liquid-glass:hover,
.skill-card.liquid-glass.is-hovered {
  box-shadow: var(--liquid-shadow), 0 24px 70px rgba(var(--card-tint), .16);
}
.skill-card p, .approach-card > p:last-child { color: #d2cbdc; font-size: 1rem; }
.approach-card.liquid-glass { position: relative; --glass-reflection: .14; }
.card-tags span { color: #ded7e9; font-size: .75rem; background: rgba(255, 255, 255, .035); }

.lab-stack { display: grid; gap: 12px; }
.lab-card.liquid-glass {
  position: relative;
  overflow: hidden;
  --liquid-fill: rgba(28, 23, 43, .56);
  border: 1px solid var(--liquid-edge);
  border-radius: 24px;
  padding: 23px 22px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.lab-card.liquid-glass:last-child { border-bottom: 1px solid var(--liquid-edge); }
.lab-card.liquid-glass.is-open {
  --liquid-fill: rgba(50, 33, 76, .72);
  border-color: rgba(215, 194, 255, .5);
  box-shadow: var(--liquid-shadow), 0 8px 30px rgba(120, 67, 196, .13);
}
.lab-card.liquid-glass .lab-detail { font-size: 1rem; color: #d2cbdc; }
.lab-card.liquid-glass.is-open .lab-detail { max-height: 16rem; }
.lab-card.liquid-glass.reveal.visible:hover { transform: none; }

.liquid-glass:focus-visible,
.site-nav a:focus-visible,
.language-switch button:focus-visible {
  outline: 2px solid #ddc9ff;
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .liquid-glass:hover { --glass-reflection: .85; }
  .btn.liquid-glass:hover, .sound-toggle.liquid-glass:hover {
    border-color: rgba(241, 230, 255, .58);
  }
  .lab-card.liquid-glass.reveal.visible:hover { transform: translateY(-2px); }
}
.btn.liquid-glass:active { transform: scale(.98); }

@media (max-width: 1100px) and (min-width: 981px) {
  .site-nav.liquid-glass { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
  .site-nav nav a { padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 980px) {
  .site-nav.liquid-glass { grid-template-rows: 58px auto; padding-top: 2px; padding-bottom: 2px; }
  .site-nav nav { padding-bottom: 5px; }
  .site-nav nav a { min-height: 40px; padding: 8px 11px; }
}
@media (max-width: 650px) {
  .site-nav.liquid-glass { border-radius: 30px; }
  .brand-name { font-size: .75rem; }
  .language-switch button { min-width: 40px; min-height: 40px; }
  .lab-card.liquid-glass { padding: 21px 16px; gap: 12px; }
  .skill-card p { font-size: 1rem; }
}

/* Legible opaque surfaces when blur or transparency is unavailable/unwanted. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glass, .site-nav.liquid-glass, .lab-card.liquid-glass,
  .language-switch.liquid-glass, .sound-toggle.liquid-glass,
  .btn.ghost.liquid-glass, .lab-card.liquid-glass.is-open { --liquid-fill: #211b30; }
  .btn.primary.liquid-glass { --liquid-fill: #634293; }
  .skill-card.liquid-glass, .approach-card.liquid-glass { --liquid-fill: #181420; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .liquid-glass, .site-nav.liquid-glass, .lab-card.liquid-glass,
  .language-switch.liquid-glass, .sound-toggle.liquid-glass,
  .skill-card.liquid-glass, .approach-card.liquid-glass,
  .btn.ghost.liquid-glass, .lab-card.liquid-glass.is-open {
    --liquid-fill: #211b30;
    --liquid-edge: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .btn.primary.liquid-glass { --liquid-fill: #634293; }
  .skill-card.liquid-glass, .approach-card.liquid-glass { --liquid-fill: #181420; }
  .liquid-glass::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-glass::after { display: none; }
  .skill-card.liquid-glass { transform: none !important; }
  .btn.liquid-glass:hover, .btn.liquid-glass:active,
  .lab-card.liquid-glass.reveal.visible:hover { transform: none; }
}
body.motion-off .liquid-glass::after { opacity: .2; }
html.motion-off { scroll-behavior: auto; }
body.motion-off .skill-card.liquid-glass { transform: none !important; }
body.motion-off .btn.liquid-glass:hover,
body.motion-off .btn.liquid-glass:active,
body.motion-off .lab-card.liquid-glass.reveal.visible:hover { transform: none; }
@media (forced-colors: active) {
  .liquid-glass { border: 1px solid ButtonText !important; background: Canvas !important; box-shadow: none !important; }
  .liquid-glass::before, .liquid-glass::after { display: none; }
  .liquid-glass:focus-visible, .site-nav a:focus-visible,
  .language-switch button:focus-visible { outline-color: Highlight; }
}