@use "../../themes/ametrine/sass/abstracts/functions" as *;

#title {
	--shift: 0.1875rem;
	display: block;
	transition: var(--transition-bezier);
	margin-block-start: 0;
	image-rendering: pixelated;
	width: min(rpx(497), 100%);

	&:hover {
		// Dashie!
		transform: translate(
			calc(var(--shift) * 3),
			calc(calc(var(--shift) * -1) * 3)
		);
		filter: drop-shadow(calc(var(--shift) * -1) var(--shift) 0 #1b98d1)
			drop-shadow(calc(var(--shift) * -1) var(--shift) 0 #fde85f)
			drop-shadow(calc(var(--shift) * -1) var(--shift) 0 #ec4141);

		#david-lapshin {
			background-color: #9bdbf5;
		}
	}

	&:active {
		// 20% cooler
		transform: translate(
			calc(calc(var(--shift) * -1) * 3),
			calc(calc(var(--shift) * -1) * 3)
		);
		filter: drop-shadow(var(--shift) var(--shift) 0 #1b98d1)
			drop-shadow(var(--shift) var(--shift) 0 #fde85f)
			drop-shadow(var(--shift) var(--shift) 0 #ec4141);

		#david-lapshin {
			background-color: #9bdbf5;
		}
	}

	#david-lapshin {
		--mask: url("header.gif");
		-webkit-user-select: none;
		-webkit-mask-image: var(--mask);
		-webkit-mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-image: var(--mask);
		mask-size: contain;
		mask-repeat: no-repeat;
		transition: var(--transition-bezier);
		margin: 0;
		background-color: var(--accent-color);
		aspect-ratio: 497 / 113; // Proper height regardless of the width
		width: 100%;
		overflow: hidden; // Make aspect ratio set above work
		color: transparent;
		user-select: none;
		text-decoration: none;

		@media (prefers-reduced-motion) {
			--mask: url("header-static.gif");
		}
	}

	@media only screen and (max-width: 944px) {
		margin: 2rem auto 1rem;
	}
}
