/* Liquid-glass material for widgets (class wg-surface in the HTML). Homepage and project pages.
   Components set layout only; the material (background, border, shadow, blur) comes from here.
   The write-ups flatten it in project-page.css. */

/* ---------- Liquid-glass widgets (cards, buttons, tabs) ---------- */

.wg-surface {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 1px solid var(--glass-rim);
  box-shadow: 0 10px 28px var(--glass-shadow), inset 0 1px 1px #ffffff20, inset 0 -1px 1px #ffffff08;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.wg-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, #ffffff06, transparent 42%), var(--glass-face, var(--glass-fill));
  backdrop-filter: blur(3px) saturate(175%);
  -webkit-backdrop-filter: blur(3px) saturate(175%);
}

.wg-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
  border: 0;
  box-shadow: inset 1px 1px 1px #ffffff16, inset -1px -1px 1px #ffffff08;
  background: linear-gradient(135deg, var(--glass-reflection), transparent 24%, transparent 76%, #ffffff0c);
  padding: 1px;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.wg-surface.wg-optical::before {
  backdrop-filter: var(--glass-filter) blur(1.2px);
  -webkit-backdrop-filter: var(--glass-filter) blur(1.2px);
}

.wg-button {
  color: var(--page-text);
  --glass-face: var(--glass-fill);
}

.wg-primary {
  --glass-face: rgba(187, 19, 62, .85);
  color: #fff;
}

.wg-button:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 4px;
}

.wg-button:hover::after {
  box-shadow: inset 1px 1px 1px #ffffff30, inset -1px -1px 1px #ffffff10;
}

.tp-tab.wg-surface:not([aria-selected=true]) {
  box-shadow: none;
  border-color: transparent;
}

.tp-tab.wg-surface:not([aria-selected=true])::before,
.tp-tab.wg-surface:not([aria-selected=true])::after {
  opacity: 0;
}

.tp-tab.wg-surface[aria-selected=true] {
  border-color: var(--brand-red);
  box-shadow: inset 0 -2px 0 var(--brand-red), 0 5px 15px var(--glass-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .tp-tab.wg-surface:not([aria-selected=true]):hover::before {
    opacity: .5;
  }
}

.wg-surface.wg-button::before {
  backdrop-filter: blur(2px) saturate(140%);
  -webkit-backdrop-filter: blur(2px) saturate(140%);
}

@media (prefers-reduced-transparency: reduce) {
  .wg-surface::before {
    background: var(--panel-bg);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .wg-primary::before {
    background: var(--brand-red);
  }

  .wg-surface::after {
    display: none;
  }
}

@supports not (backdrop-filter:blur(1px)) {
  .wg-surface::before {
    background: var(--panel-bg);
  }

  .wg-primary::before {
    background: var(--brand-red);
  }
}

@media (forced-colors: active) {
  .wg-surface {
    background: Canvas !important;
    box-shadow: none !important;
    outline: 1px solid CanvasText;
  }

  .wg-surface::before,
  .wg-surface::after {
    display: none;
  }
}