/* ==========================================================================
   Luxe Atelier — Brand Animation CSS
   The animated purple → gold → emerald gradient used across headings,
   the logo/site title, and buttons. Exposed to the Block Editor as
   registered Block Styles (see inc/block-styles.php) so editors can
   apply ".is-style-luxe-gradient-text" to any Heading, Paragraph, or
   Button block without touching code.
   ========================================================================== */

@keyframes luxe-gradient-shift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/*
 * Note on color choices: these three stops are deliberately brighter
 * than their equivalent palette swatches (royal-purple-light,
 * metallic-gold, emerald-green-light). Text rendered with
 * background-clip:text needs every phase of the animation to clear
 * WCAG AA (4.5:1) against the page background — the standard palette
 * tones are tuned for solid fills/borders, not for text legibility
 * mid-animation, and testing showed the purple and emerald phases
 * dipped as low as 2.6–2.9:1 with the original values. This style is
 * intended for use on neutral rich-black/charcoal surfaces only —
 * avoid applying it on the emerald-mist or luxe-brand-gradient
 * section backgrounds, where a solid high-contrast color (crisp
 * white or metallic gold) should be used for headings instead.
 */
.is-style-luxe-gradient-text {
	background: linear-gradient(
		115deg,
		#a873d1 0%,
		#c9a44c 35%,
		#22a37a 70%,
		#a873d1 100%
	);
	background-size: 300% 300%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: luxe-gradient-shift 8s ease-in-out infinite;
}

/* Buttons need a solid fallback + gradient background rather than text-clip. */
.is-style-luxe-gradient-button .wp-block-button__link,
a.wp-block-button__link.is-style-luxe-gradient-button {
	background: linear-gradient(
		115deg,
		var(--wp--preset--color--royal-purple) 0%,
		var(--wp--preset--color--metallic-gold) 50%,
		var(--wp--preset--color--emerald-green) 100%
	);
	background-size: 250% 250%;
	animation: luxe-gradient-shift 6s ease-in-out infinite;
	color: var(--wp--preset--color--crisp-white);
	border: none;
}

.is-style-luxe-gradient-button .wp-block-button__link:hover {
	background-position: 100% 50%;
	color: var(--wp--preset--color--crisp-white);
}

/* Animated border accent, e.g. for feature cards / CTA panels. */
.is-style-luxe-glow-border {
	position: relative;
	border: 1px solid transparent;
	background-clip: padding-box;
}

.is-style-luxe-glow-border::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(
		115deg,
		var(--wp--preset--color--royal-purple-light),
		var(--wp--preset--color--metallic-gold),
		var(--wp--preset--color--emerald-green-light)
	);
	background-size: 300% 300%;
	animation: luxe-gradient-shift 8s ease-in-out infinite;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Elegant page-load fade-in. Runs once per page load via CSS animation
   (no JS needed), so there's no flash-of-unstyled-content risk. */
@keyframes luxe-page-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

body {
	animation: luxe-page-fade-in 0.5s ease both;
}

@media (prefers-reduced-motion: reduce) {
	body {
		animation: none;
	}
}

/* Logo lockup wrapper, used in parts/header.html. */
.luxe-logo-text {
	font-family: var(--wp--preset--font-family--heading-serif);
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* Elegant hover lift for interactive cards used in product/gallery patterns. */
.luxe-hover-lift {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.luxe-hover-lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
	.is-style-luxe-gradient-text,
	.is-style-luxe-gradient-button .wp-block-button__link,
	.is-style-luxe-glow-border::before {
		animation: none;
		background-position: 0% 50%;
	}

	.luxe-hover-lift:hover {
		transform: none;
	}
}