/* Glass Lens — Bespoke Glass add-on (private revision, 2026-11-07, from the TRIBE Chat rail study)
   One moving glass lens inside a rail of links or buttons, plus a disclosure that grows out of its trigger.
   Theme with --bgl-tint / --bgl-hi (r, g, b). Works without the script: the rail simply has no lens. */

.bgl-rail{--bgl-tint:227,174,70;--bgl-hi:255,240,200;--lx:50%;--le:0}
.bgl-pos{position:relative}
.bgl-rail.bgl-on{touch-action:pan-y}

/* reflected light on the rail that travels with the lens (top catch + lower reflection) */
.bgl-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s ease;
  background:
    radial-gradient(150px 55% at var(--lx) 0%,rgba(var(--bgl-hi),calc(.10 + var(--le)*.22)),transparent 72%),
    radial-gradient(170px 60% at var(--lx) 100%,rgba(var(--bgl-tint),calc(.07 + var(--le)*.20)),transparent 72%)}
.bgl-rail.bgl-on .bgl-glow{opacity:1}
/* the rail answers the lens: a ring of light runs out through the rail when you let go */
.bgl-wave{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:var(--wa,0);
  background:radial-gradient(circle at var(--wx,50%) 50%,transparent calc(var(--wr,0px) - 34px),rgba(var(--bgl-hi),.55) calc(var(--wr,0px) - 8px),rgba(var(--bgl-tint),.42) var(--wr,0px),transparent calc(var(--wr,0px) + 22px));
  -webkit-mask:linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0)}

/* the lens */
.bgl-lens{position:absolute;left:0;top:0;z-index:2;pointer-events:none;border-radius:999px;opacity:0;transition:opacity .25s ease;will-change:transform,width,height;--pl:0;--tr:0}
/* glow: builds while pressed, flares as it swooshes out on release */
.bgl-lens::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;opacity:var(--gw,0);
  box-shadow:0 0 18px 2px rgba(var(--bgl-tint),.6),0 0 44px 6px rgba(var(--bgl-hi),.22),inset 0 0 14px rgba(var(--bgl-hi),.35)}
.bgl-rail.bgl-on .bgl-lens{opacity:1}
.bgl-glass{position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(var(--bgl-hi),.20),rgba(var(--bgl-tint),.05) 52%,rgba(var(--bgl-hi),.13));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -8px 14px -10px rgba(var(--bgl-tint),.75),0 10px 22px -12px rgba(var(--bgl-tint),.65);
  -webkit-backdrop-filter:brightness(1.12) saturate(1.3);backdrop-filter:brightness(1.12) saturate(1.3)}
/* rim band: only the narrow strip at the edge diffuses what passes under it, and only while the lens moves; the middle stays clear */
.bgl-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:7px;opacity:var(--tr);
  -webkit-backdrop-filter:blur(1.6px) brightness(1.08);backdrop-filter:blur(1.6px) brightness(1.08);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* press light: two soft tinted reflections that slide to the ends as the lens compresses */
.bgl-light{position:absolute;inset:0;border-radius:inherit;overflow:hidden;mix-blend-mode:screen}
.bgl-light::before,.bgl-light::after{content:"";position:absolute;top:-10%;bottom:-10%;width:46%;opacity:calc(.12 + var(--pl)*.7)}
.bgl-light::before{left:0;translate:calc(var(--pl)*-14%) 0;background:radial-gradient(closest-side at 22% 50%,rgba(var(--bgl-hi),.85),rgba(var(--bgl-tint),.35) 45%,transparent 75%)}
.bgl-light::after{right:0;translate:calc(var(--pl)*14%) 0;background:radial-gradient(closest-side at 78% 50%,rgba(var(--bgl-hi),.85),rgba(var(--bgl-tint),.35) 45%,transparent 75%)}
/* the rim: drawn by the script, ripples with motion and settles to a calm outline */
.bgl-rim{position:absolute;left:-5px;top:-5px;overflow:visible;pointer-events:none}
.bgl-rim path{fill:none;stroke-linejoin:round}
.bgl-rim .a{stroke:url(#bglRimG);stroke-width:1.15}
.bgl-rim .b{stroke:rgba(var(--bgl-hi),.22);stroke-width:3.2;filter:blur(1px)}

/* labels respond a little as the lens passes, and keep a calm sheen while selected; text stays crisp */
.bgl-rail>a,.bgl-rail>button{--near:0;transition:color .25s ease,text-shadow .25s ease}
.bgl-rail.bgl-on>a,.bgl-rail.bgl-on>button{text-shadow:0 0 calc(var(--near)*10px) rgba(var(--bgl-hi),calc(var(--near)*.55))}

/* disclosure: one glass outline grows out of its trigger (pull down, then spread with rounded shoulders) */
@keyframes bglDiscIn{
  0%{clip-path:inset(0 var(--dr,0px) calc(100% - 2px) var(--dl,0px) round 22px)}
  42%{clip-path:inset(0 var(--dr,0px) 48% var(--dl,0px) round 22px)}
  100%{clip-path:inset(0 0 0 0 round 22px)}}
@keyframes bglDiscOut{
  0%{clip-path:inset(0 0 0 0 round 22px)}
  52%{clip-path:inset(0 var(--dr,0px) 48% var(--dl,0px) round 22px)}
  100%{clip-path:inset(0 var(--dr,0px) calc(100% - 2px) var(--dl,0px) round 22px)}}
@keyframes bglDiscRow{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@keyframes bglDiscSheen{from{background-position:50% -120%}to{background-position:50% 220%}}
.bgl-disc-in{animation:bglDiscIn .5s cubic-bezier(.3,.9,.3,1) both}
.bgl-disc-out{animation:bglDiscOut .32s cubic-bezier(.5,0,.6,1) both}
.bgl-disc-in>*{animation:bglDiscRow .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--ri,0)*.04s)}
.bgl-disc-in::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,transparent 40%,rgba(var(--bgl-hi,255,240,200),.10) 50%,transparent 60%) 50% -120%/100% 200% no-repeat;animation:bglDiscSheen .7s ease-out .1s both}

@media (prefers-reduced-motion:reduce){
  .bgl-wave{display:none}
  .bgl-disc-in,.bgl-disc-out,.bgl-disc-in>*,.bgl-disc-in::after{animation:none!important}
  .bgl-lens{transition:opacity .15s}
}
@media (prefers-reduced-transparency:reduce){
  .bgl-glass{background:rgb(52,40,18);-webkit-backdrop-filter:none;backdrop-filter:none}
  .bgl-glass::before{display:none}
  .bgl-light{display:none}
}