/*
 * LittleLink — Premium Gen-Z Brand Buttons
 * 2026 UI treatment
 *
 * Brand colors remain controlled by each individual
 * .button-* class below.
 */


/* =========================================================
   PREMIUM BUTTON ENGINE
   ========================================================= */

.button,
button {
	position: relative;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	overflow: hidden;

	isolation: isolate;

	transform: translate3d(0, 0, 0);

	transition:
		transform 0.35s cubic-bezier(.2, .8, .2, 1),
		filter 0.35s ease,
		box-shadow 0.35s ease,
		border-color 0.35s ease;
}


/* =========================================================
   GLASS / DEPTH LAYER
   ========================================================= */

.button::after,
button::after {
	content: "";

	position: absolute;

	inset: 0;

	z-index: -2;

	border-radius: inherit;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.16),
			transparent 45%
		);

	opacity: 0.75;

	pointer-events: none;
}


/* =========================================================
   MOVING LIGHT / SHINE
   ========================================================= */

.button::before,
button::before {
	content: "";

	position: absolute;

	top: -20%;

	left: -120%;

	width: 65%;

	height: 140%;

	z-index: -1;

	background:
		linear-gradient(
			105deg,
			transparent 0%,
			rgba(255, 255, 255, 0.03) 30%,
			rgba(255, 255, 255, 0.35) 50%,
			rgba(255, 255, 255, 0.03) 70%,
			transparent 100%
		);

	transform: skewX(-20deg);

	transition:
		left 0.75s cubic-bezier(.2, .8, .2, 1);

	pointer-events: none;
}


/* =========================================================
   HOVER
   ========================================================= */

.button:hover,
button:hover {
	filter: brightness(1.04) saturate(1.08);

	transform:
		translate3d(0, -4px, 0)
		scale(1.01);

	box-shadow:
		0 14px 30px rgba(0, 0, 0, 0.14),
		0 5px 12px rgba(0, 0, 0, 0.08);

	z-index: 2;
}

.button:hover::before,
button:hover::before {
	left: 140%;
}


/* =========================================================
   ACTIVE / PRESS
   ========================================================= */

.button:active,
button:active {
	transform:
		translate3d(0, -1px, 0)
		scale(0.985);

	filter:
		brightness(0.98);

	transition-duration: 0.08s;
}


/* =========================================================
   ICONS
   ========================================================= */

.icon {
	position: relative;

	z-index: 1;

	filter: var(--icon-filter, none);

	transition:
		transform 0.35s cubic-bezier(.2, .8, .2, 1),
		filter 0.35s ease;
}

.button:hover .icon,
button:hover .icon {
	transform:
		scale(1.12)
		rotate(-3deg);

	filter:
		drop-shadow(
			0 2px 5px
			rgba(0, 0, 0, 0.15)
		)
		var(--icon-filter, none);
}


/* =========================================================
   BUTTON TEXT
   ========================================================= */

.button > *,
button > * {
	position: relative;
	z-index: 1;
}


/* =========================================================
   DEFAULT
   ========================================================= */

.button.button-default {
	--button-text: #ffffff;
	--button-background: #2457F5;
	--button-border: 1px solid rgba(255, 255, 255, 0.15);

	box-shadow:
		0 8px 20px rgba(36, 87, 245, 0.18);
}


/* =========================================================
   WHITE / LIGHT BRANDS
   ========================================================= */

.button-amazon,
.button-dribbble,
.button-discogs,
.button-google-scholar,
.button-hashnode,
.button-meetup,
.button-notion,
.button-pinterest,
.button-product-hunt,
.button-slack,
.button-stack-overflow,
.button-unsplash {
	--button-text: #111111;

	--button-background:
		linear-gradient(
			180deg,
			#ffffff,
			#f5f5f5
		);

	--button-border:
		1px solid rgba(0, 0, 0, 0.1);

	box-shadow:
		0 8px 22px rgba(0, 0, 0, 0.07);
}


/* =========================================================
   BLACK BRANDS
   ========================================================= */

.button-appstore,
.button-invites,
.button-apple-music,
.button-apple-podcasts,
.button-flickr,
.button-github,
.button-kick,
.button-medium,
.button-microsoft,
.button-patreon,
.button-tiktok,
.button-threads,
.button-tumb,
.button-vsco,
.button-x {
	--button-text: #ffffff;

	--button-background:
		linear-gradient(
			145deg,
			#171717,
			#000000
		);

	--button-border:
		1px solid rgba(255, 255, 255, 0.14);

	box-shadow:
		0 10px 25px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   INSTAGRAM
   ========================================================= */

.button-instagram {
	--button-text: #ffffff;

	background-image:
		linear-gradient(
			135deg,
			#4f00c8 0%,
			#8a00b9 35%,
			#e90062 65%,
			#ff7a00 100%
		);

	box-shadow:
		0 10px 28px rgba(225, 48, 108, 0.24);
}


/* =========================================================
   FACEBOOK
   ========================================================= */

.button-faceb,
.button-messenger {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#1877f2,
			#0866ff
		);

	box-shadow:
		0 10px 25px rgba(8, 102, 255, 0.2);
}


/* =========================================================
   DISCORD
   ========================================================= */

.button-discord {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#5865f2,
			#4752c4
		);

	box-shadow:
		0 10px 28px rgba(88, 101, 242, 0.25);
}


/* =========================================================
   BLUESKY
   ========================================================= */

.button-bluesky {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#1185fe,
			#0876ed
		);

	box-shadow:
		0 10px 25px rgba(17, 133, 254, 0.22);
}


/* =========================================================
   LINKEDIN
   ========================================================= */

.button-linked {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#2867b2,
			#0a66c2
		);

	box-shadow:
		0 10px 24px rgba(40, 103, 178, 0.2);
}


/* =========================================================
   TIKTOK
   ========================================================= */

.button-tiktok {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#050505,
			#111111
		);

	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.3);
}


/* TikTok hover color energy */

.button-tiktok:hover {
	box-shadow:
		-4px 8px 28px rgba(37, 244, 238, 0.12),
		4px 8px 28px rgba(254, 44, 85, 0.12),
		0 14px 35px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   YOUTUBE
   ========================================================= */

.button-yt,
.button-yt-music {
	--button-text: #ffffff;

	background:
		linear-gradient(
			145deg,
			#333333,
			#181818
		);

	box-shadow:
		0 10px 25px rgba(0, 0, 0, 0.2);
}

.button-yt-alt {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#ff3030,
			#ff0000
		);

	box-shadow:
		0 10px 28px rgba(255, 0, 0, 0.22);
}


/* =========================================================
   SPOTIFY
   ========================================================= */

.button-spotify {
	--button-text: #061b0e;

	background:
		linear-gradient(
			135deg,
			#1ed760,
			#1db954
		);

	box-shadow:
		0 10px 28px rgba(29, 185, 84, 0.22);
}

.button-spotify-alt {
	--button-text: #ffffff;

	background:
		linear-gradient(
			145deg,
			#191414,
			#050505
		);
}


/* =========================================================
   TWITCH
   ========================================================= */

.button-twitch {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#9146ff,
			#772ce8
		);

	box-shadow:
		0 10px 28px rgba(145, 70, 255, 0.25);
}


/* =========================================================
   SNAPCHAT
   ========================================================= */

.button-snapchat {
	--button-text: #111111;

	background:
		linear-gradient(
			135deg,
			#fff900,
			#fffc00
		);

	box-shadow:
		0 10px 25px rgba(255, 252, 0, 0.18);
}


/* =========================================================
   REDDIT
   ========================================================= */

.button-reddit {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#ff5722,
			#ff4500
		);

	box-shadow:
		0 10px 28px rgba(255, 69, 0, 0.2);
}


/* =========================================================
   TELEGRAM
   ========================================================= */

.button-telegram {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#45b9f0,
			#229ed9
		);

	box-shadow:
		0 10px 25px rgba(34, 158, 217, 0.2);
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.button-whatsapp {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#25d366,
			#128c7e
		);

	box-shadow:
		0 10px 25px rgba(37, 211, 102, 0.2);
}


/* =========================================================
   CASH APP
   ========================================================= */

.button-cash-app {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#00d64b,
			#00b83d
		);

	box-shadow:
		0 10px 28px rgba(0, 214, 75, 0.2);
}


/* =========================================================
   PAYPAL
   ========================================================= */

.button-paypal {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#003087,
			#002991
		);

	box-shadow:
		0 10px 25px rgba(0, 41, 145, 0.2);
}


/* =========================================================
   VENMO
   ========================================================= */

.button-venmo {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#008cff,
			#006cff
		);

	box-shadow:
		0 10px 25px rgba(0, 140, 255, 0.2);
}


/* =========================================================
   KICK
   ========================================================= */

.button-kick {
	--button-text: #ffffff;

	background:
		linear-gradient(
			145deg,
			#111111,
			#000000
		);
}

.button-kick-alt {
	--button-text: #000000;

	background:
		linear-gradient(
			135deg,
			#1df51d,
			#01e701
		);

	box-shadow:
		0 10px 28px rgba(1, 231, 1, 0.2);
}


/* =========================================================
   FIVERR
   ========================================================= */

.button-fiverr {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#1dbf73,
			#18a968
		);

	box-shadow:
		0 10px 25px rgba(29, 191, 115, 0.2);
}


/* =========================================================
   ETSY
   ========================================================= */

.button-etsy {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#f56400,
			#f45800
		);

	box-shadow:
		0 10px 25px rgba(244, 88, 0, 0.2);
}


/* =========================================================
   PATREON
   ========================================================= */

.button-patreon {
	--button-text: #ffffff;

	background:
		linear-gradient(
			145deg,
			#171717,
			#000000
		);
}


/* =========================================================
   ZELLE
   ========================================================= */

.button-zelle {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#7b2bd4,
			#6d1ed4
		);

	box-shadow:
		0 10px 28px rgba(109, 30, 212, 0.22);
}


/* =========================================================
   ZOOM
   ========================================================= */

.button-zoom {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#2f7cff,
			#0b5cff
		);

	box-shadow:
		0 10px 25px rgba(11, 92, 255, 0.22);
}


/* =========================================================
   WORDPRESS
   ========================================================= */

.button-wordpress {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#3858e9,
			#1d45d8
		);

	box-shadow:
		0 10px 25px rgba(56, 88, 233, 0.2);
}


/* =========================================================
   SUBSTACK
   ========================================================= */

.button-substack {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#ff7b32,
			#ff6719
		);

	box-shadow:
		0 10px 25px rgba(255, 103, 25, 0.2);
}


/* =========================================================
   CALENDLY
   ========================================================= */

.button-calendly {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#087bff,
			#006bff
		);

	box-shadow:
		0 10px 25px rgba(0, 107, 255, 0.2);
}


/* =========================================================
   GITHUB
   ========================================================= */

.button-github {
	--button-text: #ffffff;

	background:
		linear-gradient(
			145deg,
			#242424,
			#000000
		);
}


/* =========================================================
   FIGMA
   ========================================================= */

.button-figma {
	--button-text: #ffffff;

	background:
		linear-gradient(
			145deg,
			#171717,
			#000000
		);
}


/* =========================================================
   APPLE MUSIC ALTERNATIVE
   ========================================================= */

.button-apple-music-alt {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#fb5c74,
			#fa233b
		);

	box-shadow:
		0 10px 28px rgba(250, 35, 59, 0.22);
}


/* =========================================================
   APPLE PODCASTS ALTERNATIVE
   ========================================================= */

.button-apple-podcasts-alt {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#f452ff,
			#832bc1
		);

	box-shadow:
		0 10px 28px rgba(131, 43, 193, 0.22);
}


/* =========================================================
   STEAM
   ========================================================= */

.button-steam {
	--button-text: #ffffff;

	background:
		linear-gradient(
			90deg,
			#08bbff,
			#2b75ff
		);

	box-shadow:
		0 10px 28px rgba(43, 117, 255, 0.22);
}

.button-steam-alt {
	--button-text: #ffffff;

	background:
		linear-gradient(
			90deg,
			#09172a,
			#072a57,
			#0c5085
		);
}


/* =========================================================
   SIGNAL
   ========================================================= */

.button-signal {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#4a55ff,
			#3b45fd
		);

	box-shadow:
		0 10px 28px rgba(59, 69, 253, 0.22);
}

.button-signal-alt {
	--button-text: #3b45fd;

	background:
		linear-gradient(
			135deg,
			#eef1ff,
			#e3e8fe
		);

	border:
		1px solid rgba(59, 69, 253, 0.15);
}


/* =========================================================
   MASTODON
   ========================================================= */

.button-mastodon {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#17063b,
			#563acc
		);

	box-shadow:
		0 10px 28px rgba(86, 58, 204, 0.2);
}


/* =========================================================
   LAST.FM
   ========================================================= */

.button-last-fm {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#e51a10,
			#d51007
		);

	box-shadow:
		0 10px 28px rgba(213, 16, 7, 0.2);
}


/* =========================================================
   STRAVA
   ========================================================= */

.button-strava {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#ff6a18,
			#fc5200
		);

	box-shadow:
		0 10px 28px rgba(252, 82, 0, 0.2);
}


/* =========================================================
   PRODUCT / SHOP
   ========================================================= */

.button-shop {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#7048ff,
			#5a31f4
		);

	box-shadow:
		0 10px 28px rgba(90, 49, 244, 0.22);
}


/* =========================================================
   KICKSTARTER
   ========================================================= */

.button-kickstarter {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#11dd89,
			#05ce78
		);

	box-shadow:
		0 10px 28px rgba(5, 206, 120, 0.2);
}


/* =========================================================
   LINE
   ========================================================= */

.button-line {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#06d95d,
			#06c755
		);

	box-shadow:
		0 10px 28px rgba(6, 199, 85, 0.2);
}


/* =========================================================
   THREEMA
   ========================================================= */

.button-threema {
	--button-text: #000000;

	background:
		linear-gradient(
			135deg,
			#54ed7c,
			#3fe669
		);

	box-shadow:
		0 10px 28px rgba(63, 230, 105, 0.2);
}


/* =========================================================
   ONLYFANS
   ========================================================= */

.button-onlyfans {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#19b9f0,
			#00aeef
		);

	box-shadow:
		0 10px 28px rgba(0, 174, 239, 0.2);
}


/* =========================================================
   VIMEO
   ========================================================= */

.button-vimeo {
	--button-text: #ffffff;

	background:
		linear-gradient(
			135deg,
			#35c5f4,
			#1ab7ea
		);

	box-shadow:
		0 10px 28px rgba(26, 183, 234, 0.2);
}


/* =========================================================
   TELEGRAM / MATRIX / ETC.
   Existing brand variables remain compatible
   ========================================================= */

.button-cal,
.button-google-black,
.button-playstore,
.button-matrix,
.button-microsoft {
	--button-border:
		1px solid rgba(255, 255, 255, 0.14);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 550px) {

	.button,
	button {
		min-height: 3.7rem;

		border-radius: 1.05rem;
	}

	.button:hover,
	button:hover {
		transform:
			translate3d(0, -2px, 0)
			scale(1.005);
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.button,
	button,
	.button::before,
	button::before,
	.icon {
		transition: none !important;
	}

	.button:hover,
	button:hover {
		transform: none;
	}
}