/**
 * PWD Animations - Button widget stylesheet.
 * Loaded together with pwd-animations-core.css.
 */

/* =========================================================================
 * BUTTON
 * ====================================================================== */
.pwd-anim--button {
	display: block;
}

.pwd-anim__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	border: 0;
	border-radius: var(--pwd-radius);
	background: #0d0d0d;
	color: #fff;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	isolation: isolate;
	overflow: visible;
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease, transform 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}

/*
 * Full-width alignment variant (Button, Simple Button, Dual Button).
 * Added via each widget's Alignment control (prefix_class: pwd-anim-align-).
 */
.pwd-anim-align-stretch .pwd-anim__btn {
	display: flex;
	width: 100%;
}

.pwd-anim__content {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.pwd-anim__surface {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
}

.pwd-anim__label {
	white-space: nowrap;
}

.pwd-anim__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.pwd-anim__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.pwd-anim__icon i {
	font-size: 1em;
}

/* Contained effects clip inside the button. */
.pwd-anim--shine .pwd-anim__btn,
.pwd-anim--ripple .pwd-anim__btn,
.pwd-anim--lantern .pwd-anim__btn {
	overflow: hidden;
}

/* Heat lets embers rise past the top edge. */
.pwd-anim--heat .pwd-anim__btn {
	overflow: visible;
}

/* --- Rotating border ---------------------------------------------------- */
.pwd-anim--button.pwd-anim--border .pwd-anim__btn::before,
.pwd-anim--button.pwd-anim--border .pwd-anim__btn::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--pwd-border));
	border-radius: inherit;
	background: conic-gradient(
		from var(--pwd-angle),
		var(--pwd-c1),
		var(--pwd-c2),
		var(--pwd-c3),
		var(--pwd-c1)
	);
	animation: pwd-spin var(--pwd-speed) linear infinite;
}

.pwd-anim--button.pwd-anim--border .pwd-anim__btn::before {
	z-index: -1;
}

.pwd-anim--button.pwd-anim--border .pwd-anim__btn::after {
	z-index: -2;
	filter: blur(var(--pwd-glow));
	opacity: 0.65;
}

/* Animate on Hover Only: hold the spin until hover or keyboard focus. */
.pwd-anim--hoveronly-yes .pwd-anim--button.pwd-anim--border .pwd-anim__btn::before,
.pwd-anim--hoveronly-yes .pwd-anim--button.pwd-anim--border .pwd-anim__btn::after {
	animation-play-state: paused;
}

.pwd-anim--hoveronly-yes .pwd-anim--button.pwd-anim--border .pwd-anim__btn:focus-visible::before,
.pwd-anim--hoveronly-yes .pwd-anim--button.pwd-anim--border .pwd-anim__btn:focus-visible::after {
	animation-play-state: running;
}

@media (hover: hover) {
	.pwd-anim--hoveronly-yes .pwd-anim--button.pwd-anim--border .pwd-anim__btn:hover::before,
	.pwd-anim--hoveronly-yes .pwd-anim--button.pwd-anim--border .pwd-anim__btn:hover::after {
		animation-play-state: running;
	}
}

/*
 * The button is its own stacking context (isolation: isolate), so the
 * negative z-index gradient pseudo-elements paint ABOVE the button's own
 * background. Re-paint the background on the surface layer so the gradient
 * only shows through as a ring around the edge.
 */
.pwd-anim--button.pwd-anim--border .pwd-anim__surface {
	background: inherit;
}

/* --- Shine sweep -------------------------------------------------------- */
.pwd-anim--shine .pwd-anim__surface::before {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	width: 75%;
	height: 100%;
	background: linear-gradient(
		100deg,
		transparent 0%,
		color-mix(in srgb, var(--pwd-c2) 70%, transparent) 50%,
		transparent 100%
	);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
}

.pwd-anim--shine .pwd-anim__btn:focus-visible .pwd-anim__surface::before {
	left: 150%;
}

@media (hover: hover) {
	.pwd-anim--shine .pwd-anim__btn:hover .pwd-anim__surface::before {
		left: 150%;
	}
}

/* --- Heat (JS embers + flame base) ------------------------------------- */
.pwd-anim--heat .pwd-anim__surface {
	overflow: visible;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--pwd-c3) 65%, transparent) 0%,
		color-mix(in srgb, var(--pwd-c1) 30%, transparent) 30%,
		transparent 60%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.pwd-anim--heat .pwd-anim__surface::before {
	content: "";
	position: absolute;
	inset: 40% 0 -10% 0;
	background: radial-gradient(
		70% 90% at 50% 100%,
		color-mix(in srgb, var(--pwd-c2) 85%, transparent) 0%,
		color-mix(in srgb, var(--pwd-c3) 55%, transparent) 40%,
		transparent 72%
	);
	filter: blur(5px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.pwd-anim--heat .pwd-anim__btn:focus-visible .pwd-anim__surface,
.pwd-anim--heat .pwd-anim__btn:focus-visible .pwd-anim__surface::before {
	opacity: 1;
}

@media (hover: hover) {
	.pwd-anim--heat .pwd-anim__btn:hover .pwd-anim__surface,
	.pwd-anim--heat .pwd-anim__btn:hover .pwd-anim__surface::before {
		opacity: 1;
	}
}

.pwd-anim--heat .pwd-anim__btn:focus-visible .pwd-anim__surface::before {
	animation: pwd-heat-flicker calc(var(--pwd-speed) / 4) ease-in-out infinite;
}

@media (hover: hover) {
	.pwd-anim--heat .pwd-anim__btn:hover .pwd-anim__surface::before {
		animation: pwd-heat-flicker calc(var(--pwd-speed) / 4) ease-in-out infinite;
	}
}

.pwd-anim--heat .pwd-anim__btn:focus-visible {
	box-shadow: 0 0 var(--pwd-glow) color-mix(in srgb, var(--pwd-c3) 70%, transparent);
}

@media (hover: hover) {
	.pwd-anim--heat .pwd-anim__btn:hover {
		box-shadow: 0 0 var(--pwd-glow) color-mix(in srgb, var(--pwd-c3) 70%, transparent);
	}
}

/* Rising ember particles: rendered by PHP (a fixed set, each with its own
   --pwd-ember-* values) and animated only while the button is hovered or
   keyboard-focused. */
.pwd-ember {
	position: absolute;
	bottom: -4px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		#fff 0%,
		var(--pwd-c2) 35%,
		var(--pwd-c3) 70%,
		transparent 78%
	);
	filter: blur(0.4px);
	pointer-events: none;
	opacity: 0;
	/* How far an ember climbs: the button's height (see the cqh override
	   below) plus a per-ember extra. */
	--pwd-ember-lift: calc(48px + var(--pwd-ember-extra, 40px));
}

.pwd-anim--heat .pwd-anim__btn:focus-visible .pwd-ember {
	animation: pwd-ember-rise var(--pwd-ember-dur, 1.2s) ease-out var(--pwd-ember-delay, 0s) infinite;
	will-change: transform, opacity;
}

@media (hover: hover) {
	.pwd-anim--heat .pwd-anim__btn:hover .pwd-ember {
		animation: pwd-ember-rise var(--pwd-ember-dur, 1.2s) ease-out var(--pwd-ember-delay, 0s) infinite;
		will-change: transform, opacity;
	}
}

@supports (height: 1cqh) {
	.pwd-anim--heat .pwd-anim__surface {
		container-type: size;
	}

	.pwd-ember {
		--pwd-ember-lift: calc(100cqh + var(--pwd-ember-extra, 40px));
	}
}

@keyframes pwd-ember-rise {
	0% {
		transform: translate(0, 0) scale(1);
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	100% {
		transform: translate(var(--pwd-ember-x, 0), calc(-1 * var(--pwd-ember-lift, 90px)))
			scale(0.15);
		opacity: 0;
	}
}

/* --- Ripple (JS, spawned from the pointer) ----------------------------- */
.pwd-anim--ripple .pwd-anim__surface {
	overflow: hidden;
}

.pwd-ripple {
	position: absolute;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--pwd-c1) 70%, transparent) 0%,
		color-mix(in srgb, var(--pwd-c1) 30%, transparent) 42%,
		transparent 70%
	);
	pointer-events: none;
	will-change: transform, opacity;
	animation: pwd-ripple-anim 0.6s ease-out forwards;
}

.pwd-ripple--click {
	background: radial-gradient(
		circle,
		#fff 0%,
		color-mix(in srgb, var(--pwd-c1) 60%, transparent) 30%,
		transparent 68%
	);
}

@keyframes pwd-ripple-anim {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 0.85;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}

/* Static hover fallback (no JS / reduced motion). */
.pwd-anim--ripple .pwd-anim__surface::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at 50% 50%,
		color-mix(in srgb, var(--pwd-c1) 22%, transparent) 0%,
		transparent 60%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
}

@media (hover: hover) {
	.pwd-anim--ripple .pwd-anim__btn:hover .pwd-anim__surface::before {
		opacity: 1;
	}
}

/* --- Lantern (bright cursor spotlight) --------------------------------- */
.pwd-anim--lantern .pwd-anim__surface {
	background: radial-gradient(
		circle 70px at var(--pwd-mx, 50%) var(--pwd-my, 50%),
		#fff 0%,
		var(--pwd-c2) 14%,
		color-mix(in srgb, var(--pwd-c2) 55%, transparent) 34%,
		transparent 60%
	);
	mix-blend-mode: screen;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.pwd-anim--lantern .pwd-anim__btn:focus-visible .pwd-anim__surface {
	opacity: 1;
}

@media (hover: hover) {
	.pwd-anim--lantern .pwd-anim__btn:hover .pwd-anim__surface {
		opacity: 1;
	}
}

.pwd-anim--lantern .pwd-anim__btn:focus-visible {
	box-shadow: 0 0 var(--pwd-glow) color-mix(in srgb, var(--pwd-c2) 55%, transparent);
}

@media (hover: hover) {
	.pwd-anim--lantern .pwd-anim__btn:hover {
		box-shadow: 0 0 var(--pwd-glow) color-mix(in srgb, var(--pwd-c2) 55%, transparent);
	}
}


/* --- Soft Press (neumorphic) -------------------------------------------- */
/*
 * Raised: a light shadow up and left, a dark one down and right. Pressed
 * (:active, so a mouse button or a finger held down): the same two shadows
 * inset, so the button sinks into the page. The soft look needs the button
 * background to match the page background; the shadow colours, distance and
 * blur come from the Effect controls. The pressed shadows keep the ratios of
 * the original design (0.67 and 1.33 of the distance, 0.8 and 1.6 of the blur).
 */
.pwd-anim--soft {
	--pwd-soft-light: rgba(255, 255, 255, 0.8);
	--pwd-soft-dark: rgba(0, 0, 0, 0.2);
	--pwd-soft-d: 6px;
	--pwd-soft-b: 10px;
	--pwd-soft-dim: 0.7;
}

.pwd-anim--soft .pwd-anim__btn {
	box-shadow:
		calc(var(--pwd-soft-d) * -1) calc(var(--pwd-soft-d) * -1) var(--pwd-soft-b) var(--pwd-soft-light),
		var(--pwd-soft-d) var(--pwd-soft-d) var(--pwd-soft-b) var(--pwd-soft-dark);
	transition: box-shadow 0.15s ease-in-out, opacity 0.15s ease-in-out, color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.pwd-anim--soft .pwd-anim__btn:active {
	box-shadow:
		inset calc(var(--pwd-soft-d) * -0.67) calc(var(--pwd-soft-d) * -0.67) calc(var(--pwd-soft-b) * 0.8) var(--pwd-soft-light),
		inset calc(var(--pwd-soft-d) * 1.33) calc(var(--pwd-soft-d) * 1.33) calc(var(--pwd-soft-b) * 1.6) var(--pwd-soft-dark);
	opacity: 1;
	transform: scale(0.99);
}

.pwd-anim--soft .pwd-anim__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

@media (hover: hover) {
	.pwd-anim-soft-hover-lift .pwd-anim--soft .pwd-anim__btn:hover {
		box-shadow:
			calc(var(--pwd-soft-d) * -1.4) calc(var(--pwd-soft-d) * -1.4) calc(var(--pwd-soft-b) * 1.4) var(--pwd-soft-light),
			calc(var(--pwd-soft-d) * 1.4) calc(var(--pwd-soft-d) * 1.4) calc(var(--pwd-soft-b) * 1.4) var(--pwd-soft-dark);
		transform: translateY(-1px);
	}

	.pwd-anim-soft-hover-dim .pwd-anim--soft .pwd-anim__btn:hover {
		opacity: var(--pwd-soft-dim);
	}

	.pwd-anim--soft .pwd-anim__btn:active:hover {
		box-shadow:
			inset calc(var(--pwd-soft-d) * -0.67) calc(var(--pwd-soft-d) * -0.67) calc(var(--pwd-soft-b) * 0.8) var(--pwd-soft-light),
			inset calc(var(--pwd-soft-d) * 1.33) calc(var(--pwd-soft-d) * 1.33) calc(var(--pwd-soft-b) * 1.6) var(--pwd-soft-dark);
		opacity: 1;
		transform: scale(0.99);
	}
}