/* ============================================================================
VARIANTER — uppmätta knappar och hovrar från riktiga sajter
----------------------------------------------------------------------------
Varje klass här är ETT uppmätt värde från EN sajt, inte en tolkning. Källan
och mätdatumet står över varje block. Rådata i matningar/.
HUSETS ANATOMI ÄR SPOONS och ligger i tokens.css — den behöver ingen klass
här. Filen är en REFERENSHYLLA, inte en meny att välja ur per projekt: får
varje bygge sin egen knappform finns ingen husstil, bara inkonsekvens. Det
var precis det som fick tidigare bygg att läsa som genererade.
Använd en variant när avsteget är MEDVETET och kan motiveras — en kundklon,
ett referensbygge. Då sägs det rakt ut, som ban-listan kräver.
Länkas EFTER tokens.css:
Kombineras fritt: Handling
Färgerna kommer ALLTID ur den valda identiteten. Det som varieras här är
FORMEN och RÖRELSEN — höjd, radie, vikt, grad, padding, spärr, och vad som
händer vid hover. Att också ärva källans färger vore att klona sajten.
========================================================================== */
/* ── Knappanatomier ──────────────────────────────────────────────────────── */
/* spoon.se är HUSETS anatomi sedan 2026-09-14 och ligger i tokens.css.
Ingen .kn--spoon behövs — den är vad .knapp redan är. */
/* klingit.com, uppmätt 2026-09-08. Kontur i stället för fyllning och 48 px
sidopadding — den bredaste i hela materialet. */
.kn--klingit { height: 44px; border-radius: 9999px; font-weight: 500;
font-size: 15.75px; padding: 0 48px;
background: transparent; color: var(--text);
box-shadow: inset 0 0 0 1px var(--text); }
/* schibsted.com, uppmätt 2026-09-08. 2 px kant i samma färg som fyllningen —
det är kanten som gör inverteringen möjlig. */
.kn--schibsted { height: 48px; border-radius: 36px; font-weight: 700;
font-size: 16px; padding: 0 16px;
box-shadow: inset 0 0 0 2px var(--accent); }
/* silver.se, uppmätt 2026-09-08. Överdimensionerad: 59 px hög med 21 px text.
Paddingen är asymmetrisk i källan (29,4 topp / 27,3 botten) eftersom
grotesker ligger högt i linjeboxen — här som flexcentrering plus 1 px lyft. */
.kn--silver { height: 59px; border-radius: 100px; font-weight: 500;
font-size: 21px; padding: 0 30px 1px; }
/* nine.se, uppmätt 2026-09-08. Nästan räta hörn och spärrad text —
motsatsen till pillerformen. */
.kn--nine { height: 44px; border-radius: 2px; font-weight: 600;
font-size: 13.12px; padding: 0 10px; letter-spacing: .656px; }
/* carla.se, uppmätt 2026-09-08. Mellanläget: mjuk radie, generös padding. */
.kn--carla { height: 52px; border-radius: 6px; font-weight: 500;
font-size: 16px; padding: 0 28px; }
/* noaignite.com, uppmätt 2026-09-08. Liten, lätt och versal — vikt 400.
Det är den som ger det editoriella intrycket. */
.kn--noa { height: 39px; border-radius: 4px; font-weight: 400;
font-size: 16px; padding: 0 16px; text-transform: uppercase; }
/* otw.se, uppmätt 2026-09-08. */
.kn--otw { height: 45px; border-radius: 30px; font-weight: 500;
font-size: 16px; padding: 0 22px; }
/* treyd.io, uppmätt 2026-09-08. Lättaste vikten i urvalet. */
.kn--treyd { height: 44px; border-radius: 8px; font-weight: 400;
font-size: 14px; padding: 0 16px; }
/* nordddb.com, uppmätt 2026-09-08. Jättelik lätt kontur-pill: 30 px text
i vikt 400 med 2 px kant. Den mest ovanliga i hela materialet. */
.kn--nord { height: 51px; border-radius: 80px; font-weight: 400;
font-size: 30px; padding: 0 19px;
background: transparent; color: var(--text);
box-shadow: inset 0 0 0 2px var(--text); }
/* ── Hovermekanik ────────────────────────────────────────────────────────────
Kombineras med vilken anatomi som helst. Ingen av dem är påhittad. */
/* spaceship.com, uppmätt 2026-08-30. State-layer som SNÄPPER — ingen fade.
8-12 % ljus eller mörk gradient ovanpå. Detta är husets standard. */
.hov--snapp { transition: none; position: relative; }
.hov--snapp::before { content: ""; position: absolute; inset: 0;
border-radius: inherit; background: var(--dampad); opacity: 0; }
.hov--snapp:hover::before { opacity: 1; }
/* denoutdoors.com, uppmätt 2026-08-31. Bakgrundsbyte på 0,15 s. */
.hov--byte { transition: background-color .15s var(--kurva-standard); }
.hov--byte:hover { background: var(--yta-djup); color: var(--pa-djup); }
/* denoutdoors.com, uppmätt 2026-08-31. Byte + lyft 2 px. Inget rör sig mer. */
.hov--lyft { transition: background-color .15s var(--kurva-standard),
transform .2s var(--kurva-standard); }
.hov--lyft:hover { transform: translateY(-2px); }
/* schibsted.com, tidssamplad 2026-09-08 över 222 ms: fyllning, text OCH kant
byter plats samtidigt. Mötespunkten ligger vid ~105 ms. */
.hov--invert { transition: background-color var(--tid-normal) var(--kurva-standard),
color var(--tid-normal) var(--kurva-standard),
box-shadow var(--tid-normal) var(--kurva-standard); }
.hov--invert:hover { background: var(--pa-accent); color: var(--accent);
box-shadow: inset 0 0 0 2px var(--accent); }
/* silver.se, tidssamplad 2026-09-08: 44 bildrutor. Fyllningen står HELT still;
bara kanten vandrar, på 0,4 s med expo-kurvan. Den mest återhållna. */
.hov--kant { box-shadow: inset 0 0 0 1px var(--accent);
transition: box-shadow var(--tid-lugn) var(--kurva-expo); }
.hov--kant:hover { box-shadow: inset 0 0 0 1px var(--text); }
/* carla.se, tidssamplad 2026-09-08. TVÅ hastigheter i samma hover: färgen på
0,12 s, transformen på 0,05 s. Att transformen är dubbelt så snabb är det
som gör den knäpp i stället för mjuk. */
.hov--dubbel { transition: background-color .12s ease-in-out,
box-shadow .12s ease-in-out,
transform .05s ease-in-out; }
.hov--dubbel:hover { transform: translateY(-1px);
box-shadow: inset 0 0 0 1px var(--text); }
/* klingit.com, uppmätt 2026-09-08: transition på `top`, 0,2 s ease-out.
Positionsbaserat lyft, inte transform — därav den egna karaktären. */
.hov--top { position: relative; top: 0; transition: top .2s ease-out; }
.hov--top:hover { top: -3px; }
/* ── Bildhover ───────────────────────────────────────────────────────────────
spoon.se, uppmätt 2026-09-08 på tre kort med identiskt beteende:
border-radius: 6px -> 40px, 0.3s
Inget annat. Ingen förflyttning, ingen zoom, ingen fade, ingen skugga.
Den enda effekten i hela materialet som bara ändrar hörnen. */
.bild--radie { border-radius: 6px; overflow: hidden; display: block;
transition: border-radius .3s var(--kurva-standard); }
.bild--radie:hover, a:hover > .bild--radie { border-radius: 40px; }
/* denoutdoors.com, uppmätt 2026-08-31: bildzoom 1.04 på 0,4 s (deras lyft på 4 px är bortvalt, REGLER 9). */
.bild--zoom { overflow: hidden; display: block; }
/* will-change: utan den ritar webbläsaren om bilden i slutskala när zoomen är klar,
och den rycker till skarpare (uppmätt 2026-10-09: skärpa 17,0 -> 22,6 i ett ryck;
med will-change står den still). Samis klagomål 2026-07-04 och 2026-09-07. */
.bild--zoom > img { display: block; width: 100%; height: auto; will-change: transform;
transition: transform var(--tid-lugn) var(--kurva-standard); }
.bild--zoom:hover > img, a:hover > .bild--zoom > img { transform: scale(1.04); }
/* ── Länkanimation ───────────────────────────────────────────────────────────
Understrykningen måste spänna TEXTEN, inte behållaren — ett ::after på
width:100% av en blocklänk ger full container (ban-listan). */
.lnk { position: relative; text-decoration: none; color: inherit;
display: inline; background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat; background-position: 0 100%;
background-size: 0% 1px;
transition: background-size var(--tid-normal) var(--kurva-standard); }
.lnk:hover { background-size: 100% 1px; }
/* Samma, men utifrån mitten. */
.lnk--mitt { background-position: 50% 100%; }
/* Redan understruken, som viker undan och kommer tillbaka (vanlig i editorial). */
.lnk--vik { background-size: 100% 1px; background-position: 100% 100%; }
.lnk--vik:hover { background-size: 0% 1px; }