/**
 * Coming-soon products (buy mode "coming_soon").
 *
 * The "Notify me" buttons (product cards and the purchase card form) keep
 * the theme's button shape and get two rings, like the Hattrick crest: an
 * outer ring in the product's gradient that turns slowly, then a white one,
 * then the dark fill. The gradient ring is the border box of a conic
 * gradient under an opaque padding-box fill; the white ring is an inset
 * shadow over the fill. On hover the white ring fades into the dark fill,
 * leaving the gradient ring around it. --dfs-notify-angle is registered so
 * the ring can turn; browsers that can't animate registered properties show
 * the same ring, standing still.
 *
 * Colors: Hattrick's accent #0033FF, accent-4 #9E00FF and accent-2 #FF00CC
 * (hattrick/theme.json).
 */

@property --dfs-notify-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@keyframes dfs-notify-turn {
	to {
		--dfs-notify-angle: 360deg;
	}
}

.dfs-notify-btn .wp-block-button__link,
.danfisher-purchase-card .dfs-newsletter--product button[type="submit"] {
	--dfs-notify-fill: var(--wp--preset--color--foreground-dark, #00020b);
	border: 2px solid transparent;
	background:
		linear-gradient(var(--dfs-notify-fill), var(--dfs-notify-fill)) padding-box,
		conic-gradient(from var(--dfs-notify-angle), #0033ff, #9e00ff, #ff00cc, #9e00ff, #0033ff) border-box;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--background, #fff);
	color: var(--wp--preset--color--background, #fff);
	animation: dfs-notify-turn 8s linear infinite;
	transition: box-shadow 0.3s ease, transform 0.15s ease;
}

/* The ring adds 4px of height; the card buttons have 0.75rem padding, so
   2px less keeps Notify me level with the other cards' buttons. The theme's
   card buttons run 0.15s transitions; the ring fade gets its own 0.3s. */
.danfisher-product-card .wp-block-button.dfs-notify-btn:not(.is-style-danfisher-link) .wp-block-button__link {
	padding-top: calc(0.75rem - 2px);
	padding-bottom: calc(0.75rem - 2px);
	transition: box-shadow 0.3s ease, transform 0.15s ease;
}

/* On product cards the theme's hover rule (dark primary on light surfaces)
   lifts the button and adds a drop shadow; keep the lift, drop the shadow.
   The selector has to outrank that rule. */
.danfisher-product-card .wp-block-button.dfs-notify-btn:not(.is-style-danfisher-link) .wp-block-button__link:hover,
.danfisher-product-card .wp-block-button.dfs-notify-btn:not(.is-style-danfisher-link) .wp-block-button__link:focus-visible,
.danfisher-purchase-card .dfs-newsletter--product button[type="submit"]:hover,
.danfisher-purchase-card .dfs-newsletter--product button[type="submit"]:focus-visible {
	box-shadow: inset 0 0 0 2px var(--dfs-notify-fill);
}

@media (prefers-reduced-motion: reduce) {
	.dfs-notify-btn .wp-block-button__link,
	.danfisher-purchase-card .dfs-newsletter--product button[type="submit"] {
		animation: none;
	}
}

/* The purchase card zeroes paragraph margins; give the form's own lines
   their spacing back. */
.danfisher-purchase-card .dfs-newsletter--product .dfs-newsletter__note {
	margin-top: 0.875rem;
}

.danfisher-purchase-card .dfs-newsletter--product .dfs-newsletter__status {
	margin-bottom: 1rem;
}