@keyframes wobble {
	from {
		transform: rotate(-2deg);
	}

	to {
		transform: rotate(2deg);
	}
}

.competition-header {
	background-position-x: 65%;

	@media only screen and (max-width: 580px) {
		background-position-x: 75%;
	}

	&__heading {
		font-family: $font-family-headings;
		font-size: 4.8rem;
		text-shadow: $text-shadow-color;
		line-height: 100%;

		opacity: 0;
	}

	&__subheading {
		font-family: $font-family-headings;
		font-size: 3.2rem;
		text-shadow: $text-shadow-grey;
		line-height: 100%;

		opacity: 0;
	}

	&__logo {
		position: absolute;
		left: -120px;
		bottom: -120px;

		height: 580px;

		filter: drop-shadow($shadow-grey-distracted);
		opacity: 0.25;
		transform: rotate(-15deg) translateX(0);
		animation: headerLogo 2.4s ease-out;

		@media only screen and (max-width: 580px) {
			height: 450px;
		}
	}
}

.competition-heading {
	font-family: $font-family-headings;
	font-size: 4.2rem;
	text-shadow: $text-shadow-grey;
}

.competition-content {
	font-family: $font-family-headings;

	ul {
		list-style: inside;
		text-align: left !important;

		padding-left: 2rem;
	}
}

.competition-video-plyr {
	position: relative !important;
	height: 48rem !important;
	aspect-ratio: 9 / 16 !important;
	border-radius: 12px !important;
	overflow: visible !important;
	box-shadow: 0px 0px 300px 170px rgba(219, 26, 48, 0.25);

	&::before {
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-3px, -3px);

		width: calc(100% + 6px);
		height: calc(100% + 6px);

		background-image: linear-gradient(var(--a), $color-primary-light, $color-primary-dark);

		content: "";
		border-radius: 12px;
		animation: videoBorder 3s linear infinite;
	}
}

.animation-wobble {
	animation: wobble 1s ease-out infinite alternate;

	&:hover {
		animation-play-state: paused;
	}
}
