/*
 * Demo demo30 "UI kit" — the button vault (vault.html) and the flat buttons (flat.html).
 *
 * .v--<type>: the 28 button types of the owner's three generator files (deepseek_html_20261018_ed4025,
 * _12eae3, _be1159 — "Ultimate Button Vault", "500 Ultimate UI Buttons", "500 UI Buttons") and the
 * six of g2button.html, rewritten from per-button generated CSS / inline handlers into classes that
 * read custom properties, so every one is editable:
 *   --c1 colour  --c2 second colour  --fg text  --bgc dark base  --r radius  --px --py padding
 *   --fs font size  --fw weight  --ff family  --sp speed (s)
 * .f: the flat buttons of buttons_catalog.html (38 different ones among its 500 cards) — every
 * property of their inline style is a custom property here.
 */
@property --v-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.v {
    --c1: #FF3366; --c2: #0099FF; --fg: #000000; --bgc: #000000;
    --r: 8px; --px: 28px; --py: 14px; --fs: 15px; --fw: 600; --sp: .3s;
    --ff: "Inter", "Poppins", 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: none; border-radius: var(--r); outline: none;
    background: var(--c1); color: var(--fg); font: var(--fw) var(--fs)/1.15 var(--ff); white-space: nowrap; text-decoration: none;
    cursor: pointer; overflow: hidden; transition: all var(--sp) cubic-bezier(.4, 0, .2, 1); -webkit-tap-highlight-color: transparent;
}
.v:focus-visible { outline: 2px solid var(--c2); outline-offset: 3px; }
.v__t { position: relative; z-index: 2; display: inline-block; }

/* 1 gradient — the colours swing back and forth */
.v--gradient { background: linear-gradient(45deg, var(--c1), var(--c2), var(--c1)) 0 50% / 200% 200%; color: var(--fg); animation: v-grad calc(var(--sp) * 10) ease infinite; }
.v--gradient:hover { transform: scale(1.05); box-shadow: 0 10px 20px color-mix(in srgb, var(--c1) 38%, transparent); }
@keyframes v-grad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* 2 cyberpunk — cut corners, neon outline */
.v--cyberpunk { background: var(--bgc); color: var(--c1); border: 2px solid var(--c1); text-transform: uppercase; letter-spacing: 2px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 0 10px color-mix(in srgb, var(--c1) 25%, transparent); }
.v--cyberpunk:hover { background: var(--c1); color: var(--bgc); box-shadow: 0 0 30px var(--c1); }

/* 3 glass */
.v--glass { background: rgb(255 255 255 / .05); color: var(--fg); border: 1px solid rgb(255 255 255 / .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.v--glass:hover { background: rgb(255 255 255 / .15); border-color: var(--c1); box-shadow: 0 0 20px color-mix(in srgb, var(--c1) 25%, transparent); }

/* 4 brutalist */
.v--brutalist { background: var(--c1); color: var(--bgc); border: 3px solid var(--bgc); box-shadow: 6px 6px 0 var(--bgc); font-weight: 800; text-transform: uppercase; }
.v--brutalist:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--bgc); }
.v--brutalist:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--bgc); }

/* 5 neon */
.v--neon { background: transparent; color: var(--c1); border: 2px solid var(--c1); text-shadow: 0 0 10px var(--c1);
    box-shadow: 0 0 15px color-mix(in srgb, var(--c1) 25%, transparent), inset 0 0 15px color-mix(in srgb, var(--c1) 25%, transparent); overflow: visible; }
.v--neon:hover { background: var(--c1); color: var(--bgc); text-shadow: none; box-shadow: 0 0 30px var(--c1), inset 0 0 30px var(--c1); }

/* 6 retro wave — two offset shadows */
.v--retro { background: transparent; color: var(--fg); border: 2px solid var(--fg); box-shadow: 4px 4px 0 var(--c1), -4px -4px 0 var(--c2); font-style: italic; font-weight: 800; text-transform: uppercase; overflow: visible; }
.v--retro:hover { box-shadow: 8px 8px 0 var(--c1), -8px -8px 0 var(--c2); transform: translate(-2px, -2px); }

/* 7 liquid — fills from the bottom */
.v--liquid { background: transparent; color: var(--c1); border: 2px solid var(--c1); }
.v--liquid::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c1); transform: translateY(100%); transition: transform var(--sp) cubic-bezier(.4, 0, .2, 1); }
.v--liquid:hover::before { transform: none; }
.v--liquid:hover { color: var(--bgc); }

/* 8 skewed */
.v--skewed { background: var(--c1); color: var(--bgc); transform: skewX(-15deg); font-weight: 800; text-transform: uppercase; }
.v--skewed .v__t { transform: skewX(15deg); }
.v--skewed:hover { background: var(--c2); transform: skewX(-15deg) scale(1.05); box-shadow: 0 10px 20px color-mix(in srgb, var(--c2) 38%, transparent); }

/* 9 glitch — shakes on hover */
.v--glitch { background: var(--bgc); color: var(--fg); border: 1px solid #333; }
.v--glitch:hover { animation: v-glitch calc(var(--sp)) cubic-bezier(.25, .46, .45, .94) both infinite; color: var(--c1); }
@keyframes v-glitch { 0%, 100% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } }

/* 10 3D press */
.v--press { background: var(--c1); color: var(--bgc); box-shadow: 0 6px 0 rgb(0 0 0 / .25), 0 8px 10px rgb(0 0 0 / .2); transform: translateY(-2px); overflow: visible; }
.v--press:hover { filter: brightness(1.1); }
.v--press:active { transform: translateY(4px); box-shadow: 0 2px 0 rgb(0 0 0 / .25), 0 4px 5px rgb(0 0 0 / .2); }

/* 11 outline sweep — the frame steps out */
.v--outline { background: transparent; color: var(--c1); border: 2px solid transparent; overflow: visible; }
.v--outline::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--c1); border-radius: inherit; transition: all var(--sp) ease; }
.v--outline:hover::before { inset: -4px; border-color: var(--c2); box-shadow: 0 0 15px var(--c2); }
.v--outline:hover { background: color-mix(in srgb, var(--c1) 12%, transparent); }

/* 12 neumorphic (dark) */
.v--neumorphic { background: #1a1a1a; color: var(--c1); box-shadow: 6px 6px 12px #0d0d0d, -6px -6px 12px #272727; overflow: visible; }
.v--neumorphic:hover { box-shadow: inset 6px 6px 12px #0d0d0d, inset -6px -6px 12px #272727; color: var(--fg); }

/* 13 pill with a dot */
.v--pill { background: var(--c1); color: var(--bgc); padding-left: calc(var(--px) * .6); gap: 10px; font-weight: 700; }
.v--pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bgc); transition: transform var(--sp), background var(--sp); }
.v--pill:hover { background: var(--c2); color: var(--fg); }
.v--pill:hover::before { transform: scale(1.5); background: var(--fg); }

/* 14 slide — the other half of the background slides in */
.v--slide { background: linear-gradient(to right, var(--c1) 50%, var(--c2) 50%) right bottom / 200% 100%; color: var(--bgc); }
.v--slide:hover { background-position: left bottom; color: var(--fg); box-shadow: 0 10px 20px color-mix(in srgb, var(--c2) 38%, transparent); }

/* 15 minimal — underline grows */
.v--minimal { background: transparent; color: var(--fg); padding-inline: 0; border-bottom: 2px solid #444; overflow: visible; }
.v--minimal::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--c1); transition: width var(--sp) ease; }
.v--minimal:hover::after { width: 100%; }
.v--minimal:hover { color: var(--c1); }

/* 16 shimmer — a glint crosses on hover */
.v--shimmer { background: linear-gradient(120deg, transparent 40%, rgb(255 255 255 / .6) 50%, transparent 60%) -100% 0 / 200% 100% no-repeat, var(--c1); color: var(--bgc); }
.v--shimmer:hover { background-position: 200% 0, 0 0; transition: background-position calc(var(--sp) * 2) ease; }

/* 17 gradient border — the frame cycles its hue */
.v--gborder { background: #111; color: var(--fg); overflow: visible; }
.v--gborder::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: linear-gradient(45deg, var(--c1), var(--c2), var(--c1)); }
.v--gborder::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #111; }
.v--gborder:hover::before { animation: v-hue calc(var(--sp) * 7) linear infinite; }
@keyframes v-hue { to { filter: hue-rotate(360deg); } }

/* 18 text slide — "Let's go!" rises from below */
.v--textslide { background: var(--c1); color: var(--bgc); min-width: 160px; }
.v--textslide .v__t { transition: transform var(--sp) cubic-bezier(.4, 0, .2, 1); }
.v--textslide::after { content: attr(data-alt); position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: var(--c2); transform: translateY(100%); transition: transform var(--sp) cubic-bezier(.4, 0, .2, 1); }
.v--textslide:hover .v__t { transform: translateY(-220%); }
.v--textslide:hover::after { transform: none; }

/* 19 corner cut */
.v--cornercut { background: var(--c1); color: var(--bgc); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); }
.v--cornercut:hover { background: var(--c2); clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%); }

/* 20 lift */
.v--lift { background: var(--c1); color: var(--bgc); box-shadow: 0 4px 6px rgb(0 0 0 / .1); overflow: visible; }
.v--lift:hover { transform: translateY(-4px); box-shadow: 0 12px 20px color-mix(in srgb, var(--c1) 38%, transparent); }

/* 21 ripple — a ring shrinks into the click */
.v--ripple { background: var(--c1); color: var(--bgc); }
.v--ripple::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, var(--bgc) 10%, transparent 10.01%) 50% / 100% no-repeat; transform: scale(10); opacity: 0; transition: transform .5s, opacity 1s; }
.v--ripple:active::after { transform: scale(0); opacity: .3; transition: 0s; }

/* 22 pulse — a ring breathes out until hover */
.v--pulse { background: var(--c1); color: var(--bgc); overflow: visible; animation: v-pulse calc(var(--sp) * 7) infinite; }
.v--pulse:hover { animation: none; background: var(--c2); }
@keyframes v-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c1) 50%, transparent); } 70% { box-shadow: 0 0 0 15px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* 23 fold — tips back in 3D */
.v--fold { background: var(--c1); color: var(--bgc); transform: perspective(500px) rotateX(0deg); overflow: visible; }
.v--fold:hover { transform: perspective(500px) rotateX(15deg); box-shadow: 0 15px 20px color-mix(in srgb, var(--c1) 25%, transparent); }
.v--fold:active { transform: perspective(500px) rotateX(-15deg); }

/* 24 shine — a coloured band passes */
.v--shine { background: #1a1a1a; color: var(--fg); border: 1px solid var(--c1); }
.v--shine::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c1) 25%, transparent), transparent); transition: left calc(var(--sp) * 1.7) ease; }
.v--shine:hover::before { left: 100%; }

/* 25 arrow */
.v--arrow { background: var(--c1); color: var(--bgc); padding-right: calc(var(--px) + 14px); }
.v--arrow::after { content: "→"; position: absolute; right: calc(var(--px) * .7); transition: transform var(--sp) ease; }
.v--arrow:hover::after { transform: translateX(5px); }
.v--arrow:hover { background: var(--c2); }

/* 26 solid — from the 10-style generator */
.v--solid { background: var(--c1); color: var(--fg); overflow: visible; }
.v--solid:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: 0 4px 12px color-mix(in srgb, var(--c1) 50%, transparent); }

/* 27 ghost — text only, a line under on hover */
.v--ghost { background: transparent; color: var(--c1); border-bottom: 2px solid transparent; border-radius: 0; padding: calc(var(--py) * .6) calc(var(--px) * .6); }
.v--ghost:hover { border-bottom-color: var(--c1); color: var(--c2); background: color-mix(in srgb, var(--c1) 6%, transparent); }

/* 28 double border */
.v--double { background: transparent; color: var(--c1); border: 2px solid var(--c1); box-shadow: inset 0 0 0 4px var(--bgc), inset 0 0 0 6px var(--c1); padding: calc(var(--py) + 2px) var(--px); }
.v--double:hover { background: var(--c1); color: var(--fg); }

/* ── the six of g2button.html ─────────────────────────────────────────── */
/* futuristic neon glow */
.v--neonfill { background: var(--bgc); color: var(--c1); border: 2px solid var(--c1); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; overflow: visible; transition-duration: calc(var(--sp) * 1.3); }
.v--neonfill:hover { background: var(--c1); color: var(--bgc); box-shadow: 0 0 25px var(--c1), 0 0 50px var(--c2); transform: translateY(-3px); }

/* cyberpunk frosted glass + click ripple (js) */
.v--frosted { background: rgb(255 255 255 / .07); color: rgb(255 255 255 / .9); border: 1px solid rgb(255 255 255 / .15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.v--frosted:hover { background: rgb(255 255 255 / .15); border-color: rgb(255 255 255 / .3); }
.v__ripple { position: absolute; border-radius: 50%; background: rgb(255 255 255 / .4); transform: scale(0); animation: v-ripple .6s linear; pointer-events: none; }
@keyframes v-ripple { to { transform: scale(2.5); opacity: 0; } }

/* 3D arcade retro */
.v--arcade { background: var(--c1); color: var(--fg); font-weight: 900; box-shadow: 0 8px 0 color-mix(in srgb, var(--c1) 60%, #000); transition: all .1s ease; overflow: visible; }
.v--arcade:active { transform: translateY(6px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c1) 60%, #000); }

/* liquid fluid gradient; click: "Processing…" (js) */
.v--liquidflow { background: linear-gradient(270deg, var(--c1), var(--c2), var(--bgc)) 0% 50% / 600% 600%; color: var(--fg); box-shadow: 0 4px 15px color-mix(in srgb, var(--c2) 40%, transparent); transition-duration: calc(var(--sp) * 1.7); overflow: visible; }
.v--liquidflow:hover { background-position: 100% 50%; box-shadow: 0 6px 20px color-mix(in srgb, var(--c1) 60%, transparent); transform: scale(1.03); }

/* soft neumorphism (light) */
.v--neusoft { background: #e0e5ec; color: #555; box-shadow: 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff; transition-duration: .2s; overflow: visible; }
.v--neusoft:hover { color: #111; }
.v--neusoft:active { box-shadow: inset 6px 6px 10px #a3b1c6, inset -6px -6px 10px #ffffff; }

/* magnetic border */
.v--magnetic { background: transparent; color: var(--fg); border: 2px solid var(--fg); letter-spacing: 1px; font-weight: 500; transition: all calc(var(--sp) * 1.3) cubic-bezier(.19, 1, .22, 1); }
.v--magnetic:hover { background: var(--fg); color: var(--bgc); box-shadow: inset 0 0 0 2px var(--bgc); }

/* ── flat buttons (buttons_catalog.html) ──────────────────────────────── */
.f {
    --bg: #1a73e8; --fg: #ffffff; --bd: none; --r: 8px; --sh: none; --px: 24px; --py: 10px; --fw: 500; --fst: normal;
    --ls: normal; --tt: none; --ff: system-ui, -apple-system, sans-serif; --fs: 15px;
    display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: var(--py) var(--px);
    background: var(--bg); color: var(--fg); border: var(--bd); border-bottom: var(--bb, var(--bd)); border-radius: var(--r); box-shadow: var(--sh);
    font: var(--fst) var(--fw) var(--fs)/1.2 var(--ff); letter-spacing: var(--ls); text-transform: var(--tt); white-space: nowrap;
    cursor: pointer; transition: all .2s ease;
}
.f:focus-visible { outline: 2px solid #4f46e5; outline-offset: 3px; }
.f--bright:hover { filter: brightness(1.2); }
.f--press:active { transform: scale(.95); }
.f--glass { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }