/* WopBlockStudio 1B.5 | real WebGL Liquid Glass progressive enhancement.
   CSS backgrounds remain intact if WebGL/CDN is absent. Do not use this file
   as a substitute for @ybouane/liquidglass. */
.wbs-optics-root {
  position: relative;
  isolation: isolate;
  min-width: 0;
}
.wbs-optics-backdrop {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: brightness(.65) saturate(1.18) contrast(1.05);
  pointer-events: none;
  z-index: 0;
}
.wbs-optics-root > .wbs-optics-target {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}
/* Wrappers have exactly their target's visible dimensions; no fake opaque
   glass strip outside the component. Header sticky behavior lives on wrapper. */
body.auth-page .wbs-optics-root--header {
  width: min(1260px, calc(100% - 42px));
  margin: 18px auto 0;
  z-index: 5;
  flex: 0 0 auto;
}
body.home-page .wbs-optics-root--header {
  width: min(1580px, calc(100vw - 20px));
  margin: 14px auto 0;
  position: sticky;
  top: 14px;
  z-index: 1000;
}
body.home-page .wbs-optics-root--header > .floating-topbar {
  position: relative;
  top: auto;
  margin: 0;
  width: 100%;
}
body.auth-page .wbs-optics-root--auth {
  width: min(680px, 100%);
  flex: 0 0 auto;
}
body.home-page .wbs-optics-root--news,
body.home-page .wbs-optics-root--modules {
  width: 100%;
  min-width: 0;
}
body.home-page .wbs-optics-root--modules {
  position: sticky;
  top: 110px;
}
body.home-page .wbs-optics-root--modules > .top-modules-panel-v5 {
  position: relative;
  top: auto;
}
/* Only after WebGL init has succeeded: let the shader's actual warped image
   show through, preserving contrast and the original CSS as failure fallback. */
.wbs-optics-root.wbs-webgl-active > .wbs-optics-target {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.wbs-optics-root.wbs-webgl-active > .topbar {
  background: rgba(11, 13, 36, .23);
}
.wbs-optics-root.wbs-webgl-active > .auth-card {
  background: rgba(12, 13, 34, .22);
}
.wbs-optics-root.wbs-webgl-active > .top-modules-panel-v5,
.wbs-optics-root.wbs-webgl-active > .news-card-v5 {
  background: rgba(11, 14, 34, .22);
}
/* The injected shader canvas is purely decorative: never steal form clicks. */
.wbs-optics-root.wbs-webgl-active > .wbs-optics-target > canvas:first-child {
  pointer-events: none;
}
@media (max-width: 680px) {
  body.auth-page .wbs-optics-root--header {width:calc(100% - 18px);margin-top:9px}
  body.home-page .wbs-optics-root--header {width:calc(100vw - 12px);margin-top:8px;top:8px}
}
@media (max-width: 420px) {
  /* Original long brand word protruded by a few pixels at narrow widths. */
  body.auth-page .intro h1 { font-size: clamp(28px, 8.9vw, 38px); }
}

/* Isolated Projects shell, shared actual WebGL engine: at most two contexts. */
body.wbs-projects-page .wbs-optics-root--header { width:min(1100px,calc(100% - 28px));margin:18px auto 0;z-index:5 }
body.wbs-projects-page .wbs-optics-root--project { width:100%; }
body.wbs-projects-page .wbs-optics-root.wbs-webgl-active > .topbar,
body.wbs-projects-page .wbs-optics-root.wbs-webgl-active > .projects-intro { background:rgba(14,12,37,.23) }
