/* Scampers the gecko (inc/scampers.php). Where he goes is decided in
   assets/js/scampers.js; this file draws him and the note he leaves. */

/* ---- Scampers ---- */

/* The script moves him by his hips (the transform origin), measured off the drawing. */
.rhr-scampers {
	position: fixed;
	z-index: 60;
	top: 0;
	left: 0;
	display: block;
	width: clamp(110px, 12vw, 200px);
	aspect-ratio: 685 / 446;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	transform-origin: 43.7% 40.7%;
	-webkit-tap-highlight-color: transparent;
}

.rhr-scampers[hidden] {
	display: none;
}

.rhr-scampers:focus-visible {
	outline-offset: 0;
}

/* The drawing is five frames side by side: as drawn, then four steps of his scamper. */
.rhr-scampers__frames {
	display: block;
	width: 500%;
	height: 100%;
	background: url(../img/scampers.svg) 0 0 / 100% 100% no-repeat;
}

.rhr-scampers.is-running .rhr-scampers__frames {
	animation: rhr-scampers-run 0.36s steps(4) infinite;
}

@keyframes rhr-scampers-run {
	from {
		transform: translateX(-20%);
	}

	to {
		transform: translateX(-100%);
	}
}

/* ---- The note when he is caught ---- */

.rhr-scampers-note {
	width: min(24em, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0.7em 1em 0.9em;
	border: 2.5px solid var(--ink);
	border-radius: 12px 225px 12px 255px / 255px 12px 225px 12px;
	/* --paper-bg's picture would be looked for beside this file, so the paper is spelled out. */
	background: var(--paper) url(../img/notebook-paper-texture.jpg) 0 0 / 384px 384px;
	box-shadow: 4px 6px 0 var(--lift);
	color: var(--ink);
	font: inherit;
	text-align: center;
	transform: rotate(-0.6deg);
}

.rhr-scampers-note::backdrop {
	background: rgba(10, 12, 18, 0.35);
}

.rhr-scampers-note__art {
	display: block;
	width: 72%;
	height: auto;
	margin: 0 auto 0.2em;
	aspect-ratio: 685 / 446;
	object-fit: cover;
	object-position: 0 50%;
}

.rhr-scampers-note__title {
	margin: 0;
	font-size: 1.25em;
	line-height: 1.15;
}

.rhr-scampers-note__text {
	margin: 0.3em 0 0.7em;
	font-size: 0.95em;
	line-height: 1.25;
}

.rhr-scampers-note__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}

/* Readers who ask for less motion get him standing still: the script only fades him in and out. */
@media (prefers-reduced-motion: reduce) {
	.rhr-scampers.is-running .rhr-scampers__frames {
		animation: none;
	}
}

@media print {
	.rhr-scampers,
	.rhr-scampers-note {
		display: none !important;
	}
}