/* The shop's swatches — one block of every style, side by side.

   Only the active style's file is on the page, but the shop shows all of
   them at once, so their block looks are copied here and loaded by the shop
   page alone. This file is the second home of every material: adding or
   editing a style's block means editing it here as well as in its own file.

   Only the resting block is copied — no palette, no place/clear effects,
   which a swatch never plays. Classic needs nothing: its swatch is the base
   `.blk` from app.css.

   Class and keyframe names are `swatch-*`, never the style file's own. The
   shop's preview board has one style file loaded beside this one, and a
   shared name would let whichever loaded last decide both. */

/* Shimmer — keep in step with .blk-shimmer in shimmer.css. */
@keyframes swatch-shimmer {
	from {
		transform: translateX(-140%);
	}

	to {
		transform: translateX(140%);
	}
}

.swatch-shimmer {
	--blk-rim: inset 0 0 0 1px color-mix(in srgb, var(--blk) 65%, black);
	--blk-inner: inset 0 0 14px -6px rgb(255 255 255 / 0.9);
	position: relative;
	overflow: hidden;
	background-color: var(--blk);
	background-image: linear-gradient(
		135deg,
		color-mix(in srgb, var(--blk) 76%, white) 0%,
		var(--blk) 38%,
		color-mix(in srgb, var(--blk) 86%, black) 70%,
		color-mix(in srgb, var(--blk) 84%, white) 100%
	);
}

.swatch-shimmer::after {
	content: '';
	position: absolute;
	inset: -30%;
	background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.55) 50%, transparent 62%);
	animation: swatch-shimmer 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.swatch-shimmer::after {
		content: none;
	}
}

/* Heartwood — keep in step with .blk-heartwood in heartwood.css. A swatch
   has no --blk-i, so the heart of the rings sits where cell 0 puts it. */
@keyframes swatch-hw-drift {
	0% {
		translate: -9% -7%;
		rotate: 0deg;
		opacity: 0.34;
	}

	50% {
		translate: 9% 7%;
		rotate: 4deg;
		opacity: 0.62;
	}

	100% {
		translate: -9% -7%;
		rotate: 0deg;
		opacity: 0.34;
	}
}

.swatch-heartwood {
	--hw-ring: 9px;
	--hw-x: 30%;
	--hw-y: 70%;
	--blk-rim: inset 0 0 0 1px color-mix(in srgb, var(--blk) 52%, #241d0f);
	--blk-inner:
		inset 0 5px 11px -9px rgb(255 255 255 / 0.85),
		inset 0 -8px 13px -10px color-mix(in srgb, var(--blk) 34%, #131a0e);
	position: relative;
	overflow: hidden;
	background-color: var(--blk);
	background-image:
		repeating-radial-gradient(
			circle at var(--hw-x) var(--hw-y),
			color-mix(in srgb, var(--blk) 82%, #3b2c14) 0 calc(var(--hw-ring) * 0.22),
			color-mix(in srgb, var(--blk) 91%, white) calc(var(--hw-ring) * 0.22)
				calc(var(--hw-ring) * 0.5),
			transparent calc(var(--hw-ring) * 0.5) var(--hw-ring)
		),
		radial-gradient(
			circle at var(--hw-x) var(--hw-y),
			color-mix(in srgb, var(--blk) 68%, white) 0%,
			transparent 62%
		),
		linear-gradient(
			158deg,
			color-mix(in srgb, var(--blk) 90%, white) 0%,
			var(--blk) 46%,
			color-mix(in srgb, var(--blk) 78%, #202c16) 100%
		);
}

.swatch-heartwood::after {
	content: '';
	position: absolute;
	inset: -28%;
	background:
		radial-gradient(58% 44% at 30% 26%, rgb(255 255 255 / 0.34), transparent 70%),
		radial-gradient(
			46% 60% at 74% 70%,
			color-mix(in srgb, var(--blk) 45%, #f6e6bd),
			transparent 72%
		);
	mix-blend-mode: soft-light;
	animation: swatch-hw-drift 9s ease-in-out infinite;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.swatch-heartwood::after {
		animation: none;
		opacity: 0.48;
	}
}

/* Verdant — keep in step with .blk-verdant in verdant.css. A swatch is not a
   board cell, so it takes cell 0's pose: no --blk-i, no :nth-child seed, the
   leaf pointing right. The tones are copied too, or the swatch would show a
   candy-pink leaf. */
@keyframes swatch-vd-sway {
	0%,
	100% {
		rotate: -2.5deg;
	}

	50% {
		rotate: 2.5deg;
	}
}

.swatch-verdant {
	--blk-rim: 0 0 #0000;
	--blk-inner: 0 0 #0000;
	--blk-aura: 0 0 #0000;
	--vd-leaf: var(--blk);
	position: relative;
	background: none;
}

.swatch-verdant[style*='ff8fa3' i] {
	--vd-leaf: #cc6358;
}

.swatch-verdant[style*='ffb347' i] {
	--vd-leaf: #df8c47;
}

.swatch-verdant[style*='ffd166' i] {
	--vd-leaf: #e2bf55;
}

.swatch-verdant[style*='06d6a0' i] {
	--vd-leaf: #7dbb6a;
}

.swatch-verdant[style*='118ab2' i] {
	--vd-leaf: #5a9ea0;
}

.swatch-verdant[style*='b5838d' i] {
	--vd-leaf: #a07b5e;
}

.swatch-verdant[style*='a288e3' i] {
	--vd-leaf: #8f76b0;
}

.swatch-verdant[style*='f4a261' i] {
	--vd-leaf: #9aa24a;
}

.swatch-verdant::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.94;
	transform-origin: 50% 72%;
	transform: rotate(-12deg) scale(0.9);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath transform='rotate(42 50 50) translate(50 50) scale(.82) translate(-50 -50)' d='M50 84 C44 94 30 98 20 92 C8 85 6 66 12 52 C18 36 32 22 42 12 C46 8 48 3 50 -4 C52 3 54 8 58 12 C68 22 82 36 88 52 C94 66 92 85 80 92 C70 98 56 94 50 84Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath transform='rotate(42 50 50) translate(50 50) scale(.82) translate(-50 -50)' d='M50 84 C44 94 30 98 20 92 C8 85 6 66 12 52 C18 36 32 22 42 12 C46 8 48 3 50 -4 C52 3 54 8 58 12 C68 22 82 36 88 52 C94 66 92 85 80 92 C70 98 56 94 50 84Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath transform='rotate(42 50 50) translate(50 50) scale(.82) translate(-50 -50)' d='M50 84 C44 94 30 98 20 92 C8 85 6 66 12 52 C18 36 32 22 42 12 C46 8 48 3 50 -4 C52 3 54 8 58 12 C68 22 82 36 88 52 C94 66 92 85 80 92 C70 98 56 94 50 84Z' fill='none' stroke='rgb(22,44,28)' stroke-opacity='.3' stroke-width='4'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
		radial-gradient(
			95% 95% at 32% 26%,
			color-mix(in oklab, var(--vd-leaf) 80%, white) 0%,
			var(--vd-leaf) 52%,
			color-mix(in oklab, var(--vd-leaf) 84%, #1d3320) 100%
		);
	animation: swatch-vd-sway 6.5s ease-in-out infinite;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.swatch-verdant::after {
		animation: none;
	}
}