/* =====================================================================
   FINAL LIQUIDGLASS CONSISTENCY PASS
   One visual language for EVERY glass surface.
===================================================================== */

html.liquid-glass-ready .glass-panel,
html.liquid-glass-ready .glass-card,
html.liquid-glass-ready .glass-button,
html.liquid-glass-ready .glass-control,
html.liquid-glass-ready .project-card,
html.liquid-glass-ready .experience-card,
html.liquid-glass-ready .skill-card,
html.liquid-glass-ready .certificate-card{
  background:transparent!important;
  background-image:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-color:rgba(214,226,255,.14)!important;
}

/* The WebGL shader is the glass surface; CSS must not paint a second glass. */
html.liquid-glass-ready .glass-panel,
html.liquid-glass-ready .glass-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  box-shadow:
    0 26px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.30)!important;
}

/* Stable dark optical tint for every large container. */
html.liquid-glass-ready .education-shell,
html.liquid-glass-ready .achievement-shell,
html.liquid-glass-ready .leadership-shell,
html.liquid-glass-ready .contact-shell,
html.liquid-glass-ready .command-panel,
html.liquid-glass-ready .project-modal-card{
  background:rgba(3,6,13,.34)!important;
}

/* Cards sit one layer above the large containers. */
html.liquid-glass-ready .education-card,
html.liquid-glass-ready .profile-card,
html.liquid-glass-ready .experience-card,
html.liquid-glass-ready .project-card,
html.liquid-glass-ready .skill-card,
html.liquid-glass-ready .certificate-card,
html.liquid-glass-ready .achievement-item{
  background:rgba(5,9,18,.28)!important;
}

/* Keep the WebGL canvas behind all real HTML content. */
html.liquid-glass-ready .glass-panel>canvas,
html.liquid-glass-ready .glass-card>canvas,
html.liquid-glass-ready .glass-button>canvas,
html.liquid-glass-ready .glass-control>canvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:1!important;
}

/* Content is never washed out or placed under the shader. */
html.liquid-glass-ready .glass-panel>*:not(canvas),
html.liquid-glass-ready .glass-card>*:not(canvas),
html.liquid-glass-ready .glass-button>*:not(canvas),
html.liquid-glass-ready .glass-control>*:not(canvas){
  position:relative;
  z-index:5;
}

html.liquid-glass-ready .glass-panel h1,
html.liquid-glass-ready .glass-panel h2,
html.liquid-glass-ready .glass-panel h3,
html.liquid-glass-ready .glass-card h1,
html.liquid-glass-ready .glass-card h2,
html.liquid-glass-ready .glass-card h3{
  color:#f7f9ff!important;
  text-shadow:0 2px 20px rgba(0,0,0,.50)!important;
}

html.liquid-glass-ready .glass-panel p,
html.liquid-glass-ready .glass-card p{
  color:rgba(221,229,242,.82)!important;
}

html.liquid-glass-ready .glass-panel .mini-label,
html.liquid-glass-ready .glass-panel .eyebrow,
html.liquid-glass-ready .glass-card .mini-label,
html.liquid-glass-ready .glass-card .eyebrow,
html.liquid-glass-ready .glass-card .meta-row{
  color:rgba(184,198,220,.78)!important;
}

/* Links/buttons use the same material instead of switching to opaque CSS glass. */
html.liquid-glass-ready .glass-button,
html.liquid-glass-ready .glass-control{
  background:transparent!important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
  border:1px solid rgba(215,228,255,.16)!important;
}

/* Remove old decorative CSS glass overlays that compete with the shader. */
html.liquid-glass-ready .glass-panel::before,
html.liquid-glass-ready .glass-card::before,
html.liquid-glass-ready .glass-button::before,
html.liquid-glass-ready .glass-control::before{
  background:none!important;
}

/* Keep only a very subtle optical highlight. */
html.liquid-glass-ready .glass-panel::after,
html.liquid-glass-ready .glass-card::after{
  z-index:4!important;
  background:
    linear-gradient(115deg,transparent 0%,rgba(255,255,255,.025) 30%,transparent 45%)!important;
  opacity:.42!important;
  pointer-events:none!important;
}

/* Nested project/media surfaces should remain readable and not become white. */
html.liquid-glass-ready .project-media,
html.liquid-glass-ready .clean-media,
html.liquid-glass-ready .youtube-media{
  background:rgba(2,5,11,.42)!important;
  border-color:rgba(214,226,255,.10)!important;
}

/* Mobile: same material, smaller opacity so the page remains visible. */
@media(max-width:760px){
  html.liquid-glass-ready .glass-panel,
  html.liquid-glass-ready .glass-card{
    box-shadow:
      0 18px 55px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.065)!important;
  }

  html.liquid-glass-ready .education-shell,
  html.liquid-glass-ready .achievement-shell,
  html.liquid-glass-ready .leadership-shell,
  html.liquid-glass-ready .contact-shell{
    background:rgba(3,6,13,.40)!important;
  }

  html.liquid-glass-ready .education-card,
  html.liquid-glass-ready .profile-card,
  html.liquid-glass-ready .experience-card,
  html.liquid-glass-ready .project-card,
  html.liquid-glass-ready .skill-card,
  html.liquid-glass-ready .certificate-card{
    background:rgba(5,9,18,.34)!important;
  }
}

/* Fallback remains dark even if WebGL fails. */
html.liquid-glass-fallback .glass-panel,
html.liquid-glass-fallback .glass-card{
  background:rgba(4,8,16,.62)!important;
  backdrop-filter:blur(20px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(125%)!important;
}