/* ============================================================
   visual-polish.css — Phase 1
   Liquid Glass Lite + ambient interaction, no framework.
============================================================ */
:root{
  --lens-bg:rgba(14,20,36,.56);
  --lens-bd:rgba(255,255,255,.14);
  --pointer-x:50%;--pointer-y:20%;
}

/* Ambient light follows the pointer extremely subtly */
.mesh::after{
  content:'';position:absolute;inset:-20%;pointer-events:none;
  background:radial-gradient(circle 420px at var(--pointer-x) var(--pointer-y),rgba(0,242,234,.055),transparent 72%);
  mix-blend-mode:screen;opacity:.9;
}

/* Liquid Glass Lite: graceful on Safari/Firefox because it is still normal glass */
#nav{
  top:12px;left:18px;right:18px;width:auto;
  padding:15px 26px;border:1px solid var(--lens-bd);border-radius:15px;
  background:linear-gradient(110deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 42%,rgba(0,242,234,.025)),var(--lens-bg);
  -webkit-backdrop-filter:blur(20px) saturate(1.45);backdrop-filter:blur(20px) saturate(1.45);
  box-shadow:0 18px 55px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,242,234,.035);
  overflow:hidden;
}
#nav::before{
  content:'';position:absolute;left:8%;right:8%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),rgba(0,242,234,.35),transparent);opacity:.55;pointer-events:none
}
#nav::after{
  content:'';position:absolute;width:190px;height:110px;right:var(--nav-glare-x,20%);top:-88px;border-radius:50%;
  background:rgba(255,255,255,.12);filter:blur(35px);opacity:.24;pointer-events:none;transition:right .18s linear
}
#nav.scrolled{padding:11px 24px;background:linear-gradient(110deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),rgba(9,14,28,.72)}

.btn-primary,.btn-ghost,.nav-cta,.signature-case-link{
  position:relative;overflow:hidden;isolation:isolate;
}
.btn-primary::before,.btn-ghost::before,.nav-cta::before,.signature-case-link::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.16) 47%,transparent 70%);
  transform:translateX(-140%);transition:transform .55s cubic-bezier(.16,1,.3,1)
}
.btn-primary:hover::before,.btn-ghost:hover::before,.nav-cta:hover::before,.signature-case-link:hover::before{transform:translateX(140%)}

@media(max-width:960px){
  #nav{top:9px;left:10px;right:10px;padding:13px 16px;border-radius:13px}
  #nav.scrolled{padding:11px 16px}
  .mesh::after{display:none}
}