/*
 * PureCSS.com
 * https://purecss.com/examples/blend-difference/
 * Animated mix-blend-mode: difference, a sweeping bar inverts text, orbiting circles subtract color channels.
 */

.demo-blend-difference {
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
}

.demo-blend-difference .blend-panel {
		display: flex;
		flex-direction: column;
		gap: .6rem;
		width: 100%;
	}

/*
 * isolation: isolate makes each stage its own stacking context, so the
 * blending stops at the stage edge instead of reaching the page behind it.
 * The stage colors are hard-coded because difference is arithmetic on the
 * actual channel values, not on whatever the current theme happens to be.
 */
.demo-blend-difference .blend-stage {
		position: relative;
		width: 100%;
		height: 150px;
		overflow: hidden;
		border-radius: var(--radius-lg);
		background: #0c0c0d;
		display: flex;
		align-items: center;
		justify-content: center;
		isolation: isolate;
	}

.demo-blend-difference .blend-word {
		margin: 0;
		font-size: 2.6rem;
		font-weight: 800;
		letter-spacing: -.02em;
		color: #f0f0f0;
		user-select: none;
	}

/* white over near-black stays white; white over the near-white letters lands on black */
.demo-blend-difference .blend-bar {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 22%;
		background: #ffffff;
		mix-blend-mode: difference;
		animation: blend-sweep 4s ease-in-out infinite;
	}

.demo-blend-difference .blend-orbit {
		position: relative;
		width: 100%;
		height: 150px;
		overflow: hidden;
		border-radius: var(--radius-lg);
		background: #0c0c0d;
		isolation: isolate;
	}

/* the negative margins center each circle, so the animation carries the orbit alone */
.demo-blend-difference .orb {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 104px;
		height: 104px;
		margin: -52px 0 0 -52px;
		border-radius: 50%;
		mix-blend-mode: difference;
		animation: blend-orbit 7s linear infinite;
	}

.demo-blend-difference .orb-red   { background: #ff3b30; }

.demo-blend-difference .orb-green { background: #34ff7a; animation-delay: -2.33s; }

.demo-blend-difference .orb-blue  { background: #3b6bff; animation-delay: -4.66s; }

.demo-blend-difference .blend-caption {
		font-family: var(--font-mono);
		font-size: .68rem;
		color: var(--text-muted);
		letter-spacing: .03em;
	}

/* animating left keeps the sweep proportional, so the same rule works at any stage width */
@keyframes blend-sweep {
	0%   { left: -25%; }
	50%  { left: 100%; }
	100% { left: -25%; }
}

/* rotate then push outward: the classic way to describe a circular path in one transform */
@keyframes blend-orbit {
	from { transform: rotate(0deg) translateX(30px); }
	to   { transform: rotate(360deg) translateX(30px); }
}

/* ── Variant: the same bar under four different blend modes ── */

.demo-blend-difference .blend-modes {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 1rem;
	}

.demo-blend-difference .blend-mode-cell {
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: .5rem;
	}

.demo-blend-difference .blend-mode-cell figcaption {
		font-family: var(--font-mono);
		font-size: .65rem;
		letter-spacing: .06em;
		color: var(--text-muted);
		text-align: center;
	}

.demo-blend-difference .blend-stage-sm {
		height: 92px;
	}

.demo-blend-difference .blend-word-sm {
		font-size: 1.05rem;
	}

/* parked, so the four results can be compared at the same overlap */
.demo-blend-difference .blend-bar-static {
		left: 26%;
		animation: none;
	}

.demo-blend-difference .blend-m-difference { mix-blend-mode: difference; }

.demo-blend-difference .blend-m-exclusion  { mix-blend-mode: exclusion; }

.demo-blend-difference .blend-m-screen     { mix-blend-mode: screen; }

.demo-blend-difference .blend-m-multiply   { mix-blend-mode: multiply; }

/* ── Variant: blending an element's own background layers ── */

.demo-blend-difference .blend-bg-row {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		gap: 1rem;
	}

/* no isolation and no stacking context: background-blend-mode combines the
   layers inside this element and never reaches what is painted behind it */
.demo-blend-difference .blend-bg {
		height: 130px;
		border-radius: var(--radius-lg);
		background-image:
			repeating-linear-gradient(45deg, #ff3b30 0 12px, #ffd444 12px 24px),
			linear-gradient(120deg, #3b6bff, #34ff7a);
	}

.demo-blend-difference .blend-bg-multiply   { background-blend-mode: multiply; }

.demo-blend-difference .blend-bg-difference { background-blend-mode: difference; }

.demo-blend-difference .blend-bg-overlay    { background-blend-mode: overlay; }

/* A bar sweeping across type over and over sits close to a flashing pattern.
   Parked, it still shows exactly what the mode does. */
@media (prefers-reduced-motion: reduce) {
	.demo-blend-difference .blend-bar,
	.demo-blend-difference .orb {
		animation: none;
	}

	.demo-blend-difference .blend-bar {
		left: 26%;
	}
}