/* Games We Cover motion (1.4.0).
 *
 * Every animation for /games/ lives in this file and is scoped to
 * .gcdb-has-motion. To turn it all off, add
 *     add_filter( 'gcdb_motion', '__return_false' );
 * which stops this file from loading and drops the class. Visitors with
 * prefers-reduced-motion get none of it, because every rule sits inside
 * the no-preference query below.
 */
@media (prefers-reduced-motion: no-preference) {
	html:has(.gcdb-has-motion) {
		scroll-behavior: smooth;
	}

	/* Ambient: slow drift of the teal and green glow behind the tools. */
	.gcdb-has-motion .gcdb-dir__bar::before {
		content: "";
		position: absolute;
		inset: -40%;
		z-index: -1;
		background:
			radial-gradient(35% 45% at 30% 40%, color-mix(in srgb, var(--gcdb-teal) 16%, transparent), transparent 70%),
			radial-gradient(30% 40% at 70% 60%, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent), transparent 70%);
		animation: gcdb-drift 26s ease-in-out infinite alternate;
		pointer-events: none;
		will-change: transform;
	}

	/* Ambient: a soft sheen crosses the search field every few seconds. */
	.gcdb-has-motion .gcdb-dir__field::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--gcdb-teal) 22%, transparent) 50%, transparent 65%);
		transform: translateX(-100%);
		animation: gcdb-sheen 9s ease-in-out 1.2s infinite;
		pointer-events: none;
	}

	.gcdb-has-motion .gcdb-dir__field:focus-within::after {
		animation-play-state: paused;
		opacity: 0;
	}

	/* Ambient: a slow glow wave runs along the letter row. --i is the letter's
	   position among the visible letters and --n how many are visible (set in
	   PHP, renumbered by gcdb-dir.js when filters hide letters), so one cycle
	   is n steps plus a pause and the wave always reaches the last letter. */
	.gcdb-has-motion .gcdb-dir__letters a {
		animation: gcdb-letter-wave calc(var(--n, 22) * 0.22s + 2.2s) ease-in-out infinite;
		animation-delay: calc(var(--i, 0) * 0.22s + 0.8s);
		transition: background-color 0.2s, color 0.2s, transform 0.2s;
	}

	.gcdb-has-motion .gcdb-dir__letters a:hover,
	.gcdb-has-motion .gcdb-dir__letters a:focus-visible {
		animation: none;
		transform: translateY(-2px);
	}

	/* Load: rows rise in with a short stagger. */
	.gcdb-has-motion .gcdb-row {
		animation: gcdb-row-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
		animation-delay: calc(var(--i, 0) * 45ms);
		transition: background-color 0.2s;
		padding-right: 2.25rem;
	}

	.gcdb-has-motion .gcdb-dir__letter::after {
		transform-origin: left center;
		animation: gcdb-rule-in 0.8s ease-out both;
	}

	/* Ambient: letter tiles for games without art shift colour slowly. */
	.gcdb-has-motion .gcdb-row__initial {
		animation: gcdb-tile 16s ease-in-out infinite alternate;
		animation-delay: calc(var(--i, 0) * -1.7s);
	}

	/* Ambient: upcoming games keep a gentle pulse on their release dot. */
	.gcdb-has-motion .gcdb-row--upcoming .gcdb-row__fact--release dd::before {
		animation: gcdb-pulse 2.8s ease-out infinite;
	}

	/* Hover extra: thumbs ease in a touch, the title nudges right. */
	.gcdb-has-motion .gcdb-row__thumb img {
		transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.gcdb-has-motion .gcdb-row:hover .gcdb-row__thumb img,
	.gcdb-has-motion .gcdb-row:focus-within .gcdb-row__thumb img {
		transform: scale(1.06);
	}

	/* No transform on the title link: its ::after covers the row. */
	.gcdb-has-motion .gcdb-row::after {
		content: "\2192";
		position: absolute;
		top: 50%;
		right: 0.9rem;
		color: var(--gcdb-teal);
		font-weight: 700;
		opacity: 0;
		transform: translate(-6px, -50%);
		transition: opacity 0.2s, transform 0.25s;
		pointer-events: none;
	}

	.gcdb-has-motion .gcdb-row:hover::after,
	.gcdb-has-motion .gcdb-row:focus-within::after {
		opacity: 1;
		transform: translate(0, -50%);
	}

	/* A letter jump lands with a brief highlight on its heading. */
	.gcdb-has-motion .gcdb-dir__group:target .gcdb-dir__letter {
		animation: gcdb-target 1.4s ease-out;
	}
}

@keyframes gcdb-drift {
	0% {
		transform: translate3d(-6%, -4%, 0) rotate(0deg);
	}

	100% {
		transform: translate3d(6%, 5%, 0) rotate(8deg);
	}
}

@keyframes gcdb-sheen {
	0%,
	62% {
		transform: translateX(-100%);
	}

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

@keyframes gcdb-letter-wave {
	0%,
	18%,
	100% {
		box-shadow: 0 0 0 0 transparent;
		border-color: color-mix(in srgb, var(--gcdb-teal) 45%, transparent);
	}

	8% {
		box-shadow: 0 0 0.9rem -0.2rem color-mix(in srgb, var(--gcdb-teal) 70%, transparent);
		border-color: var(--gcdb-teal);
	}
}

@keyframes gcdb-row-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes gcdb-rule-in {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@keyframes gcdb-tile {
	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 100% 50%;
	}
}

@keyframes gcdb-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--gcdb-teal) 55%, transparent);
	}

	70%,
	100% {
		box-shadow: 0 0 0 0.45em transparent;
	}
}

@keyframes gcdb-target {
	0% {
		background: color-mix(in srgb, var(--gcdb-teal) 22%, transparent);
	}

	100% {
		background: transparent;
	}
}