/* ═══════════════════════════════════════════════════════════════════
   wabi-ui.css — the real Wabi glass button, ported not redrawn.

   Lifted verbatim out of era/css/wabi.css, which extracted it from
   production (sotabot/website-v1, src/components/ui/glassmorphic-button +
   header.tsx). These are wabi.ai's numbers. If the site changes, re-port
   rather than nudging values here.

   It is here because the campaign's own chrome — the directory, the links
   into each piece — is Wabi's, not the campaign's. The three directions
   get to shout in Publico, Canela and Orleans; the wrapper around them
   speaks in Selecta and Kalice and clicks a Wabi button.
   ═══════════════════════════════════════════════════════════════════ */

@property --angle-1 { syntax: '<angle>'; inherits: false; initial-value: -75deg; }
@property --angle-2 { syntax: '<angle>'; inherits: false; initial-value: -45deg; }

/* ── 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 */
.glass-btn-wrap--header{ width:140px; }
.glass-btn-wrap--header .glass-btn{
  width:140px; height:40px;
  background:
    linear-gradient(-75deg, rgba(255,255,255,.10), rgba(255,255,255,.30), rgba(255,255,255,.10)),
    rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 4px rgba(255,255,255,.665),
    inset 0 -4px 4px rgba(255,255,255,.85),
    inset 0 0 14px rgba(229,229,229,.55),
    0 11px 28px rgba(0,0,0,.07),
    0 23px 31px rgba(0,0,0,.05);
  backdrop-filter:blur(clamp(4px,.5em,14px));
  -webkit-backdrop-filter:blur(clamp(4px,.5em,14px));
}
.glass-btn-wrap--header .glass-btn span{
  font-size:13px; font-weight:400; letter-spacing:-0.14px; color:#363636;
  padding-inline:.65em; display:inline-flex; align-items:center; gap:5px;
}
.glass-btn-wrap--header .glass-btn span svg{ display:none; }
@media (min-width:1025px){
  .glass-btn-wrap--header{ width:200px; }
  .glass-btn-wrap--header .glass-btn{ width:200px; height:56px; }
  .glass-btn-wrap--header .glass-btn span{
    font-size:19px; letter-spacing:-0.19px; padding-inline:.7em; gap:7px;
  }
  .glass-btn-shadow{
    width:calc(100% + 1em); height:calc(100% + 1em);
    top:calc(0% - .5em); left:calc(0% - .5em);
    filter:blur(clamp(1px,.0625em,6px));
  }
  .glass-btn-shadow::after{
    background:linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.015));
    width:calc(100% - 1em - .125em); height:calc(100% - 1em - .125em);
    top:calc(1em - .25em); left:calc(1em - .4375em);
  }
}
/* icon variant — the footer's social buttons */
.glass-btn-wrap--icon{ width:32px; }
.glass-btn-wrap--icon .glass-btn{ width:32px; height:32px; }
.glass-btn-wrap--icon .glass-btn span{ padding-inline:0; }
.glass-btn-wrap--icon svg{ width:16px; height:16px; color:var(--grey-500); }

/* ── the campaign's own size ───────────────────────────────────────
   The header variant is a fixed 140px because the site's nav has one
   button in it. These are in-page links of varying length, so the wrap
   sizes to its content and the button fills it. */
.glass-btn-wrap--inline{ width:auto; display:inline-block }
.glass-btn-wrap--inline .glass-btn{
  width:auto; height:52px; padding-inline:4px;
}
.glass-btn-wrap--inline .glass-btn span{
  font-family:Selecta,'Helvetica Neue',sans-serif; font-weight:500;
  font-size:15px; letter-spacing:-.005em; color:var(--ink);
  padding-inline:22px; white-space:nowrap; gap:9px;
}
.glass-btn-wrap--inline .glass-btn span svg{ width:15px; height:15px; flex:none; opacity:.5 }
.glass-btn-wrap--inline:hover .glass-btn span svg{ opacity:1 }
/* the quiet variant: same geometry, no glass — for the second link in a pair */
.wabi-link{
  display:inline-flex; align-items:center; gap:9px; height:52px; padding-inline:20px;
  border-radius:999vw; text-decoration:none; color:var(--ink-70);
  font-family:Selecta,'Helvetica Neue',sans-serif; font-weight:400; font-size:15px;
  transition:background .2s var(--ease-wabi), color .2s var(--ease-wabi);
}
.wabi-link svg{ width:15px; height:15px; flex:none; opacity:.45 }
.wabi-link:hover{ background:var(--ink-07, rgba(25,25,25,.07)); color:var(--ink) }
.wabi-link:hover svg{ opacity:.9 }