/* buttons.css — 10 premium knapp-stilar, live-switchbara (html[data-btn]).
   Gäller alla primära CTA-knappar (.btn/.nav-cta/.cta) som taggas .bx av btnlab.js. */
.bx{position:relative;transition:transform .25s cubic-bezier(.2,.9,.2,1),box-shadow .25s,background .3s,color .25s,border-color .25s}
.bx:hover{will-change:transform}

/* 02 glow — andas */
html[data-btn="glow"] .bx{animation:bxglow 2.4s ease-in-out infinite}
@keyframes bxglow{0%,100%{box-shadow:0 0 0 rgba(79,227,212,0)}50%{box-shadow:0 0 28px rgba(79,227,212,.55)}}

/* 03 sheen — ljusstråk sveper */
html[data-btn="sheen"] .bx{overflow:hidden}
html[data-btn="sheen"] .bx::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .55s cubic-bezier(.4,0,.2,1)}
html[data-btn="sheen"] .bx:hover::after{left:135%}

/* 04 reticle — hörn-ring snäpper in */
html[data-btn="ring"] .bx::before{content:"";position:absolute;inset:-7px;border:1px solid var(--teal);border-radius:inherit;
  opacity:0;transform:scale(1.09);transition:opacity .3s,transform .3s;pointer-events:none}
html[data-btn="ring"] .bx:hover::before{opacity:.9;transform:scale(1)}

/* 05 gradient — animerad teal→grön */
html[data-btn="gradient"] .bx{background:linear-gradient(90deg,#4fe3d4,#39c9a6,#4fe3d4,#39c9a6);background-size:300% 100%;animation:bxgrad 5s linear infinite;color:var(--duk)}
@keyframes bxgrad{to{background-position:300% 0}}

/* 06 outline — spöke som fylls */
html[data-btn="outline"] .bx{background:transparent;border:1px solid var(--teal);color:var(--teal)}
html[data-btn="outline"] .bx:hover{background:var(--teal);color:var(--duk)}

/* 07 sweep — fyllning sveper in */
html[data-btn="sweep"] .bx{overflow:hidden}
html[data-btn="sweep"] .bx::before{content:"";position:absolute;inset:0;background:rgba(4,17,15,.22);transform:translateX(-101%);transition:transform .38s cubic-bezier(.5,0,.2,1);pointer-events:none}
html[data-btn="sweep"] .bx:hover::before{transform:translateX(0)}

/* 08 magnet · 10 tilt-3D — JS driver transform, CSS ger lyft */
html[data-btn="magnetic"] .bx:hover,html[data-btn="tilt"] .bx:hover{box-shadow:0 10px 28px rgba(79,227,212,.32)}
html[data-btn="tilt"] .bx{transform-style:preserve-3d}

/* 09 scramble — JS byter texten, CSS ger mono-glow */
html[data-btn="scramble"] .bx:hover{box-shadow:0 0 20px rgba(79,227,212,.4)}

/* ── väljare "KNAPP" ── */
.btnlab{position:fixed;left:50%;bottom:clamp(.7rem,2vw,1.2rem);transform:translateX(-50%);z-index:1300;font-family:"SF Mono",ui-monospace,monospace;text-align:center}
.btnlab-t{background:rgba(6,12,14,.85);backdrop-filter:blur(12px);border:1px solid rgba(79,227,212,.28);color:var(--teal);
  font:700 10px/1 "SF Mono",monospace;letter-spacing:.22em;padding:.75em 1.2em;border-radius:99px;cursor:pointer}
.btnlab-b{display:none;flex-wrap:wrap;gap:5px;justify-content:center;max-width:min(92vw,560px);margin:8px auto 0;
  background:rgba(6,12,14,.88);backdrop-filter:blur(14px);border:1px solid rgba(79,227,212,.2);border-radius:12px;padding:9px;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.btnlab.open .btnlab-b{display:flex}
.btnlab-c{border:1px solid rgba(232,244,242,.16);background:none;color:#8fb0ac;font:600 10px/1 "SF Mono",monospace;letter-spacing:.03em;padding:.55em .75em;border-radius:7px;cursor:pointer;transition:.16s}
.btnlab-c:hover{border-color:rgba(79,227,212,.5);color:#e8f4f2}
.btnlab-c.on{background:var(--teal);border-color:var(--teal);color:#04110f;font-weight:700}