/* liquid-glass.css — shared layered glass recipe (pairs with liquid-glass.js).
 * Same three-layer stack as the nav island and macOS dock: lens overlay,
 * tint, and rim shine. Children must be direct: .glass-effect, -tint, -shine. */

.liquid-glass {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: none;
  overflow: hidden;
}

/* Decorative layers must never intercept clicks on the widget's content */
.liquid-glass > .glass-effect,
.liquid-glass > .glass-effect-tint,
.liquid-glass > .glass-effect-shine {
  pointer-events: none;
}

.liquid-glass > .glass-effect {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  overflow: hidden;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.liquid-glass > .glass-effect-tint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  overflow: hidden;
  background-color: rgba(71, 71, 71, 0.15);
}

.liquid-glass > .glass-effect-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  /* quiet rim — heavy shine reads as a thick border next to the flat
     project cards; the toggle thumb keeps its brighter variant below */
  box-shadow:
    inset -1px -1px 1px 0 rgba(255, 255, 255, 0.14),
    inset 1px 1px 1px 0 rgba(255, 255, 255, 0.14);
}

/* Track: softer frosted rail */
.liquid-glass--track > .glass-effect-tint {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Thumb: brighter lifted lens */
.liquid-glass--thumb {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.liquid-glass--thumb > .glass-effect-tint {
  background-color: rgba(255, 255, 255, 0.22);
}

.liquid-glass--thumb > .glass-effect-shine {
  box-shadow:
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.42),
    inset 2px 2px 1px rgba(255, 255, 255, 0.50);
}

html.theme-core.day-mode .liquid-glass--track > .glass-effect-tint {
  background-color: rgba(0, 0, 0, 0.05);
}

html.theme-core.day-mode .liquid-glass--thumb {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

html.theme-core.day-mode .liquid-glass--thumb > .glass-effect-tint {
  background-color: rgba(255, 255, 255, 0.88);
}

/* Hero tiles: lens only — no frosted colour fill */
.liquid-glass--clear > .glass-effect-tint {
  background-color: transparent;
}

html.theme-core.day-mode .liquid-glass--clear > .glass-effect-tint {
  background-color: transparent;
}