/**
 * A hero fades slowly between brand colours: each one settles for 5 seconds, then
 * takes 4 seconds to fade into the next. Add the class db-colour-cycle to a Group
 * to use it (homepage and Thank You).
 *
 * Core's colour classes use !important, which beats a CSS animation, so the
 * colours are animated on custom properties and applied with stronger selectors.
 * The torn edge inherits the Group's background, so it follows along. The first
 * button takes a colour that stands out from each background: pink on blue and
 * teal, purple on pink and yellow, orange on purple. Its text stays white
 * throughout, as does the hero's own white text. On yellow the white button's
 * text turns purple.
 *
 * Yellow is the palette's orange preset. Teal is a little deeper than the
 * palette's so white text stays readable.
 * Browsers without @property, and people who prefer reduced motion, stay blue.
 */
@property --db-cycle {
	syntax: "<color>";
	inherits: true;
	initial-value: #0084d5;
}

@property --db-cycle-accent {
	syntax: "<color>";
	inherits: true;
	initial-value: #e30d7e;
}

@property --db-cycle-link {
	syntax: "<color>";
	inherits: true;
	initial-value: #0084d5;
}

@keyframes db-colour-cycle {
	0%, 11.11% {
		--db-cycle: #0084d5;
		--db-cycle-accent: #e30d7e;
		--db-cycle-link: #0084d5;
	}

	20%, 31.11% {
		--db-cycle: #e30d7e;
		--db-cycle-accent: #571ad1;
		--db-cycle-link: #e30d7e;
	}

	40%, 51.11% {
		--db-cycle: #f9a72b;
		--db-cycle-accent: #571ad1;
		--db-cycle-link: #571ad1;
	}

	60%, 71.11% {
		--db-cycle: #008a80;
		--db-cycle-accent: #e30d7e;
		--db-cycle-link: #008a80;
	}

	80%, 91.11% {
		--db-cycle: #571ad1;
		--db-cycle-accent: #f9a72b;
		--db-cycle-link: #571ad1;
	}

	100% {
		--db-cycle: #0084d5;
		--db-cycle-accent: #e30d7e;
		--db-cycle-link: #0084d5;
	}
}

.wp-block-group.db-colour-cycle {
	animation: db-colour-cycle 45s ease-in-out infinite;
	background-color: var(--db-cycle) !important;
}

.wp-block-group.db-colour-cycle .wp-block-button__link.has-pink-background-color {
	background-color: var(--db-cycle-accent) !important;
}

.wp-block-group.db-colour-cycle .wp-block-button__link.has-base-background-color {
	color: var(--db-cycle-link) !important;
}

/*
 * A colour transition here would fight the animation on every frame. It needs
 * !important because the shared button rule in main.css is very specific.
 */
.wp-block-group.db-colour-cycle .wp-block-button__link {
	transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.db-colour-cycle {
		animation: none;
	}
}