/* Held drawings preserve the original cut-paper tilt. */
@keyframes paper-wiggle {
	0%,
	100% {
		rotate: 0deg;
		translate: 0 0;
	}
	13% {
		rotate: -0.7deg;
		translate: -0.6px 0.3px;
	}
	31% {
		rotate: 0.5deg;
		translate: 0.7px -0.4px;
	}
	48% {
		rotate: -0.3deg;
		translate: 0 0.5px;
	}
	73% {
		rotate: 0.6deg;
		translate: -0.3px 0;
	}
	89% {
		rotate: -0.2deg;
		translate: 0.3px -0.2px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html.is-final .paper.is-wiggling::before,
	html.is-final .hl.is-wiggling::before,
	html.is-final .tape.is-wiggling,
	html.is-final .tag.is-wiggling {
		animation: paper-wiggle 760ms steps(1, end) 1;
	}

	html.is-final .paper:nth-child(3n).is-wiggling::before {
		animation-duration: 890ms;
	}
	html.is-final .paper:nth-child(3n + 1).is-wiggling::before {
		animation-duration: 670ms;
	}

	@media (hover: hover) {
		html.is-final .paper:hover::before,
		html.is-final .hl:hover::before,
		html.is-final .tag:hover,
		html.is-final .tape:hover {
			animation: paper-wiggle 640ms steps(1, end) 1;
		}
	}

	html.is-final .paper:focus-within::before {
		animation: paper-wiggle 640ms steps(1, end) 1;
	}

	.btn,
	.opem-card {
		transition-timing-function: steps(3, end);
	}
}

.paper::before,
.tape,
.hl::before {
	pointer-events: none;
}
.paper:focus-visible,
.btn:focus-visible {
	outline: 3px solid var(--cobalt);
	outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.btn:hover,
	.opem-card:hover {
		transform: none;
	}
}