.button-pulse {
	button {
		background: var(--bg-color);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.button__wrapper:hover .pulsing {
		&:before {
			animation: pulsing 0.2s linear infinite;
		}
		&:after {
			animation: pulsing1 0.2s linear infinite;
		}
	}
}

.pulsing {
	width: 99%;
	height: 99%;
	border-radius: 50px;
	z-index: 1;
	position: relative;

	&:before,
	&:after {
		width: 100%;
		height: 100%;
		border: inherit;
		top: 0;
		left: 0;
		z-index: 0;
		background: #fff;
		border-radius: inherit;
		animation: pulsing 2.5s linear infinite;
	}
	&:after {
		animation: pulsing1 2.5s linear infinite;
	}
}

@keyframes pulsing {
	0% {
		opacity: 1;
		transform: scaleY(1) scaleX(1);
	}
	20% {
		opacity: 0.5;
	}
	70% {
		opacity: 0.2;
		transform: scaleY(1.8) scaleX(1.4);
	}
	80% {
		opacity: 0;
		transform: scaleY(1.8) scaleX(1.4);
	}
	90% {
		opacity: 0;
		transform: scaleY(1) scaleX(1);
	}
}
@keyframes pulsing1 {
	0% {
		opacity: 1;
		transform: scaleY(1) scaleX(1);
	}
	20% {
		opacity: 0.5;
	}
	70% {
		opacity: 0.2;
		transform: scaleY(1.3) scaleX(1.15);
	}
	80% {
		opacity: 0;
		transform: scaleY(1.3) scaleX(1.15);
	}
	90% {
		opacity: 0;
		transform: scaleY(1) scaleX(1);
	}
}

.button-typewriter {
	button {
		width: 100%;
		height: 100%;
	}
	p {
		animation: typing 4s steps(12) infinite;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
	}
	.button__wrapper:hover p {
		animation: blink 0.3s infinite;
	}
}

@keyframes typing {
	0% {
		width: 0;
	}
	50% {
		width: 100%;
	}
	55%,
	65%,
	75% {
		opacity: 1;
	}
	60%,
	70% {
		opacity: 0;
	}
	80% {
		width: 100%;
	}
	100% {
		width: 0;
	}
}

.button-parrot {
	.parrot {
		position: absolute;
		width: 60px;
		text-align: center;
		animation: blink 0.8s infinite;
		color: transparent;
		&:before {
			content: "Click Me!";
		}
		&:nth-child(1) {
			top: -30px;
			left: -40px;
			font: 12px/1 "Margarine", sans-serif;
			transform: rotate(-20deg);
			animation-duration: 0.5s;
		}
		&:nth-child(2) {
			font: 12px/1 "Margarine", sans-serif;
			right: -40px;
			top: -20px;
			transform: rotate(15deg);
			animation-duration: 0.3s;
		}
		&:nth-child(3) {
			font: 16px/1 "Margarine", sans-serif;
			top: -60px;
			left: 15px;
			transform: rotate(10deg);
			animation-duration: 1s;
		}
		&:nth-child(4) {
			font: 18px/1 "Margarine", sans-serif;
			top: -70px;
			left: 95px;
			transform: rotate(2deg);
			animation-duration: 0.7s;
		}
		&:nth-child(5) {
			font: 14px/1 "Margarine", sans-serif;
			top: 80px;
			left: 105px;
			transform: rotate(-20deg);
			animation-duration: 0.8s;
		}
		&:nth-child(6) {
			font: 12px/1 "Margarine", sans-serif;
			top: 80px;
			left: 5px;
			transform: rotate(10deg);
			animation-duration: 1.2s;
		}
	}
	button:hover .parrot:before {
		content: "Do it!";
		width: 70px;
	}
}

@keyframes blink {
	25%,
	75% {
		color: transparent;
	}
	40%,
	60% {
		color: #fff;
	}
}

.button-hand button {
	&:before {
		content: "👇";
		font-size: 60px;
		transform: scaleX(-1);
		right: 0px;
		top: -68px;
		animation: up-down 1s infinite;
	}
	.hands {
		&:before,
		&:after {
			content: "👇";
			font-size: 40px;
			opacity: 0;
			transition: 0.4s ease-in-out;
		}
		&:before {
			transform: rotate(-60deg);
			left: -45px;
			top: -10px;
		}
		&:after {
			transform: rotate(170deg);
			right: 30px;
			top: 50px;
		}
	}
	&:hover .hands {
		&:before {
			opacity: 1;
			left: -35px;
		}
		&:after {
			opacity: 1;
			top: 40px;
		}
	}
}

@keyframes up-down {
	50% {
		margin-top: -20px;
	}
}

.button-100 {
	.emoji {
		position: absolute;
		top: -45px;
		left: 0;
		width: 35px;
		height: 35px;
		overflow: hidden;
		&:before {
			content: "💯";
			display: inline-block;
			animation: give-score 2.5s infinite;
			position: relative;
			top: 0;
		}
		&:nth-child(2) {
			left: 0;
			right: 0;
			margin: auto;
			&:before {
				animation: give-score 2.5s infinite 0.2s;
			}
		}
		&:nth-child(3) {
			left: auto;
			right: 0;
			&:before {
				animation: give-score 2.5s infinite 0.4s;
			}
		}
	}
	button:hover .emoji:before {
		content: "👏";
		transition: 0.5s ease;
	}
}

@keyframes give-score {
	30%,
	80% {
		top: 0;
	}
	40%,
	70% {
		top: 50px;
	}
}

.button-pressure {
	marquee {
		position: absolute;
		width: 90%;
		top: 125%;
		left: 5%;
		font: 18px/1 "Margarine", sans-serif;
		span {
			display: inline-block;
			height: 20px;
			&:not(:last-child) {
				margin-right: 130px;
			}
		}
	}
	button:before {
		content: "OMG YAS";
		transition: 0.5s ease;
		left: 0;
		right: 0;
		margin: auto;
		top: -15px;
		font-size: 12px;
		opacity: 0;
	}
	button:hover:before {
		animation: omg-yes 1s;
	}
}

.button-rainbow button {
	animation: rainbow 3s infinite, heartbeat 0.6s infinite;
	background: #c0392b;
	.rainbow {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		top: -40px;
		transition: 0.5s ease;
		opacity: 0;
		transform: rotate(0);
		&:before {
			content: "🌈";
			left: 0;
		}
	}
	&:hover .rainbow {
		opacity: 1;
		animation: rotate-nonstop 0.2s infinite;
	}
	+ .name {
		color: #444;
	}
}

@keyframes rotate-nonstop {
	50% {
		transform: rotate(92deg);
	}
}

@keyframes omg-yes {
	50% {
		opacity: 1;
	}
	100% {
		top: -50px;
	}
}

@keyframes rainbow {
	0% {
		background: #1abc9c;
	}
	10% {
		background: #2ecc71;
	}
	20% {
		background: #3498db;
	}
	30% {
		background: #9b59b6;
	}
	40% {
		background: #e74c3c;
	}
	50% {
		background: #e67e22;
	}
	60% {
		background: #f1c40f;
	}
	70% {
		background: #2c3e50;
	}
	80% {
		background: #9b59b6;
	}
}

.button-jittery {
	animation: jittery 4s infinite;
	&:hover {
		animation: heartbeat 0.2s infinite;
	}
}

@keyframes jittery {
	5%,
	50% {
		transform: scale(1);
	}
	10% {
		transform: scale(0.9);
	}
	15% {
		transform: scale(1.15);
	}
	20% {
		transform: scale(1.15) rotate(-5deg);
	}
	25% {
		transform: scale(1.15) rotate(5deg);
	}
	30% {
		transform: scale(1.15) rotate(-3deg);
	}
	35% {
		transform: scale(1.15) rotate(2deg);
	}
	40% {
		transform: scale(1.15) rotate(0);
	}
}

@keyframes heartbeat {
	50% {
		transform: scale(1.1);
	}
}

.radio-container {
    text-align: center;
}

.radio-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #3f1201;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.radio-btn:hover {
    background-color: #270e02;
}

.radio-audio {
    margin-top: 20px;
}

.radio-hidden {
    display: none;
}