/*
 * Demo demo30 "UI kit" — 50 button families (.b--<family>), four numbered variants each on the page.
 * Every family reads the same custom properties, so the editor can change any button:
 *   --c1 --c2 --c3   three colours (gradient stops / accent / ground)   --fg  text colour
 *   --r radius  --px --py padding  --fs font size  --fw weight  --ff family  --sp speed (s)  --bw border
 * Markup: <button class="b b--glow" data-alt="…"><span class="b__t">Label</span><span class="b__i">→</span></button>
 */
@property --b-x { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --b-y { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --b-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --b-ca { syntax: "<color>"; inherits: false; initial-value: #53f57e; }
@property --b-cb { syntax: "<color>"; inherits: false; initial-value: #18171a; }
@property --b-k { syntax: "<number>"; inherits: false; initial-value: 0; }

.b {
    --c1: #53f57e; --c2: #469a58; --c3: #18171a; --fg: #ffffff;
    --r: 999px; --px: 26px; --py: 13px; --fs: 15px; --fw: 600; --sp: 4s; --bw: 1px;
    --ff: "Poppins", "Lato", system-ui, sans-serif;
    position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    max-width: 100%; padding: var(--py) var(--px); border: 0; border-radius: var(--r); background: none;
    color: var(--fg); font: var(--fw) var(--fs)/1.15 var(--ff); letter-spacing: .01em; white-space: nowrap; text-decoration: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, background-color .35s, color .35s, filter .35s;
}
.b:focus-visible { outline: 2px solid var(--c1); outline-offset: 4px; }
.b__t, .b__i { position: relative; z-index: 2; display: inline-block; }
.b__i:empty { display: none; }
.b:active { transform: scale(.97); }

/* ═══ 1. FLOW & GRADIENT ═══════════════════════════════════════════════ */

/* glow — the DEPO background in a button: a soft spot of light drifts over the dark ground */
.b--glow {
    background: radial-gradient(120% 220% at var(--b-x) var(--b-y), color-mix(in srgb, var(--c1) 34%, transparent), transparent 62%), var(--c3);
    box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 22%, transparent);
    animation: b-glow-drift calc(var(--sp) * 2) ease-in-out infinite alternate;
}
.b--glow:hover { box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 50%, transparent), 0 10px 40px -12px color-mix(in srgb, var(--c1) 60%, transparent); }
@keyframes b-glow-drift { 0% { --b-x: 8%; --b-y: 30%; } 50% { --b-x: 60%; --b-y: 80%; } 100% { --b-x: 95%; --b-y: 40%; } }

/* drift — two spots of two colours wander inside and mix softly */
.b--drift {
    background:
        radial-gradient(90% 180% at var(--b-x) 20%, color-mix(in srgb, var(--c1) 55%, transparent), transparent 60%),
        radial-gradient(90% 180% at calc(100% - var(--b-x)) 90%, color-mix(in srgb, var(--c2) 60%, transparent), transparent 60%),
        var(--c3);
    animation: b-drift var(--sp) ease-in-out infinite alternate;
}
.b--drift:hover { filter: saturate(1.3) brightness(1.1); }
@keyframes b-drift { from { --b-x: 0%; } to { --b-x: 100%; } }

/* flow — a long multi-stop gradient slides through the button, the colour flows */
.b--flow {
    background: linear-gradient(100deg, var(--c1), var(--c2), var(--c3), var(--c2), var(--c1)) 0 0 / 300% 100%;
    animation: b-flow var(--sp) linear infinite;
    box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--c1) 70%, transparent);
}
.b--flow:hover { animation-duration: calc(var(--sp) / 3); }
@keyframes b-flow { to { background-position: 150% 0; } }

/* wave — still until hover, then the gradient pours smoothly to the other side */
.b--wave {
    background: linear-gradient(90deg, var(--c3) 0%, var(--c2) 45%, var(--c1) 100%) 0 0 / 220% 100%;
    box-shadow: inset 0 0 0 var(--bw) rgb(255 255 255 / .1);
    transition: background-position calc(var(--sp) / 4) cubic-bezier(.4, 0, .2, 1), transform .35s, box-shadow .35s;
}
.b--wave:hover { background-position: 100% 0; box-shadow: 0 10px 30px -12px var(--c1); }

/* mesh — three soft blobs breathing in place, like a moving mesh gradient */
.b--mesh {
    background:
        radial-gradient(60% 120% at var(--b-x) 0%, var(--c1), transparent 70%),
        radial-gradient(60% 140% at 100% var(--b-y), var(--c2), transparent 70%),
        radial-gradient(70% 140% at 0% 100%, color-mix(in srgb, var(--c1) 40%, var(--c2)), transparent 70%),
        var(--c3);
    animation: b-mesh var(--sp) ease-in-out infinite alternate;
}
@keyframes b-mesh { 0% { --b-x: 10%; --b-y: 10%; } 100% { --b-x: 90%; --b-y: 90%; } }

/* conic — a rotating colour ring around a dark core */
.b--conic { background: var(--c3); }
.b--conic::before {
    content: ""; position: absolute; inset: 0; z-index: -1; padding: calc(var(--bw) + 1px); border-radius: inherit;
    background: conic-gradient(from var(--b-ang), var(--c1), var(--c2), transparent 40%, var(--c1));
    -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: b-spin var(--sp) linear infinite;
}
.b--conic:hover::before { animation-duration: calc(var(--sp) / 3); }
@keyframes b-spin { to { --b-ang: 360deg; } }

/* halo — a blurred spinning conic glow behind a dark button */
.b--halo { background: var(--c3); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.b--halo::before {
    content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; filter: blur(10px); opacity: .7;
    background: conic-gradient(from var(--b-ang), var(--c1), var(--c2), var(--c1), transparent, var(--c1));
    animation: b-spin var(--sp) linear infinite; transition: opacity .4s, inset .4s;
}
.b--halo::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--c3); }
.b--halo:hover::before { opacity: 1; inset: -6px; }

/* sheen — a band of light sweeps across, on hover and on its own now and then */
.b--sheen { background: linear-gradient(135deg, var(--c1), var(--c2)); overflow: hidden; color: var(--fg); }
.b--sheen::after {
    content: ""; position: absolute; inset: -20% auto -20% -60%; width: 40%; z-index: 1; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent);
    animation: b-sheen calc(var(--sp) * 1.2) ease-in-out infinite;
}
.b--sheen:hover::after { animation-duration: .9s; }
@keyframes b-sheen { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* morph — the whole fill melts from one colour to the next (animated @property colours) */
.b--morph {
    background: linear-gradient(120deg, var(--b-ca), var(--b-cb));
    animation: b-morph calc(var(--sp) * 1.5) ease-in-out infinite;
}
@keyframes b-morph {
    0%, 100% { --b-ca: var(--c1); --b-cb: var(--c2); }
    33% { --b-ca: var(--c2); --b-cb: var(--c3); }
    66% { --b-ca: var(--c3); --b-cb: var(--c1); }
}

/* spot — a spotlight follows the pointer (js sets --mx / --my) */
.b--spot {
    --mx: 50%; --my: 50%;
    background: radial-gradient(140px circle at var(--mx) var(--my), color-mix(in srgb, var(--c1) 45%, transparent), transparent 70%), var(--c3);
    box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 25%, transparent);
}
.b--spot::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: var(--bw);
    background: radial-gradient(90px circle at var(--mx) var(--my), var(--c1), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0; transition: opacity .3s;
}
.b--spot:hover::before { opacity: 1; }

/* gborder — transparent body, flowing gradient border, fills on hover */
.b--gborder { background: transparent; color: var(--fg); }
.b--gborder::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: calc(var(--bw) + 1px);
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c1)) 0 0 / 200% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: b-flow var(--sp) linear infinite;
}
.b--gborder::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: linear-gradient(90deg, var(--c1), var(--c2)); opacity: 0; transition: opacity .4s; }
.b--gborder:hover::after { opacity: 1; }
.b--gborder:hover { color: var(--c3); }

/* gtext — the label itself is a flowing gradient */
.b--gtext { background: var(--c3); box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 30%, transparent); }
.b--gtext .b__t, .b--gtext .b__i {
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--fg), var(--c1)) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: b-flow var(--sp) linear infinite;
}
.b--gtext:hover { box-shadow: inset 0 0 0 var(--bw) var(--c1), 0 0 24px -6px var(--c1); }

/* ═══ 2. GLASS & SOFT ══════════════════════════════════════════════════ */

.b--glass {
    background: linear-gradient(135deg, rgb(255 255 255 / .16), rgb(255 255 255 / .04)), color-mix(in srgb, var(--c1) 12%, transparent);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 0 0 var(--bw) rgb(255 255 255 / .18), 0 10px 30px -12px rgb(0 0 0 / .6);
    backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.b--glass:hover { background-color: color-mix(in srgb, var(--c1) 26%, transparent); transform: translateY(-2px); }

.b--frost {
    background: rgb(255 255 255 / .72); color: var(--c3);
    box-shadow: inset 0 0 0 var(--bw) rgb(255 255 255 / .9), 0 8px 24px -10px color-mix(in srgb, var(--c2) 70%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.b--frost:hover { background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 30%, transparent), 0 14px 30px -10px var(--c2); }

.b--neu {
    background: var(--c3); color: var(--fg);
    box-shadow: 6px 6px 14px color-mix(in srgb, var(--c3) 50%, #000), -6px -6px 14px color-mix(in srgb, var(--c3) 86%, #fff);
}
.b--neu:hover { color: var(--c1); }
.b--neu:active { transform: none; box-shadow: inset 5px 5px 10px color-mix(in srgb, var(--c3) 50%, #000), inset -5px -5px 10px color-mix(in srgb, var(--c3) 86%, #fff); }

.b--neuin {
    background: var(--c3); color: var(--c1);
    box-shadow: inset 4px 4px 9px color-mix(in srgb, var(--c3) 45%, #000), inset -4px -4px 9px color-mix(in srgb, var(--c3) 85%, #fff);
}
.b--neuin:hover { box-shadow: inset 2px 2px 4px color-mix(in srgb, var(--c3) 45%, #000), inset -2px -2px 4px color-mix(in srgb, var(--c3) 85%, #fff), 0 0 18px -6px var(--c1); }

.b--clay {
    background: var(--c1); color: var(--fg);
    box-shadow: inset -6px -8px 12px color-mix(in srgb, var(--c1) 60%, #000), inset 6px 8px 12px color-mix(in srgb, var(--c1) 60%, #fff), 0 12px 24px -10px color-mix(in srgb, var(--c1) 80%, #000);
}
.b--clay:hover { transform: translateY(-3px) scale(1.02); }

.b--lift { background: var(--c1); color: var(--fg); box-shadow: 0 2px 4px rgb(0 0 0 / .2); }
.b--lift:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -12px color-mix(in srgb, var(--c1) 85%, #000), 0 4px 10px rgb(0 0 0 / .2); }

.b--ghost { background: transparent; color: var(--c1); box-shadow: inset 0 0 0 var(--bw) var(--c1); }
.b--ghost:hover { background: var(--c1); color: var(--c3); }

.b--duo { flex-direction: column; gap: 2px; padding-block: calc(var(--py) * .7); background: linear-gradient(160deg, var(--c1), var(--c2)); color: var(--fg); line-height: 1.1; }
.b--duo::after { content: attr(data-alt); position: relative; z-index: 2; font: 400 calc(var(--fs) * .72)/1.1 "Lato", sans-serif; opacity: .78; }
.b--duo .b__i { display: none; }
.b--duo:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* ═══ 3. NEON & LIGHT ══════════════════════════════════════════════════ */

.b--neon {
    background: transparent; color: var(--c1); text-shadow: 0 0 8px var(--c1);
    box-shadow: inset 0 0 0 var(--bw) var(--c1), inset 0 0 12px color-mix(in srgb, var(--c1) 40%, transparent), 0 0 14px color-mix(in srgb, var(--c1) 50%, transparent);
}
.b--neon:hover { background: var(--c1); color: var(--c3); text-shadow: none; box-shadow: 0 0 10px var(--c1), 0 0 40px var(--c1), 0 0 80px color-mix(in srgb, var(--c1) 50%, transparent); }

.b--flicker { background: transparent; color: var(--c1); box-shadow: inset 0 0 0 var(--bw) var(--c1), 0 0 16px color-mix(in srgb, var(--c1) 50%, transparent); text-shadow: 0 0 10px var(--c1); animation: b-flicker calc(var(--sp) * 1.25) linear infinite; }
@keyframes b-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .35; text-shadow: none; box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 40%, transparent); } }

.b--ripple { background: var(--c1); color: var(--c3); }
.b--ripple::before, .b--ripple::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 0 0 0 var(--c1); animation: b-ring calc(var(--sp) / 2) ease-out infinite; }
.b--ripple::after { animation-delay: calc(var(--sp) / 4); }
@keyframes b-ring { to { box-shadow: 0 0 0 16px transparent; } }

.b--cyber {
    --cut: 12px; background: var(--c1); color: var(--c3); border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-family: var(--mono, monospace);
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.b--cyber::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(transparent 45%, rgb(255 255 255 / .5) 50%, transparent 55%) 0 0 / 100% 300%; animation: b-scan calc(var(--sp) / 2) linear infinite; mix-blend-mode: overlay; }
.b--cyber:hover { background: var(--c2); }
@keyframes b-scan { from { background-position: 0 100%; } to { background-position: 0 -200%; } }

.b--laser { background: var(--c3); color: var(--fg); border-radius: min(var(--r), 10px); overflow: hidden; }
.b--laser::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: linear-gradient(90deg, transparent, var(--c1), transparent); animation: b-laser calc(var(--sp) / 2) linear infinite; }
.b--laser::before { content: ""; position: absolute; right: 0; top: 0; height: 2px; width: 40%; background: linear-gradient(90deg, transparent, var(--c2), transparent); animation: b-laser calc(var(--sp) / 2) linear infinite reverse; }
@keyframes b-laser { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

.b--beam { background: var(--c3); color: var(--fg); overflow: hidden; }
.b--beam::before {
    content: ""; position: absolute; inset: -150%; z-index: -2;
    background: conic-gradient(from var(--b-ang), transparent 0 75%, var(--c1) 88%, var(--c2) 95%, transparent 100%);
    animation: b-spin calc(var(--sp) / 2) linear infinite;
}
.b--beam::after { content: ""; position: absolute; inset: calc(var(--bw) + 1px); z-index: -1; border-radius: inherit; background: var(--c3); }

.b--aura { background: var(--c1); color: var(--c3); animation: b-aura var(--sp) ease-in-out infinite; }
@keyframes b-aura { 0%, 100% { box-shadow: 0 0 20px -4px var(--c1), 0 0 0 0 transparent; } 50% { box-shadow: 0 0 50px 4px var(--c2), 0 0 90px 10px color-mix(in srgb, var(--c1) 30%, transparent); } }

/* ═══ 4. DEPTH & 3D ════════════════════════════════════════════════════ */

.b--press { background: var(--c1); color: var(--c3); box-shadow: 0 6px 0 color-mix(in srgb, var(--c1) 55%, #000), 0 10px 18px -4px rgb(0 0 0 / .5); transform: translateY(-3px); }
.b--press:hover { transform: translateY(-5px); box-shadow: 0 8px 0 color-mix(in srgb, var(--c1) 55%, #000), 0 14px 22px -4px rgb(0 0 0 / .5); }
.b--press:active { transform: translateY(3px); box-shadow: 0 0 0 color-mix(in srgb, var(--c1) 55%, #000), 0 2px 6px rgb(0 0 0 / .4); }

.b--layer { padding: 0; background: color-mix(in srgb, var(--c1) 45%, #000); border-radius: var(--r); }
.b--layer .b__t { padding: var(--py) var(--px); border-radius: inherit; background: var(--c1); color: var(--c3); transform: translateY(-6px); transition: transform .45s cubic-bezier(.3, .7, .4, 1.5); }
.b--layer .b__i { display: none; }
.b--layer:hover .b__t { transform: translateY(-9px); }
.b--layer:active { transform: none; }
.b--layer:active .b__t { transform: translateY(-2px); transition-duration: .05s; }

.b--flip { perspective: 600px; background: transparent; padding: 0; overflow: visible; }
.b--flip .b__t, .b--flip::after {
    display: block; padding: var(--py) var(--px); border-radius: var(--r); backface-visibility: hidden;
    transition: transform .6s cubic-bezier(.3, .7, .3, 1.2);
}
.b--flip .b__t { background: var(--c3); color: var(--fg); box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 40%, transparent); }
.b--flip::after { content: attr(data-alt); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: var(--c1); color: var(--c3); transform: rotateX(-180deg); }
.b--flip .b__i { display: none; }
.b--flip:hover .b__t { transform: rotateX(180deg); }
.b--flip:hover::after { transform: rotateX(0); }

.b--tilt { --rx: 0deg; --ry: 0deg; background: linear-gradient(135deg, var(--c1), var(--c2)); color: var(--c3); transform: perspective(500px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .15s, box-shadow .3s; box-shadow: 0 14px 30px -14px var(--c2); }
.b--tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .45), transparent 60%); opacity: 0; transition: opacity .3s; }
.b--tilt:hover::after { opacity: 1; }

.b--retro { background: var(--c1); color: var(--c3); border-radius: min(var(--r), 8px); box-shadow: inset 0 0 0 2px var(--c3), 5px 5px 0 var(--c2); }
.b--retro:hover { transform: translate(-2px, -2px); box-shadow: inset 0 0 0 2px var(--c3), 7px 7px 0 var(--c2); }
.b--retro:active { transform: translate(5px, 5px); box-shadow: inset 0 0 0 2px var(--c3), 0 0 0 var(--c2); }

.b--extrude { background: var(--c1); color: var(--c3); border-radius: min(var(--r), 10px);
    box-shadow: 1px 1px 0 var(--c2), 2px 2px 0 var(--c2), 3px 3px 0 var(--c2), 4px 4px 0 var(--c2), 5px 5px 0 var(--c2), 6px 6px 0 var(--c2), 7px 7px 0 var(--c2), 8px 8px 0 var(--c2); }
.b--extrude:hover { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--c2), 2px 2px 0 var(--c2), 3px 3px 0 var(--c2), 4px 4px 0 var(--c2); }

/* ═══ 5. FILL & MOTION ═════════════════════════════════════════════════ */

.b--slide { background: transparent; color: var(--c1); box-shadow: inset 0 0 0 var(--bw) var(--c1); overflow: hidden; }
.b--slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--c1), var(--c2)); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.b--slide:hover { color: var(--c3); }
.b--slide:hover::before { transform: scaleX(1); transform-origin: left; }

.b--circle { --mx: 50%; --my: 50%; background: var(--c3); color: var(--fg); box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 50%, transparent); overflow: hidden; }
.b--circle::before { content: ""; position: absolute; left: var(--mx); top: var(--my); z-index: -1; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--c1); transform: scale(0); transition: transform .6s cubic-bezier(.3, .6, .2, 1); }
.b--circle:hover { color: var(--c3); }
.b--circle:hover::before { transform: scale(40); }

.b--swipe { background: var(--c3); color: var(--fg); overflow: hidden; box-shadow: inset 0 0 0 var(--bw) var(--c2); }
.b--swipe::before { content: ""; position: absolute; top: 0; bottom: 0; left: -20%; width: 0; z-index: -1; background: var(--c1); transform: skewX(-25deg); transition: width .55s cubic-bezier(.7, 0, .2, 1); }
.b--swipe:hover { color: var(--c3); }
.b--swipe:hover::before { width: 140%; }

.b--curtain { background: var(--c3); color: var(--c1); overflow: hidden; box-shadow: inset 0 0 0 var(--bw) var(--c1); }
.b--curtain::before, .b--curtain::after { content: ""; position: absolute; top: 0; bottom: 0; width: 51%; z-index: -1; background: var(--c1); transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.b--curtain::before { left: 0; transform: translateX(-100%); }
.b--curtain::after { right: 0; transform: translateX(100%); }
.b--curtain:hover { color: var(--c3); }
.b--curtain:hover::before, .b--curtain:hover::after { transform: none; }

.b--under { background: transparent; color: var(--fg); padding-inline: 4px; border-radius: 0; }
.b--under::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: calc(var(--py) - 6px); height: max(2px, var(--bw)); background: linear-gradient(90deg, var(--c1), var(--c2)); transform: scaleX(.25); transform-origin: left; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.b--under:hover::after { transform: scaleX(1); }
.b--under:hover .b__i { transform: translateX(4px); }
.b--under .b__i { transition: transform .4s; color: var(--c1); }

.b--brackets { background: transparent; color: var(--fg); border-radius: 0; }
.b--brackets::before, .b--brackets::after { content: ""; position: absolute; width: 12px; height: 12px; border: max(2px, var(--bw)) solid var(--c1); transition: all .45s cubic-bezier(.7, 0, .2, 1); }
.b--brackets::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.b--brackets::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.b--brackets:hover::before, .b--brackets:hover::after { width: 100%; height: 100%; }
.b--brackets:hover { color: var(--c1); }

.b--draw { background: transparent; color: var(--fg); border-radius: 0;
    background-image: linear-gradient(var(--c1), var(--c1)), linear-gradient(var(--c1), var(--c1)), linear-gradient(var(--c1), var(--c1)), linear-gradient(var(--c1), var(--c1));
    background-repeat: no-repeat; background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-size: 0 2px, 2px 0, 0 2px, 2px 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
    transition: background-size .3s linear, color .3s; }
.b--draw:hover { color: var(--c1); animation: b-draw .8s linear forwards; }
@keyframes b-draw {
    0% { background-size: 0 2px, 2px 0, 0 2px, 2px 0; }
    25% { background-size: 100% 2px, 2px 0, 0 2px, 2px 0; }
    50% { background-size: 100% 2px, 2px 100%, 0 2px, 2px 0; }
    75% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 0; }
    100% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
}

.b--roll { background: var(--c1); color: var(--c3); overflow: hidden; }
.b--roll .b__t { transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.b--roll::after { content: attr(data-alt); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; transform: translateY(100%); transition: transform .45s cubic-bezier(.7, 0, .2, 1); background: var(--c2); color: var(--fg); }
.b--roll .b__i { display: none; }
.b--roll:hover .b__t { transform: translateY(-160%); }
.b--roll:hover::after { transform: none; }

.b--arrow { background: var(--c1); color: var(--c3); padding-right: calc(var(--px) + 6px); }
.b--arrow .b__i { width: 0; opacity: 0; transform: translateX(-10px); transition: width .4s, opacity .4s, transform .4s cubic-bezier(.3, .7, .3, 1.5); overflow: hidden; }
.b--arrow:hover .b__i { width: 1em; opacity: 1; transform: none; }
.b--arrow:hover { padding-right: var(--px); }

/* ═══ 6. SHAPE & FUN ═══════════════════════════════════════════════════ */

.b--blob { background: linear-gradient(135deg, var(--c1), var(--c2)); color: var(--c3); border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; animation: b-blob var(--sp) ease-in-out infinite; padding: calc(var(--py) * 1.3) calc(var(--px) * 1.1); }
@keyframes b-blob {
    0%, 100% { border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; }
    33% { border-radius: 60% 40% 45% 55% / 40% 60% 45% 60%; }
    66% { border-radius: 50% 50% 35% 65% / 60% 40% 55% 45%; }
}

.b--iconround { padding: 0; height: calc(var(--fs) * 3); background: var(--c1); color: var(--c3); border-radius: 999px; overflow: hidden; }
.b--iconround .b__i { order: -1; width: calc(var(--fs) * 3); flex: none; display: grid; place-items: center; font-size: calc(var(--fs) * 1.3); }
.b--iconround .b__t { max-width: 0; opacity: 0; transition: max-width .5s cubic-bezier(.7, 0, .2, 1), opacity .4s, padding .5s; }
.b--iconround:hover .b__t { max-width: 14em; opacity: 1; padding-right: var(--px); }
.b--iconround { gap: 0; }

.b--split { padding: 0; gap: 0; background: var(--c3); color: var(--fg); overflow: hidden; box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 40%, transparent); }
.b--split .b__t { padding: var(--py) var(--px); }
.b--split .b__i { align-self: stretch; display: grid; place-items: center; padding: 0 calc(var(--px) * .7); background: var(--c1); color: var(--c3); transition: padding .4s cubic-bezier(.3, .7, .3, 1.4); }
.b--split:hover .b__i { padding: 0 calc(var(--px) * 1.1); }

.b--ticket { background: radial-gradient(circle at 0 50%, transparent 9px, var(--c1) 10px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, var(--c1) 10px) right / 51% 100% no-repeat; color: var(--c3); border-radius: min(var(--r), 8px); padding-inline: calc(var(--px) + 10px); text-transform: uppercase; letter-spacing: .1em; }
.b--ticket::after { content: ""; position: absolute; top: 6px; bottom: 6px; right: calc(var(--px) + 2px); border-left: 2px dashed color-mix(in srgb, var(--c3) 45%, transparent); }
.b--ticket .b__i { margin-left: 14px; }
.b--ticket:hover { transform: rotate(-2deg) scale(1.04); }

.b--stripe { background: repeating-linear-gradient(-45deg, var(--c1) 0 10px, var(--c2) 10px 20px) 0 0 / 200% 100%; color: var(--c3); animation: b-stripe calc(var(--sp) * 2) linear infinite; text-shadow: 0 1px 0 rgb(255 255 255 / .4); }
.b--stripe .b__t { padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--c1) 85%, #fff); }
@keyframes b-stripe { to { background-position: 56.57px 0; } }

.b--glitch { background: var(--c3); color: var(--fg); border-radius: min(var(--r), 4px); box-shadow: inset 0 0 0 var(--bw) var(--fg); text-transform: uppercase; letter-spacing: .1em; }
.b--glitch::before, .b--glitch::after { content: attr(data-alt); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
.b--glitch::before { color: var(--c1); }
.b--glitch::after { color: var(--c2); }
.b--glitch:hover .b__t { opacity: .2; }
.b--glitch:hover::before { opacity: .9; animation: b-gl1 .4s steps(2) infinite; }
.b--glitch:hover::after { opacity: .9; animation: b-gl2 .5s steps(2) infinite; }
@keyframes b-gl1 { 0% { clip-path: inset(0 0 60% 0); transform: translate(-3px, 0); } 50% { clip-path: inset(40% 0 10% 0); transform: translate(3px, -1px); } 100% { clip-path: inset(70% 0 0 0); transform: translate(-2px, 1px); } }
@keyframes b-gl2 { 0% { clip-path: inset(50% 0 20% 0); transform: translate(3px, 0); } 50% { clip-path: inset(0 0 70% 0); transform: translate(-3px, 1px); } 100% { clip-path: inset(20% 0 50% 0); transform: translate(2px, -1px); } }

/* loading — click: spinner, then a check (js toggles .is-busy / .is-done) */
.b--loading { background: var(--c1); color: var(--c3); min-width: 9em; transition: min-width .4s, padding .4s, border-radius .4s, background .4s; }
.b--loading::after { content: ""; position: absolute; width: 1.2em; height: 1.2em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; opacity: 0; }
.b--loading.is-busy .b__t, .b--loading.is-busy .b__i, .b--loading.is-done .b__i { opacity: 0; }
.b--loading.is-busy::after { opacity: 1; animation: b-rot .7s linear infinite; }
.b--loading.is-done { background: var(--c2); color: var(--fg); }
@keyframes b-rot { to { transform: rotate(360deg); } }

/* heart — like toggle with a burst */
.b--heart { background: var(--c3); color: var(--fg); box-shadow: inset 0 0 0 var(--bw) color-mix(in srgb, var(--c1) 40%, transparent); }
.b--heart .b__i { order: -1; color: var(--c1); font-size: 1.25em; transition: transform .3s cubic-bezier(.3, .7, .3, 2); }
.b--heart::after { content: ""; position: absolute; left: calc(var(--px) + .5em); top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; opacity: 0;
    box-shadow: 0 -20px 0 var(--c1), 14px -14px 0 var(--c2), 20px 0 0 var(--c1), 14px 14px 0 var(--c2), 0 20px 0 var(--c1), -14px 14px 0 var(--c2), -20px 0 0 var(--c1), -14px -14px 0 var(--c2); }
.b--heart:hover .b__i { transform: scale(1.2); }
.b--heart.is-on { background: color-mix(in srgb, var(--c1) 18%, var(--c3)); }
.b--heart.is-on .b__i { animation: b-heart .5s cubic-bezier(.3, .7, .3, 2); }
.b--heart.is-on::after { animation: b-burst .6s ease-out; }
@keyframes b-heart { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
@keyframes b-burst { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }

/* click ripple, any button (js adds .b__wave) */
.b__wave { position: absolute; z-index: 1; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: rgb(255 255 255 / .55); pointer-events: none; animation: b-wave .7s ease-out forwards; }
@keyframes b-wave { to { transform: scale(40); opacity: 0; } }

/* hero: the biggest glow button on the page */
.b--hero { --fs: 19px; --px: 40px; --py: 20px; }