/* ═══════════════════════════════════════════════════════════════════════════
   THE WABI GLASS — ported VERBATIM from era/css/wabi.css, which took it from
   production (sotabot/website-v1, src/components/ui/glassmorphic-button).
   ⚠ RE-PORT IF THE REAL SITE CHANGES; never nudge a value here. The whole
   point of a material is that it is the same material everywhere.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#f0f0f0;
  --ink:#191919;
  --ink-70:rgba(25,25,25,.70);
  --ink-60:rgba(25,25,25,.60);
  --ink-40:rgba(25,25,25,.40);
  --ink-14:rgba(25,25,25,.14);
  --ink-07:rgba(25,25,25,.07);
  --ease-wabi:cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo:cubic-bezier(0.22, 1, 0.36, 1);
}
@property --angle-1{ syntax:'<angle>'; inherits:false; initial-value:-75deg; }
@property --angle-2{ syntax:'<angle>'; inherits:false; initial-value:-45deg; }
@keyframes blur-in{
  0%   { opacity:0; filter:blur(14px); transform:translateY(12px); }
  99%  { opacity:1; filter:blur(0);    transform:translateY(0); }
  100% { opacity:1; filter:none;       transform:translateY(0); }
}
.blur-in{ animation:blur-in 1.05s var(--ease-expo) both; will-change:opacity, filter; }
@media (prefers-reduced-motion:reduce){ .blur-in{ animation:none; } }

/* ── the glass button ─────────────────────────────────────────────── */
.glass-btn-wrap{
  position:relative; z-index:2; border-radius:999vw; background:transparent;
  pointer-events:none; transition:all 400ms var(--ease-wabi);
}
.glass-btn-shadow{
  position:absolute;
  width:calc(100% + 0.5em); height:calc(100% + 0.5em);
  top:calc(0% - 0.25em); left:calc(0% - 0.25em);
  filter:blur(clamp(0.5px, 0.0313em, 3px));
  overflow:visible; pointer-events:none; z-index:1;
}
.glass-btn-shadow::after{
  content:''; position:absolute; z-index:0; inset:0; border-radius:999vw;
  background:linear-gradient(180deg, rgba(0,0,0,.015), rgba(0,0,0,.0075));
  width:calc(100% - 0.5em - 0.0625em); height:calc(100% - 0.5em - 0.0625em);
  top:calc(0.5em - 0.125em); left:calc(0.5em - 0.21875em);
  padding:.125em; box-sizing:border-box;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:all 400ms var(--ease-wabi); opacity:1;
}
.glass-btn{
  all:unset; cursor:pointer; position:relative;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  pointer-events:auto; z-index:3;
  background:linear-gradient(-75deg, rgba(255,255,255,.05), rgba(255,255,255,.2), rgba(255,255,255,.05));
  border-radius:999vw;
  box-shadow:
    inset 0 .125em .125em rgba(0,0,0,.035),
    inset 0 -.125em .125em rgba(255,255,255,.5),
    0 .25em .125em -.125em rgba(0,0,0,.1),
    0 0 .1em .25em inset rgba(255,255,255,.2),
    0 0 0 0 rgba(255,255,255,1);
  backdrop-filter:blur(clamp(1px, .125em, 4px));
  -webkit-backdrop-filter:blur(clamp(1px, .125em, 4px));
  transition:all 400ms var(--ease-wabi);
  display:flex; align-items:center; justify-content:center;
  height:46px; font-family:inherit;
}
.glass-btn:hover{
  transform:scale(.975);
  box-shadow:
    inset 0 .125em .125em rgba(0,0,0,.035),
    inset 0 -.125em .125em rgba(255,255,255,.5),
    0 .075em .025em -.1em rgba(0,0,0,.25),
    0 0 .05em .1em inset rgba(255,255,255,.5),
    0 0 0 0 rgba(255,255,255,1);
}
.glass-btn span{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; user-select:none;
  color:rgba(50,50,50,1); text-shadow:0 .05em .05em rgba(0,0,0,.05);
  transition:all 400ms var(--ease-wabi);
  padding-inline:1.75em; font-size:16px; font-weight:500;
  letter-spacing:-0.18px; white-space:nowrap;
}
.glass-btn span::after{                       /* the travelling shine */
  content:''; display:block; position:absolute; z-index:3;
  width:calc(100% - clamp(1px,.0625em,4px)); height:calc(100% - clamp(1px,.0625em,4px));
  top:calc(0% + clamp(1px,.0625em,4px) / 2); left:calc(0% + clamp(1px,.0625em,4px) / 2);
  border-radius:999vw; overflow:clip;
  background:linear-gradient(var(--angle-2),
    rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 40% 50%, rgba(255,255,255,0) 55%);
  mix-blend-mode:screen; pointer-events:none;
  background-size:200% 200%; background-position:0% 50%; background-repeat:no-repeat;
  transition:background-position 500ms var(--ease-wabi), --angle-2 500ms var(--ease-wabi);
}
.glass-btn:hover span::after{ background-position:25% 50%; }
.glass-btn::after{                            /* the conic edge */
  content:''; position:absolute; z-index:1; inset:0; border-radius:999vw;
  width:calc(100% + clamp(1px,.0625em,4px)); height:calc(100% + clamp(1px,.0625em,4px));
  top:calc(0% - clamp(1px,.0625em,4px) / 2); left:calc(0% - clamp(1px,.0625em,4px) / 2);
  padding:clamp(1px,.0625em,4px); box-sizing:border-box;
  background:
    conic-gradient(from var(--angle-1) at 50% 50%,
      rgba(0,0,0,.5), rgba(0,0,0,0) 5% 40%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 60% 95%, rgba(0,0,0,.5)),
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:all 400ms var(--ease-wabi), --angle-1 500ms ease;
  box-shadow:inset 0 0 0 calc(clamp(1px,.0625em,4px) / 2) rgba(255,255,255,.35);
}
.glass-btn:hover::after{ --angle-1:-125deg; }
.glass-btn-wrap:has(button:hover) .glass-btn-shadow,
.glass-btn-wrap:has(a:hover) .glass-btn-shadow{ filter:blur(clamp(.25px,.0156em,1.5px)); }
.glass-btn-wrap:has(button:active) { transform:rotate3d(1,0,0,25deg); }

/* header variant — the bright pill */