/* Prosperus · v3 interactive glass. Cursor-tracked sheen, chromatic edges, tilt. Both themes. */
.gl{position:relative}
.pane4.gl{position:absolute}
.gl > .sheen{overflow:hidden}
.gl > .sheen{position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1; opacity:0; transition:opacity .45s var(--ease);
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,var(--sheen,.38)), rgba(255,255,255,0) 60%)}
.gl:hover > .sheen{opacity:1}
.gl > .sheen::after{content:""; position:absolute; inset:0; border-radius:inherit; opacity:.55;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%), rgba(127,180,255,.14), rgba(246,200,224,.1) 35%, rgba(245,194,122,.08) 55%, transparent 70%)}
.btn.gl > .sheen{--sheen:.5}
.btn-ink.gl > .sheen{--sheen:.22}
.case.gl, .tier.gl, .door.gl{transform-style:preserve-3d; transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.case.gl.tilt, .tier.gl.tilt, .door.gl.tilt{transform:perspective(1100px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-5px); transition:transform .12s linear, box-shadow .5s var(--ease)}
/* chromatic edges on every pane */
.glass, .glass-dark, .case, .tier, .faq details, .door, .pane4{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset -1px 0 0 rgba(127,180,255,.25), inset 1px 0 0 rgba(245,194,122,.18), inset 0 -10px 24px -16px rgba(127,180,255,.35), 0 34px 70px -40px rgba(25,50,90,.45)}
:root[data-theme="dark"] .glass, :root[data-theme="dark"] .glass-dark, :root[data-theme="dark"] .case, :root[data-theme="dark"] .tier, :root[data-theme="dark"] .faq details, :root[data-theme="dark"] .door, :root[data-theme="dark"] .pane4{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset -1px 0 0 rgba(127,180,255,.35), inset 1px 0 0 rgba(245,194,122,.25), inset 0 -14px 30px -18px rgba(127,180,255,.35), 0 40px 80px -40px rgba(0,0,0,.7)}
:root[data-theme="dark"] .gl > .sheen{--sheen:.22}
:root[data-theme="dark"] .btn-ink.gl > .sheen{--sheen:.6}
/* the glass stage reacts too */
.stage4 .obj, .stage4 .gp{transition:filter .4s var(--ease)}
.hero4:hover .stage4 .sphere{filter:brightness(1.03)}
/* pane depth on the method stack */
.pane4{-webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%)}
@media (pointer:coarse){ .gl > .sheen{display:none} }
@media (prefers-reduced-motion:reduce){ .case.gl.tilt,.tier.gl.tilt,.door.gl.tilt{transform:none} }