/*
 * Motion: progressive enhancement only.
 *
 * Everything here is wrapped in prefers-reduced-motion: no-preference, so people
 * who ask for less motion get a fully static page. Content is never hidden:
 * reveal animations start at 35% opacity and finish at 100%, and browsers
 * without scroll-driven animations (animation-timeline) simply show the
 * content. No JavaScript is used.
 */

@media (prefers-reduced-motion: no-preference) {

	/* Buttons: small lift on hover / keyboard focus. */
	.wp-block-button__link {
		transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.1, 1), box-shadow 0.25s;
	}

	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible {
		transform: translateY(-2px);
	}

	/* Hero sunrise graphics: rise and fade in on load. */
	img[src$="hero-sunrise.svg"],
	img[src$="hero-sunrise-home.svg"] {
		animation: sunrise-art-in 1.6s cubic-bezier(0.2, 0.7, 0.1, 1) both;
	}

	/* Scroll reveal for repeated items, driven by scroll position. */
	@supports (animation-timeline: view()) {
		.wp-block-post-content :is(
			.is-style-card,
			.is-style-card-flush,
			.is-style-card-dark,
			.is-style-stat,
			.is-style-steps > *,
			.is-style-pill,
			.wp-block-post-template > li,
			.wp-block-accordion,
			.wp-block-table.is-style-compare
		) {
			animation: reveal-up linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
	}
}

@keyframes sunrise-art-in {
	from {
		opacity: 0;
		transform: translateY(28px) scale(0.96);
	}

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

@keyframes reveal-up {
	from {
		opacity: 0.35;
		transform: translateY(40px);
	}

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

/*
 * Technology strip: a slow, endless row of technology names.
 *
 * On the front end a filter (functions.php) wraps the editable items in one
 * ".sunrise-marquee__set" and adds a second, aria-hidden copy, so the row can loop
 * without a gap by sliding exactly half its width. The editor only ever sees the one
 * editable list. Pauses while the pointer is over it. For people who ask for less
 * motion nothing moves: the copy is hidden and the names wrap in a centred row.
 */
.sunrise-marquee__set {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}

.sunrise-marquee__set > p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sunrise-marquee__set[aria-hidden="true"] {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-group.sunrise-marquee__track {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0;
		width: max-content;
		animation: sunrise-marquee 38s linear infinite;
	}

	.sunrise-marquee__set {
		flex: none;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--60);
		padding-inline-end: var(--wp--preset--spacing--60);
	}

	.sunrise-marquee:hover .sunrise-marquee__track {
		animation-play-state: paused;
	}

	html[dir="rtl"] .wp-block-group.sunrise-marquee__track {
		animation-name: sunrise-marquee-rtl;
	}
}

@keyframes sunrise-marquee {
	to {
		transform: translateX(-50%);
	}
}

@keyframes sunrise-marquee-rtl {
	to {
		transform: translateX(50%);
	}
}