.socnav {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	right: 20px;
	bottom: 20px;
}
.socnav .socnav-btn {
	all: unset;
	cursor: pointer;
	border-radius: 50%;
	animation: pulse-shadow 2s infinite;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.socnav .socnav-btn:hover {
	animation-play-state: paused;
	transform: scale(1.05);
}
.socnav .socnav-btn svg {
	display: block;
	width: 70px;
	height: 70px;
}
.socnav .socnav-list {
	position: absolute;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transform: scale(0);
	transform-origin: bottom;
	opacity: 0;
	transition:
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.35s ease,
		bottom 0.35s ease;
}
.socnav .socnav-link {
	text-decoration: none;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.socnav .socnav-link svg {
	display: block;
	width: 56px;
	height: 56px;
}
.socnav .socnav-link:hover {
	transform: scale(1.08);
}
.socnav.show .socnav-list {
	transform: scale(1);
	opacity: 1;
	bottom: calc(100% + 20px);
}

@media (max-width: 767px) {
	.socnav .socnav-btn svg,
	.socnav .socnav-link svg {
		width: 50px;
		height: 50px;
	}
}

@keyframes pulse-shadow {
	0% {
		box-shadow: 0 0 0 0 rgba(119, 179, 212, 0.67);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(119, 179, 212, 0.15);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(119, 179, 212, 0.05);
	}
}