.jwa{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:7200;display:flex;align-items:center;gap:12px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.jwa__label{white-space:nowrap;font-size:13px;letter-spacing:.08em;padding:9px 16px;border-radius:30px;opacity:0;transform:translateX(12px);pointer-events:none;transition:opacity .35s,transform .35s}
.jwa:hover .jwa__label,.jwa:focus-visible .jwa__label{opacity:1;transform:none}
@media (hover:none){.jwa__label{display:none}}

/* ---------- Essential: loupe, a lens that pulls focus ---------- */
.jwa--loupe .jwa__label{background:#fbf8f0;color:#4a0709;border:1px solid rgba(180,138,74,.5);font-family:"Jost",sans-serif}
.jwa__lens{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;overflow:hidden;color:#b48a4a;
  background:radial-gradient(circle at 32% 26%,#ffffff 0,#faf5ea 42%,#e8dcc3 100%);
  box-shadow:0 0 0 1.5px #b48a4a,0 0 0 5px rgba(251,248,240,.9),0 0 0 6px rgba(180,138,74,.5),0 12px 26px rgba(60,30,10,.22);
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.jwa--loupe:hover .jwa__lens{transform:scale(1.06)}
.jwa__ticks{position:absolute;inset:3px;width:auto;height:auto;animation:jwaTurn 70s linear infinite}
.jwa__lens .jwa__glyph{position:relative;width:29px;height:29px;color:#5a0a0e;animation:jwaFocus 9s ease-in-out infinite}
.jwa__lens .jwa__glyph svg{width:100%;height:100%}
.jwa--loupe:hover .jwa__glyph{animation:none;filter:none;opacity:1}
.jwa__glint{position:absolute;top:-10%;bottom:-10%;width:34%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-18deg);animation:jwaGlint 9s ease-in-out infinite}
@keyframes jwaTurn{to{transform:rotate(360deg)}}
@keyframes jwaFocus{
  0%,6%{filter:blur(6px);opacity:.3;transform:scale(1.22)}
  24%{filter:blur(0);opacity:1;transform:scale(1)}
  68%{filter:blur(0);opacity:1;transform:scale(1)}
  86%,100%{filter:blur(6px);opacity:.3;transform:scale(1.22)}
}
@keyframes jwaGlint{0%,18%{left:-50%}34%,100%{left:130%}}

/* ---------- Premium: a cut gem whose facets light up in turn ---------- */
.jwa--facet .jwa__label{background:#101213;color:#e8cf9f;border:1px solid rgba(216,185,138,.5);font-family:"Manrope",sans-serif}
.jwa__gem{position:relative;width:72px;height:72px;display:grid;place-items:center;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.jwa--facet:hover .jwa__gem{transform:rotate(15deg) scale(1.05)}
.jwa__gem svg:first-child{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jwa__g{fill:#14110d;stroke:#d8b98a;stroke-width:1.4}
.jwa__f{fill:#f0d6a0;fill-opacity:0;animation:jwaFacet 5s ease-in-out infinite;animation-delay:calc(var(--k) * .15s)}
.jwa__l{fill:none;stroke:#d8b98a;stroke-width:.8;stroke-opacity:.7}
.jwa__t{fill:#0d0b09;stroke:#d8b98a;stroke-width:1.1}
.jwa__gem .jwa__glyph{position:relative;width:27px;height:27px;color:#ecd29b}
.jwa__gem .jwa__glyph svg{width:100%;height:100%}
.jwa--facet:hover .jwa__f{animation-duration:1.6s;animation-delay:calc(var(--k) * .03s)}
@keyframes jwaFacet{0%{fill-opacity:0}6%{fill-opacity:.85}22%{fill-opacity:0}100%{fill-opacity:0}}

/* ---------- Signature: a wax seal that is stamped, then catches the light ---------- */
.jwa--seal .jwa__label{background:#2b0507;color:#ecd0a0;border:1px solid rgba(229,190,128,.55);font-family:"Hanken Grotesk",sans-serif}
.jwa__wax{display:block;width:78px;height:78px;filter:drop-shadow(0 9px 14px rgba(0,0,0,.5));animation:jwaStamp 1.25s cubic-bezier(.2,.9,.25,1) .5s both,jwaPress 8s ease-in-out 2.4s infinite;transition:transform .3s}
.jwa__wax>svg{width:100%;height:100%;overflow:visible}
.jwa--seal:hover .jwa__wax{transform:rotate(-6deg) scale(1.05)}
.jwa--seal:active .jwa__wax{transform:scale(.94)}
.jwa__sheen{animation:jwaSheen 8s ease-in-out 2.4s infinite;transform-box:fill-box}
@keyframes jwaStamp{
  0%{opacity:0;transform:translateY(-30px) scale(1.55) rotate(-14deg);filter:drop-shadow(0 40px 20px rgba(0,0,0,.35))}
  55%{opacity:1;transform:translateY(0) scale(.92) rotate(2deg)}
  75%{transform:scale(1.03)}
  100%{opacity:1;transform:none}
}
@keyframes jwaPress{0%,72%,100%{transform:scale(1)}76%{transform:scale(.955)}82%{transform:scale(1.01)}}
@keyframes jwaSheen{0%,76%{transform:translateX(0)}98%,100%{transform:translateX(190px)}}

@media (max-width:640px){
  .jwa__lens{width:58px;height:58px}.jwa__gem{width:66px;height:66px}.jwa__wax{width:70px;height:70px}
}