/* GlassSurface — refracting glass panel.
   Ported from the React Bits component; palette reduced to the page's red
   ground / white elements / black type. */

.glass-surface {
  position: relative;
  overflow: hidden;
  transition: opacity 0.26s ease-out, box-shadow 0.3s ease, background 0.3s ease;
}

.glass-surface__filter {
  width: 100%; height: 100%;
  pointer-events: none;
  position: absolute; inset: 0;
  opacity: 0; z-index: -1;
}

/* Chromium: real SVG displacement through the backdrop. */
.glass-surface--svg {
  background: rgba(255, 255, 255, var(--glass-frost, 0));
  backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
  box-shadow:
    0 0 2px 1px rgba(255, 255, 255, 0.55) inset,
    0 0 14px 4px rgba(255, 255, 255, 0.16) inset;
}

/* Safari / Firefox: plain frosted blur, same shape and edges. */
.glass-surface--fallback {
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 0 14px 4px rgba(255, 255, 255, 0.14) inset;
}

@supports not (backdrop-filter: blur(10px)) {
  .glass-surface--fallback { background: rgba(255, 255, 255, 0.34); }
}

.glass-surface:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}