button.glossy-pill {
	--hue: 300;
	--btn-bg: hsl(var(--hue), 85%, 50%);

	/* 2. Fluid Layout & Pill Geometry */
	position: relative;
	display: inline-block;
	padding: 0.5em 1.2em;
	border: none;
	border-radius: 2em;
	outline: none;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;

	font-family: inherit;
	font-size: 1em;
	font-weight: 700;
	color: hsl(0, 0%, 100%);

	/* 3. Surface & Double-Layered Specular Chrome Reflection */
	background-color: var(--btn-bg);
	background-image: linear-gradient(
		hsla(0, 0%, 100%, 0.6),
		hsla(0, 0%, 100%, 0) 50%,
		hsla(0, 0%, 0%, 0.25) 50%,
		hsla(0, 0%, 100%, 0.2)
	);

	/* Text Bloom Glow + Drop Shadow */
	text-shadow:
		0 0 0.6em hsla(0, 0%, 100%, 0.8),
		0 0.1em 0.2em hsla(0, 0%, 0%, 0.7);

	/* 3D Curvature Insets + Ambient Drop Shadow */
	box-shadow:
		inset 0 -0.2em 0.5em hsla(0, 0%, 0%, 0.35),
		inset 0 0.2em 0.5em hsla(0, 0%, 100%, 0.45),
		0 0.3em 0.6em hsla(0, 0%, 0%, 0.2);

	scale: 1;
	translate: 0 0;
	transition:
		scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
		translate 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
		filter 0.2s ease,
		box-shadow 0.2s ease;

	span {
		position: relative;
		z-index: 1;
		vertical-align: middle;
	}

	&::before {
		content: "";
		position: absolute;
		inset: 0.1em 0.6em auto;
		height: 45%;
		border-radius: 1em;
		background: linear-gradient(hsla(0, 0%, 100%, 0.85), hsla(0, 0%, 100%, 0));
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	&:hover {
		scale: 1.05;
		translate: 0 -0.1em;
		filter: brightness(1.08);
		box-shadow:
			inset 0 -0.2em 0.5em hsla(0, 0%, 0%, 0.35),
			inset 0 0.2em 0.5em hsla(0, 0%, 100%, 0.45),
			0 0.6em 1.2em hsla(0, 0%, 0%, 0.3);
	}

	&:active {
		scale: 0.95;
		translate: 0 0.1em;
		box-shadow:
			inset 0 0.2em 0.6em hsla(0, 0%, 0%, 0.5),
			0 0.1em 0.2em hsla(0, 0%, 0%, 0.2);

		&::before {
			opacity: 0;
		}
	}
}

button.glossy-tilt {
	/* Theme Variables for easy overriding */
	--btn-gold: hsl(51, 100%, 50%);
	--btn-orange: hsl(33, 100%, 50%);
	--btn-border: hsl(43, 89%, 38%);
	--shadow-clr: hsla(0, 0%, 0%, 0.2);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* Fluid sizing: Removes the need for hardcoded widths/heights */
	padding: 0.6em 1.4em;
	overflow: hidden;

	border: 1px solid var(--btn-border);
	border-radius: 2em; /* Keeps the smooth pill shape */
	background: linear-gradient(to right, var(--btn-gold), var(--btn-orange));

	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	outline: none;

	/* Base 3D Rotation (Tilted Left) */
	transform: perspective(40em) rotateY(-15deg);

	/* Translated pixel values to em for perfect fluid scaling */
	text-shadow: 0.3em 0.15em 0.1em var(--shadow-clr);
	box-shadow: 0.2em 0 0 0.3em var(--shadow-clr);

	transition:
		transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
		text-shadow 0.4s ease-out,
		box-shadow 0.4s ease-out;

	span {
		position: relative;
		z-index: 2; /* Keeps text above the glossy sweep */
		vertical-align: middle;
	}

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;

		background: linear-gradient(to right, transparent, hsla(0, 0%, 100%, 0.6), transparent);

		/* GPU-Safe movement (Replaced 'left: -100%') */
		translate: -100% 0;
		transition: translate 0.5s ease-in-out;
		z-index: 1;
		pointer-events: none;
	}

	&:hover {
		/* Flips the button to the right */
		transform: perspective(40em) rotateY(15deg);
		text-shadow: -0.3em 0.15em 0.1em var(--shadow-clr);
		box-shadow: -0.2em 0 0 0.3em var(--shadow-clr);

		/* Triggers the light sweep */
		&::before {
			translate: 100% 0;
		}
	}

	&:active {
		/* Flattens the button completely when pressed */
		transform: perspective(40em) rotateY(0deg) scale(0.95);
		box-shadow: 0 0 0 0.1em var(--shadow-clr);
		text-shadow: 0 0.1em 0.1em var(--shadow-clr);
	}
}

button.gradient-3d {
	/* 1. Theme Variables (Extracted from SCSS math for easy reuse) */
	--slate: hsl(226, 52%, 13%);
	--blue: hsl(189, 100%, 43%);
	--blue-light: hsl(189, 100%, 63%);
	--blue-hue: hsl(199, 100%, 43%);
	--pink: hsl(300, 100%, 50%);
	--pink-light: hsl(300, 100%, 70%);

	/* 2. Base Button Layout */
	position: relative;
	display: inline-block;
	padding: 0.8em 1em;
	z-index: 1;

	font-family: inherit;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;

	/* 3. Surface & Border Styling */
	color: hsl(0, 0%, 100%);
	background-color: var(--blue);
	background-image: linear-gradient(45deg, var(--blue) 0%, var(--pink) 100%);

	border: 3px solid transparent;
	border-image: linear-gradient(45deg, var(--blue-light) 0%, var(--pink-light) 100%) 1;

	/* 4. GPU-Safe Transitions */
	transform-origin: left bottom;
	transition:
		background 0.2s ease-in-out,
		color 0.2s ease-in-out,
		transform 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;

	span {
		position: relative;
		z-index: 2; /* Keeps text above pseudo-element geometry */
	}

	/* --- 3D Isometric Faces (Left and Bottom)              --- */

	&::before,
	&::after {
		content: "";
		display: block;
		position: absolute;
		z-index: -1;
		border: 3px solid transparent;
		border-image-slice: 1;
		transition:
			height 0.2s ease-in-out,
			width 0.2s ease-in-out;
	}

	/* Left Side Face */
	&::before {
		left: -0.75em;
		top: 0.15em;
		width: 0.31em;
		height: 100%;
		transform: skewY(-45deg);

		background-image: linear-gradient(45deg, var(--blue) 0%, var(--blue-hue) 100%);
		border-image: linear-gradient(45deg, var(--blue) 0%, var(--blue-hue) 100%) 1;
	}

	/* Bottom Side Face */
	&::after {
		bottom: -0.75em;
		right: 0.15em;
		width: 100%;
		height: 0.31em;
		transform: skewX(-45deg);

		background-image: linear-gradient(45deg, var(--blue) 0%, var(--pink) 100%);
		border-image: linear-gradient(45deg, var(--blue) 0%, var(--pink) 100%) 1;
	}

	/* --- Hover Interaction (Pulls Forward)                 --- */

	&:hover {
		background: hsl(0, 0%, 100%);
		color: var(--slate);
		border-image: linear-gradient(45deg, var(--blue) 0%, var(--pink) 100%) 1;

		/* Physically translates up and right, casting a shadow backward */
		transform: translate(0.5em, -0.5em);
		box-shadow: -1em 1em 0.15em hsla(226, 52%, 13%, 0.1);

		&::before {
			height: 100%;
		}

		&::after {
			width: 100%;
		}
	}
}

button.jelly-3d {
	/* Theme Variables for easy overriding in different projects */
	--btn-color: hsl(0, 0%, 100%);
	--btn-bg: hsl(340, 100%, 63%);
	--btn-border: hsl(340, 82%, 59%);

	position: relative;
	padding: 0.6em 1.2em;

	border: 1px solid var(--btn-border);
	border-radius: 0.5em;
	background-color: var(--btn-bg);
	color: var(--btn-color);

	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	outline: none;

	/* 3D Volumetric Shadows: Outer drop shadow + Deep bottom inset */
	box-shadow:
		0 0.2em 0.4em hsla(0, 0%, 0%, 0.4),
		0 -0.3em 0.6em hsla(0, 0%, 0%, 0.2) inset;

	transition: box-shadow 0.1s ease-out;

	/* The Glossy "Jelly" Highlight at the top */
	&::after {
		content: "";
		position: absolute;
		top: 0.15em;
		left: 12.5%;
		width: 75%;
		height: 15%;

		background-color: hsl(0, 0%, 100%);
		border-radius: 50%;
		filter: blur(0.15em);
		transition: opacity 0.1s ease-out;
		pointer-events: none;
	}

	span {
		position: relative;
		z-index: 1;
	}

	&:active {
		box-shadow:
			0 0 0 hsla(0, 0%, 0%, 0.4),
			0 0.4em 1em hsla(0, 0%, 0%, 0.3) inset;

		&::after {
			opacity: 0;
		}
	}
}

button.tilt-3d {
	/* Theme Variables for easy overriding */
	--btn-hue: 343;
	--btn-bg-light: hsl(var(--btn-hue), 86%, 65%);
	--btn-bg-dark: hsl(var(--btn-hue), 86%, 55%);
	--btn-lip: hsl(var(--btn-hue), 86%, 40%);
	--btn-text: hsl(0, 0%, 100%);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8em 1.6em;

	border: none;
	border-radius: 0.6em;
	background: radial-gradient(ellipse at center, var(--btn-bg-light) 0%, var(--btn-bg-dark) 100%);
	color: var(--btn-text);

	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	outline: none;
	-webkit-font-smoothing: antialiased;

	/* Base state: Flat, resting on the surface */
	transform: perspective(40em) rotateX(0deg) translateY(0);
	box-shadow:
		0 0 0 var(--btn-lip),
		0 0 0 hsla(0, 0%, 0%, 0);

	/* Smooth, spring-like transition for the 3D tilt */
	transition:
		transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);

	span {
		position: relative;
		z-index: 1;
	}

	&:hover {
		/* Perspective is required to make the rotateX look 3D */
		transform: perspective(40em) rotateX(30deg) translateY(0);

		/* The solid 3D extrusion (0.4em) + an ambient drop shadow */
		box-shadow:
			0 0.4em 0 var(--btn-lip),
			0 0.8em 1em hsla(0, 0%, 0%, 0.3);
	}

	&:active {
		/* Translates downward on the Y axis, simulating physical pressure */
		transform: perspective(40em) rotateX(30deg) translateY(0.2em);

		/* The 3D lip shrinks from 0.4em to 0.2em */
		box-shadow:
			0 0.2em 0 var(--btn-lip),
			0 0.4em 0.5em hsla(0, 0%, 0%, 0.3);
	}
}

div.pushdown-btn-wrapper {
	width: 16em; /* Changed from 80% to fit popup layout */
	display: inline-flex;
	justify-content: center;
	border-radius: 0.2em;
	outline: 0.125em solid var(--main-clr);

	button.pushdown {
		border: none;
		border-radius: 0.54em;
		padding: 0.8em;
		display: flex;
		align-items: center;
		gap: 0.5em;
		width: 100%;
		font-weight: 700;
		color: white;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		translate: -2% -12%; /* Reduced offset slightly to keep within container */
		transition: translate 200ms ease-out;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
			background-image: linear-gradient(to right, #fc00ff 0%, #00dbde 51%, #fc00ff 100%);
			background-size: 200% auto;
			transition: background-position 300ms ease-out;
		}

		&:hover {
			translate: 0 0;
			&::after {
				background-position: right center;
			}
		}

		&:active {
			transform: scale(0.98);
		}
	}
}