/**
 * PWD Animations - core stylesheet.
 *
 * Buttons and content cards with hover-driven effects.
 * Uses the @property at-rule so the conic-gradient angle can be animated
 * natively. Non-supporting browsers fall back to a static gradient.
 */

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

/* -------------------------------------------------------------------------
 * Shared defaults
 * ---------------------------------------------------------------------- */
.pwd-anim {
	--pwd-c1: #ff7a1a;
	--pwd-c2: #ffd166;
	--pwd-c3: #ff3d00;
	--pwd-border: 2px;
	--pwd-glow: 12px;
	--pwd-speed: 4s;
	--pwd-radius: 10px;
	--pwd-tilt: 6deg;
	--pwd-scale: 1.12;
	max-width: 100%;
}

@keyframes pwd-spin {
	to {
		--pwd-angle: 360deg;
	}
}

@keyframes pwd-heat-flicker {
	0%,
	100% {
		transform: translateY(0) scaleY(1);
		opacity: 0.9;
	}
	50% {
		transform: translateY(-4%) scaleY(1.06);
		opacity: 1;
	}
}

/* =========================================================================
 * Reduced motion: show content, drop animation.
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	.pwd-anim *,
	.pwd-anim *::before,
	.pwd-anim *::after {
		animation: none !important;
		transition: none !important;
	}
}