/*!
 * Surplus GY Runner scene loader.
 *
 * Composition:
 *
 *   - The PNG (.rgy-surplus-loader__image) provides the runner, swoosh and
 *     package. A CSS mask-image punches holes where the printed clock hands
 *     and pivot dot are, so we can replace them with our own animated SVG
 *     hands without leaving ghost pixels behind.
 *
 *   - .rgy-surplus-loader__clock is a transparent SVG positioned over the
 *     clock area. Inside it sit a thick hour hand, a longer minute hand,
 *     and a pivot dot — all rotating clockwise on different periods so the
 *     clock looks like it's actually winding.
 *
 *   - .rgy-surplus-loader__dust × 4 are foot-strike puffs that pop in
 *     sequence at the very bottom of the runner. They read as kicked-up
 *     ground dust and give the feet a sense of running.
 *
 *   - .rgy-surplus-loader__cloud is the classic cartoon "left behind" puff
 *     that sits on the right (he runs to the left) and pulses in/out.
 *
 *   - .rgy-surplus-loader__line × 5 are speed/wind streaks that fly past
 *     and fade — wider, more saturated and more frequent than before so
 *     the wind reads clearly even on small viewers.
 *
 * Brand orange used everywhere: #f46622.
 */

.rgy-tour-loader--surplus {
	background: rgba(0, 0, 0, 0.42);
}

.rgy-surplus-loader {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(32vw, 220px);
	min-width: 120px;
	pointer-events: none;
}

.rgy-surplus-loader__visual {
	position: relative;
	width: 100%;
	animation: rgy-surplus-run 0.85s ease-in-out infinite;
	transform-origin: 50% 82%;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18));
}

/* ---------------------------------------------------------------------------
 * The brand PNG. We mask out the painted-on clock hands using an SVG data
 * URL so we can draw our own moving ones over the same spot.
 *
 * The path uses fill-rule="evenodd" — the outer 100×100 rectangle is filled
 * (so the rest of the image stays visible) and the two small inner
 * rectangles become subtractive holes (transparent → hidden in alpha mode).
 * ------------------------------------------------------------------------- */
.rgy-surplus-loader__image {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image:
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='black' fill-rule='evenodd' d='M0 0H100V100H0ZM55.5 11.5H60V36H55.5ZM57.5 31.5H72V37H57.5Z'/%3E%3C/svg%3E");
	mask-image:
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='black' fill-rule='evenodd' d='M0 0H100V100H0ZM55.5 11.5H60V36H55.5ZM57.5 31.5H72V37H57.5Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ---------------------------------------------------------------------------
 * Clock — drawn directly into the area the mask just emptied. Hour hand is
 * thicker and slower, minute hand is longer and faster, pivot dot anchors
 * both. Same brand orange as the rest of the artwork.
 *
 * Sized at 50% of the loader width so the hands have room for a full sweep
 * without clipping. Centred on (58%, 35%) of the loader to land exactly on
 * the painted clock pivot.
 * ------------------------------------------------------------------------- */
.rgy-surplus-loader__clock {
	position: absolute;
	left: 58%;
	top: 35%;
	width: 50%;
	height: 50%;
	transform: translate(-50%, -50%);
	overflow: visible;
	pointer-events: none;
}

.rgy-surplus-loader__hand {
	stroke: #f46622;
	stroke-linecap: round;
	transform-origin: 50px 50px;
	filter: drop-shadow(0 0 1px rgba(244, 102, 34, 0.55));
}

.rgy-surplus-loader__hand--hour {
	stroke-width: 5;
	animation: rgy-surplus-hour 14s linear infinite;
}

.rgy-surplus-loader__hand--minute {
	stroke-width: 3.5;
	animation: rgy-surplus-minute 2.4s linear infinite;
}

.rgy-surplus-loader__pivot {
	fill: #f46622;
}

@keyframes rgy-surplus-minute {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes rgy-surplus-hour {
	/* Start at 90deg so visually it begins around the 3 o'clock position
	   that the original printed hour hand was in. */
	from { transform: rotate(90deg); }
	to   { transform: rotate(450deg); }
}

/* ---------------------------------------------------------------------------
 * Foot-strike dust puffs — at the very bottom of the runner. Four staggered
 * puffs spaced across the foot path so it feels like he's actually striking
 * the ground rhythmically rather than just bouncing in place.
 * ------------------------------------------------------------------------- */
.rgy-surplus-loader__dust {
	position: absolute;
	bottom: 0;
	width: 14%;
	height: 5%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(244, 102, 34, 0.75) 0%, rgba(244, 102, 34, 0) 65%);
	opacity: 0;
	animation: rgy-surplus-dust 0.85s ease-out infinite;
	pointer-events: none;
	filter: blur(0.6px);
}

.rgy-surplus-loader__dust--1 {
	left: 6%;
	width: 16%;
	animation-delay: 0s;
}

.rgy-surplus-loader__dust--2 {
	left: 22%;
	width: 14%;
	animation-delay: 0.18s;
}

.rgy-surplus-loader__dust--3 {
	left: 38%;
	width: 18%;
	animation-delay: 0.36s;
}

.rgy-surplus-loader__dust--4 {
	left: 56%;
	width: 12%;
	animation-delay: 0.54s;
}

@keyframes rgy-surplus-dust {
	0% {
		transform: scale(0.3) translateY(0);
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	100% {
		transform: scale(2) translateY(-2px);
		opacity: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Cartoon-style dust cloud left behind. Built from layered radial gradients
 * so the silhouette looks bumpy / cloud-like instead of a single oval.
 * The cloud lives behind the runner (right side of the loader because he
 * runs left), pulses in scale and opacity, and drifts slightly as if it's
 * still settling.
 * ------------------------------------------------------------------------- */
.rgy-surplus-loader__cloud {
	position: absolute;
	right: 4%;
	bottom: 6%;
	width: 36%;
	height: 26%;
	pointer-events: none;
	background:
		radial-gradient(circle at 18% 65%, rgba(244, 102, 34, 0.55) 0%, rgba(244, 102, 34, 0) 38%),
		radial-gradient(circle at 38% 35%, rgba(244, 102, 34, 0.7)  0%, rgba(244, 102, 34, 0) 42%),
		radial-gradient(circle at 60% 25%, rgba(244, 102, 34, 0.55) 0%, rgba(244, 102, 34, 0) 38%),
		radial-gradient(circle at 78% 50%, rgba(244, 102, 34, 0.6)  0%, rgba(244, 102, 34, 0) 40%),
		radial-gradient(circle at 50% 78%, rgba(244, 102, 34, 0.5)  0%, rgba(244, 102, 34, 0) 42%),
		radial-gradient(circle at 25% 30%, rgba(244, 102, 34, 0.5)  0%, rgba(244, 102, 34, 0) 36%),
		radial-gradient(circle at 88% 78%, rgba(244, 102, 34, 0.45) 0%, rgba(244, 102, 34, 0) 38%);
	filter: blur(2px);
	animation: rgy-surplus-cloud 1.6s ease-in-out infinite;
	transform-origin: 70% 100%;
}

@keyframes rgy-surplus-cloud {
	0% {
		transform: translateX(6%) scale(0.85);
		opacity: 0.55;
	}
	50% {
		transform: translateX(-2%) scale(1.05);
		opacity: 1;
	}
	100% {
		transform: translateX(6%) scale(0.85);
		opacity: 0.55;
	}
}

/* ---------------------------------------------------------------------------
 * Speed / wind streaks. Five lines, longer and brighter than the previous
 * pass. Different lengths, vertical positions and stagger times keep them
 * from looking metronomic; some pass through the runner, some trail off
 * the right side, all converge on the brand orange.
 * ------------------------------------------------------------------------- */
.rgy-surplus-loader__line {
	position: absolute;
	height: 4px;
	border-radius: 3px;
	background: linear-gradient(to left, rgba(244, 102, 34, 0) 0%, #f46622 50%, rgba(244, 102, 34, 0) 100%);
	opacity: 0;
	animation: rgy-surplus-wind 1.1s ease-out infinite;
	pointer-events: none;
	box-shadow: 0 0 6px rgba(244, 102, 34, 0.45);
}

.rgy-surplus-loader__line--1 {
	top: 30%;
	right: -4%;
	width: 32%;
	animation-delay: 0s;
}

.rgy-surplus-loader__line--2 {
	top: 42%;
	right: -8%;
	width: 40%;
	height: 5px;
	animation-delay: 0.18s;
}

.rgy-surplus-loader__line--3 {
	top: 54%;
	right: -2%;
	width: 30%;
	animation-delay: 0.36s;
}

.rgy-surplus-loader__line--4 {
	top: 64%;
	right: -6%;
	width: 36%;
	animation-delay: 0.54s;
}

.rgy-surplus-loader__line--5 {
	top: 74%;
	right: 2%;
	width: 24%;
	height: 3px;
	animation-delay: 0.72s;
}

@keyframes rgy-surplus-wind {
	0% {
		transform: translateX(-30%) scaleX(0.4);
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	60% {
		opacity: 1;
	}
	100% {
		transform: translateX(70%) scaleX(1.2);
		opacity: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Running shake. Slightly more energetic than v1.3.0 so the gait reads as
 * an actual run rather than a gentle bob.
 * ------------------------------------------------------------------------- */
@keyframes rgy-surplus-run {
	0%,
	100% {
		transform: translate3d(-9px, 0, 0) rotate(-2.2deg);
	}
	25% {
		transform: translate3d(-3px, -7px, 0) rotate(-0.4deg);
	}
	50% {
		transform: translate3d(9px, -2px, 0) rotate(2.2deg);
	}
	75% {
		transform: translate3d(3px, -8px, 0) rotate(0.4deg);
	}
}

/* ---------------------------------------------------------------------------
 * Reduced-motion users — drop the bouncing shake and the streaks, slow the
 * clock hands so the loader is calm but the brand still reads.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rgy-surplus-loader__visual {
		animation: none;
	}
	.rgy-surplus-loader__hand--minute {
		animation-duration: 8s;
	}
	.rgy-surplus-loader__hand--hour {
		animation-duration: 60s;
	}
	.rgy-surplus-loader__dust,
	.rgy-surplus-loader__line,
	.rgy-surplus-loader__cloud {
		animation: none;
		opacity: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Responsive sizing.
 * ------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
	.rgy-surplus-loader {
		width: min(42vw, 200px);
	}
}

@media only screen and (max-width: 640px) {
	.rgy-surplus-loader {
		width: min(54vw, 185px);
		min-width: 100px;
	}
}