/* SOCIUS liquid-glass polish pass — remove boxy layers + add floating depth */

:root{
  --glass-float-shadow:0 18px 42px rgba(37,29,24,.10),0 4px 12px rgba(37,29,24,.06);
  --glass-float-shadow-hover:0 28px 58px rgba(37,29,24,.16),0 8px 18px rgba(37,29,24,.09);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 0 rgba(255,255,255,.10);
}

/* Remove the flat rectangular sheen layers that were reading like boxes behind glass. */
.preview-shot:after,
.visual-world-card:after,
.idea-card:after,
.influence-stat:after{
  display:none!important;
}

/* Glass pieces should read as objects floating above the page, not panels pasted onto it. */
.preview-stage,
.preview-rows button,
.preview-shot,
.visual-world-card,
.idea-card,
.influence-stat,
.request-row,
.account-list>button,
.account-list>div,
.preview-statement .wrap,
.preview-community .cloud,
.build-stage,
.modal,
.drawer,
.newsletter-card,
.cookie-bar{
  position:relative;
  background-clip:padding-box!important;
  transform:translateZ(0);
}

.preview-stage,
.preview-rows button,
.preview-shot,
.visual-world-card,
.idea-card,
.influence-stat{
  box-shadow:var(--glass-inner),var(--glass-float-shadow)!important;
}

/* Soft contact shadow under larger glass surfaces helps them feel suspended. */
.preview-stage:before,
.preview-shot:before,
.visual-world-card:before,
.idea-card:before,
.influence-stat:before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:-16px;
  height:24px;
  border-radius:50%;
  background:rgba(38,29,24,.10);
  filter:blur(18px);
  pointer-events:none;
  z-index:-1;
}

/* Keep existing art/card pseudo-elements from turning into full square overlays. */
.preview-shot,
.visual-world-card,
.idea-card,
.influence-stat{
  isolation:isolate;
  overflow:visible!important;
}
.preview-shot>* ,
.visual-world-card>* ,
.idea-card>* ,
.influence-stat>*{
  position:relative;
  z-index:1;
}
.preview-shot img,
.visual-world-card img{
  border-radius:inherit;
  clip-path:inset(0 round 28px);
}

/* Floating hover behavior for product/editorial glass objects. */
.preview-stage,
.preview-shot,
.visual-world-card,
.idea-card,
.influence-stat,
.preview-rows button{
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease,background .28s ease!important;
}
.preview-shot:hover,
.visual-world-card:hover,
.idea-card:hover,
.influence-stat:hover,
.preview-rows button:hover{
  transform:translateY(-5px) scale(1.008)!important;
  box-shadow:var(--glass-inner),var(--glass-float-shadow-hover)!important;
  border-color:rgba(255,255,255,.48)!important;
}

/* The nav behaves like controls embedded in the glass bar, then pops outward on hover. */
.header .nav button{
  position:relative!important;
  padding:9px 12px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:translateY(0) scale(1)!important;
  transition:transform .18s cubic-bezier(.2,.9,.2,1),background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease!important;
  -webkit-backdrop-filter:blur(0)!important;
  backdrop-filter:blur(0)!important;
}
.header .nav button:hover{
  transform:translateY(-4px) scale(1.035)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.10))!important;
  border-color:rgba(255,255,255,.32)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    0 10px 18px rgba(0,0,0,.16),
    0 2px 4px rgba(0,0,0,.10)!important;
  -webkit-backdrop-filter:blur(12px) saturate(135%)!important;
  backdrop-filter:blur(12px) saturate(135%)!important;
}
.header .nav button:active{
  transform:translateY(-1px) scale(.985)!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.10)!important;
}
.header .nav .bag{
  border-color:rgba(255,255,255,.30)!important;
  background:rgba(255,255,255,.08)!important;
}

/* Global buttons: small 3D lift from the glass surface, with a pressed state. */
.pill,
.pill-dark,
.vote,
.checkout,
.icon,
.auth-tabs button,
.text-button{
  transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,border-color .18s ease,background .18s ease!important;
}
.pill:hover,
.vote:hover,
.auth-tabs button:hover,
.icon:hover{
  transform:translateY(-3px) scale(1.02)!important;
  border-color:rgba(255,255,255,.52)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.12))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 12px 22px rgba(36,28,23,.14),0 3px 7px rgba(36,28,23,.08)!important;
}
.pill-dark:hover,
.checkout:hover{
  transform:translateY(-3px) scale(1.02)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 26px rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.12)!important;
}
.pill:active,
.pill-dark:active,
.vote:active,
.checkout:active,
.icon:active,
.auth-tabs button:active{
  transform:translateY(0) scale(.98)!important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.14),0 3px 7px rgba(0,0,0,.08)!important;
}

/* Inputs get a soft recessed-glass edge instead of a flat rectangle. */
.form-row input,
.form-row textarea,
.newsletter-form input{
  border-radius:16px!important;
  box-shadow:inset 0 2px 7px rgba(55,43,35,.06),inset 0 1px 0 rgba(255,255,255,.62)!important;
}
.form-row input:focus,
.form-row textarea:focus,
.newsletter-form input:focus{
  outline:none!important;
  border-color:rgba(255,255,255,.72)!important;
  box-shadow:inset 0 2px 7px rgba(55,43,35,.05),0 0 0 3px rgba(255,255,255,.22),0 10px 22px rgba(44,34,28,.08)!important;
}

@media(max-width:700px){
  /* No exaggerated lift on touch screens; keep the polished shadows. */
  .preview-shot:hover,
  .visual-world-card:hover,
  .idea-card:hover,
  .influence-stat:hover,
  .preview-rows button:hover{
    transform:none!important;
  }
  .header .nav button:hover,
  .pill:hover,
  .pill-dark:hover,
  .vote:hover,
  .checkout:hover,
  .icon:hover,
  .auth-tabs button:hover{
    transform:none!important;
  }
  .preview-shot img,
  .visual-world-card img{clip-path:inset(0 round 22px)}
}