/* The homepage widgets share the navigation ribbon's stationary material. */
body:is(.home-widget-glass, .project-glass) {
  --wg-tint: rgba(247, 251, 255, .75);
  --wg-edge: rgba(255, 255, 255, .84);
  --wg-shadow: rgba(0, 25, 60, .12);
  --wg-gloss: rgba(255, 255, 255, .42)
}

body:is(.home-widget-glass, .project-glass).dark-mode {
  --wg-tint: rgba(9, 32, 56, .75);
  --wg-edge: rgba(225, 242, 255, .35);
  --wg-shadow: rgba(0, 5, 16, .30);
  --wg-gloss: rgba(224, 244, 255, .11)
}

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

body:is(.home-widget-glass, .project-glass) .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(--wg-face, var(--wg-fill));
  backdrop-filter: blur(3px) saturate(175%);
  -webkit-backdrop-filter: blur(3px) saturate(175%)
}

/* Rim reflections stay at the edges so photographs and text remain clear. */
body:is(.home-widget-glass, .project-glass) .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(--wg-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
}

body:is(.home-widget-glass, .project-glass) .wg-surface.wg-optical::before {
  backdrop-filter: var(--wg-filter) blur(1.2px);
  -webkit-backdrop-filter: var(--wg-filter) blur(1.2px)
}

body:is(.home-widget-glass, .project-glass) .wg-button {
  color: var(--page-text) !important;
  --wg-face: var(--wg-fill)
}

body:is(.home-widget-glass, .project-glass) .wg-primary {
  --wg-face: rgba(187, 19, 62, .85);
  color: #fff !important
}

body:is(.home-widget-glass, .project-glass) .wg-button:focus-visible {
  outline: 2px solid var(--flag-red);
  outline-offset: 4px
}

body:is(.home-widget-glass, .project-glass) .wg-button:hover::after {
  box-shadow: inset 1px 1px 1px #ffffff30, inset -1px -1px 1px #ffffff10
}

body:is(.home-widget-glass, .project-glass) .tp-tab.wg-surface:not([aria-selected=true]) {
  box-shadow: none !important;
  border-color: transparent !important
}

body:is(.home-widget-glass, .project-glass) .tp-tab.wg-surface:not([aria-selected=true])::before,
body:is(.home-widget-glass, .project-glass) .tp-tab.wg-surface:not([aria-selected=true])::after {
  opacity: 0
}

body:is(.home-widget-glass, .project-glass) .tp-tab.wg-surface[aria-selected=true] {
  border-color: var(--flag-red) !important;
  box-shadow: inset 0 -2px 0 var(--flag-red), 0 5px 15px var(--wg-shadow) !important
}

@media(hover:hover) and (pointer:fine) {
  body:is(.home-widget-glass, .project-glass) .tp-tab.wg-surface:not([aria-selected=true]):hover::before {
    opacity: .5
  }
}

/* Small controls keep a smooth glass face without bending the selected outline. */
body:is(.home-widget-glass, .project-glass) .wg-surface.wg-button::before {
  backdrop-filter: blur(2px) saturate(140%);
  -webkit-backdrop-filter: blur(2px) saturate(140%)
}

@media(prefers-reduced-transparency:reduce) {
  body:is(.home-widget-glass, .project-glass) .wg-surface::before {
    background: var(--panel-bg);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important
  }

  body:is(.home-widget-glass, .project-glass) .wg-primary::before {
    background: var(--flag-red)
  }

  body:is(.home-widget-glass, .project-glass) .wg-surface::after {
    display: none
  }
}

@supports not (backdrop-filter:blur(1px)) {
  body:is(.home-widget-glass, .project-glass) .wg-surface::before {
    background: var(--panel-bg)
  }

  body:is(.home-widget-glass, .project-glass) .wg-primary::before {
    background: var(--flag-red)
  }
}

@media(forced-colors:active) {
  body:is(.home-widget-glass, .project-glass) .wg-surface {
    background: Canvas !important;
    box-shadow: none !important;
    outline: 1px solid CanvasText
  }

  body:is(.home-widget-glass, .project-glass) .wg-surface::before,
  body:is(.home-widget-glass, .project-glass) .wg-surface::after {
    display: none
  }
}

/* Widgets use a clearer, softer variant of the navigation material. */
body:is(.home-widget-glass, .project-glass) {
  --wg-fill: rgba(247, 251, 255, .285);
  --wg-rim: rgba(255, 255, 255, .46);
  --wg-reflection: rgba(255, 255, 255, .21)
}

body:is(.home-widget-glass, .project-glass).dark-mode {
  --wg-fill: rgba(9, 32, 56, .285);
  --wg-rim: rgba(225, 242, 255, .19);
  --wg-reflection: rgba(224, 244, 255, .055)
}

@supports(background:color-mix(in srgb, white, transparent)) {

  body:is(.home-widget-glass, .project-glass),
  body:is(.home-widget-glass, .project-glass).dark-mode {
    --wg-fill: color-mix(in srgb, var(--wg-tint) 30%, transparent);
    --wg-rim: color-mix(in srgb, var(--wg-edge) 55%, transparent);
    --wg-reflection: color-mix(in srgb, var(--wg-gloss) 50%, transparent)
  }
}