/* File: wp-content/plugins/jmp-animated-hero/assets/css/jmp-hero-frontend.css */

.jmp-animated-hero {
	--jmp-hero-primary: #0d8ec4;
	--jmp-hero-secondary: #0b6f96;
	--jmp-hero-accent: #f59e0b;
	--jmp-hero-surface: #0f172a;
	--jmp-hero-on-surface: #f8fafc;
	--jmp-hero-overlay-alpha: 0.45;
	--jmp-hero-radius: 20px;
	--jmp-hero-motion-dur: 14s;
	--jmp-hero-blend-mode: normal;
	border-radius: var(--jmp-hero-radius);
	box-sizing: border-box;
	color: var(--jmp-hero-on-surface);
	display: grid;
	isolation: isolate;
	margin: 0 auto 1.5rem;
	max-width: 1200px;
	min-height: 280px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.jmp-animated-hero--bevel-frame {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.35) inset,
		0 -1px 0 rgba(15, 23, 42, 0.25) inset,
		0 18px 40px rgba(15, 23, 42, 0.18);
}

.jmp-animated-hero__bg {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	inset: 0;
	position: absolute;
	transform: scale(1.02);
	z-index: 0;
}

.jmp-animated-hero--motion-slow-pan .jmp-animated-hero__bg--motion {
	animation: jmp-hero-pan var(--jmp-hero-motion-dur) ease-in-out infinite alternate;
}

.jmp-animated-hero--motion-ken-burns .jmp-animated-hero__bg--motion {
	animation: jmp-hero-ken var(--jmp-hero-motion-dur) ease-in-out infinite alternate;
}

.jmp-animated-hero--motion-float-overlay:not(.jmp-animated-hero--fx-layer) .jmp-animated-hero__overlay {
	animation: jmp-hero-float 6s ease-in-out infinite;
}

.jmp-animated-hero--motion-float-overlay.jmp-animated-hero--fx-layer .jmp-animated-hero__fx {
	animation: jmp-hero-float 6s ease-in-out infinite;
}

.jmp-animated-hero--motion-ambient .jmp-animated-hero__bg--motion {
	animation: jmp-hero-ambient var(--jmp-hero-motion-dur) linear infinite;
}

.jmp-animated-hero__overlay {
	inset: 0;
	mix-blend-mode: var(--jmp-hero-blend-mode);
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.jmp-animated-hero__fx {
	display: block;
	inset: 0;
	isolation: isolate;
	mix-blend-mode: normal;
	overflow: visible;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.jmp-animated-hero__fx::before,
.jmp-animated-hero__fx::after {
	display: block;
}

.jmp-animated-hero--overlay-veil_soft .jmp-animated-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, calc(0.55 + var(--jmp-hero-overlay-alpha) * 0.25)) 0%,
		rgba(255, 255, 255, calc(0.12 + var(--jmp-hero-overlay-alpha) * 0.15)) 42%,
		transparent 100%
	);
}

.jmp-animated-hero--overlay-veil_deep .jmp-animated-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, calc(var(--jmp-hero-overlay-alpha) * 0.35)) 0%,
		rgba(15, 23, 42, var(--jmp-hero-overlay-alpha)) 100%
	);
}

/* --- Animated object overlays (speed scales with --jmp-hero-motion-dur) --- */

.jmp-animated-hero--overlay-stars .jmp-animated-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, calc(0.1 + var(--jmp-hero-overlay-alpha) * 0.28)) 0%,
		transparent 62%
	);
}

.jmp-animated-hero--overlay-stars .jmp-animated-hero__fx::before {
	animation:
		jmp-hero-fx-twinkle calc(var(--jmp-hero-motion-dur, 14s) * 0.45) ease-in-out infinite alternate,
		jmp-hero-fx-drift-slow calc(var(--jmp-hero-motion-dur, 14s) * 1.75) linear infinite;
	background-image:
		radial-gradient(circle at 6% 14%, rgba(255, 255, 255, 0.95) 0 1.4px, transparent 2.4px),
		radial-gradient(circle at 18% 38%, rgba(255, 255, 255, 0.85) 0 1.6px, transparent 2.7px),
		radial-gradient(circle at 28% 12%, rgba(255, 255, 255, 0.75) 0 1.3px, transparent 2.3px),
		radial-gradient(circle at 42% 52%, rgba(255, 255, 255, 0.9) 0 1.5px, transparent 2.6px),
		radial-gradient(circle at 55% 22%, rgba(255, 255, 255, 0.8) 0 1.8px, transparent 2.9px),
		radial-gradient(circle at 68% 48%, rgba(255, 255, 255, 0.92) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.7) 0 1.3px, transparent 2.2px),
		radial-gradient(circle at 88% 58%, rgba(255, 255, 255, 0.88) 0 1.6px, transparent 2.7px),
		radial-gradient(circle at 12% 72%, rgba(255, 255, 255, 0.65) 0 1.3px, transparent 2.3px),
		radial-gradient(circle at 38% 82%, rgba(255, 255, 255, 0.78) 0 1.4px, transparent 2.4px),
		radial-gradient(circle at 62% 78%, rgba(255, 255, 255, 0.82) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 84% 88%, rgba(255, 255, 255, 0.72) 0 1.3px, transparent 2.3px),
		radial-gradient(circle at 92% 32%, rgba(255, 255, 255, 0.68) 0 1.3px, transparent 2.3px),
		radial-gradient(circle at 48% 8%, rgba(255, 255, 255, 0.9) 0 1.6px, transparent 2.7px);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	inset: 0;
	opacity: calc(0.52 + var(--jmp-hero-overlay-alpha) * 0.42);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-stars .jmp-animated-hero__fx::after {
	animation: jmp-hero-fx-twinkle calc(var(--jmp-hero-motion-dur, 14s) * 0.55) ease-in-out infinite alternate-reverse;
	background-image:
		radial-gradient(circle at 22% 28%, rgba(186, 230, 253, 0.9) 0 1.5px, transparent 2.6px),
		radial-gradient(circle at 72% 36%, rgba(255, 255, 255, 0.75) 0 1.4px, transparent 2.4px),
		radial-gradient(circle at 52% 68%, rgba(255, 255, 255, 0.85) 0 1.6px, transparent 2.7px);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	inset: 0;
	opacity: calc(0.22 + var(--jmp-hero-overlay-alpha) * 0.45);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-snow .jmp-animated-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(248, 250, 252, calc(0.04 + var(--jmp-hero-overlay-alpha) * 0.1)) 0%,
		transparent 55%
	);
}

.jmp-animated-hero--overlay-snow .jmp-animated-hero__fx::before {
	animation: jmp-hero-fx-snow calc(var(--jmp-hero-motion-dur, 14s) * 0.32) linear infinite;
	background-image:
		radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.98) 0 2px, transparent 3.2px),
		radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.9) 0 1.6px, transparent 2.7px),
		radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.95) 0 1.8px, transparent 2.9px),
		radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.85) 0 1.4px, transparent 2.5px),
		radial-gradient(circle at 12% 56%, rgba(186, 230, 253, 0.9) 0 1.7px, transparent 2.8px),
		radial-gradient(circle at 88% 30%, rgba(255, 255, 255, 0.82) 0 1.5px, transparent 2.6px);
	background-size: 88px 132px;
	content: "";
	inset: -15% 0 0 0;
	opacity: calc(0.65 + var(--jmp-hero-overlay-alpha) * 0.3);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-snow .jmp-animated-hero__fx::after {
	animation: jmp-hero-fx-snow calc(var(--jmp-hero-motion-dur, 14s) * 0.48) linear infinite reverse;
	background-image:
		radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 2.2px),
		radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.75) 0 1.2px, transparent 2.1px),
		radial-gradient(circle at 48% 86%, rgba(186, 230, 253, 0.72) 0 1.1px, transparent 2px);
	background-size: 64px 104px;
	content: "";
	inset: -20% 0 0 0;
	opacity: calc(0.4 + var(--jmp-hero-overlay-alpha) * 0.3);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-sand .jmp-animated-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(120, 100, 72, calc(0.06 + var(--jmp-hero-overlay-alpha) * 0.12)) 0%,
		transparent 70%
	);
}

.jmp-animated-hero--overlay-sand .jmp-animated-hero__fx::before {
	animation: jmp-hero-fx-sand calc(var(--jmp-hero-motion-dur, 14s) * 1.1) linear infinite alternate;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='snd'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23snd)' opacity='0.22'/%3E%3C/svg%3E");
	background-size: 180px 180px;
	content: "";
	inset: -5%;
	mix-blend-mode: soft-light;
	opacity: calc(0.35 + var(--jmp-hero-overlay-alpha) * 0.45);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-sand .jmp-animated-hero__fx::after {
	content: none;
}

.jmp-animated-hero--overlay-orbs .jmp-animated-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, calc(0.08 + var(--jmp-hero-overlay-alpha) * 0.22)) 0%,
		transparent 75%
	);
}

.jmp-animated-hero--overlay-orbs .jmp-animated-hero__fx::before {
	animation: jmp-hero-fx-orbs-a calc(var(--jmp-hero-motion-dur, 14s) * 1.25) ease-in-out infinite alternate;
	background-image:
		radial-gradient(circle at 30% 40%, rgba(13, 142, 196, calc(0.35 + var(--jmp-hero-overlay-alpha) * 0.3)), transparent 42%),
		radial-gradient(circle at 75% 55%, rgba(245, 158, 11, calc(0.22 + var(--jmp-hero-overlay-alpha) * 0.25)), transparent 38%);
	background-size: 120% 120%;
	background-position: 40% 45%;
	content: "";
	filter: blur(0.5px);
	inset: -12%;
	opacity: calc(0.55 + var(--jmp-hero-overlay-alpha) * 0.25);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-orbs .jmp-animated-hero__fx::after {
	animation: jmp-hero-fx-orbs-b calc(var(--jmp-hero-motion-dur, 14s) * 1.4) ease-in-out infinite alternate;
	background-image: radial-gradient(
		circle at 60% 35%,
		rgba(248, 250, 252, calc(0.08 + var(--jmp-hero-overlay-alpha) * 0.15)),
		transparent 50%
	);
	background-size: 140% 140%;
	background-position: 55% 50%;
	content: "";
	inset: -8%;
	opacity: calc(0.4 + var(--jmp-hero-overlay-alpha) * 0.35);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-embers .jmp-animated-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, calc(0.12 + var(--jmp-hero-overlay-alpha) * 0.25)) 0%,
		transparent 50%
	);
}

.jmp-animated-hero--overlay-embers .jmp-animated-hero__fx::before {
	animation: jmp-hero-fx-embers calc(var(--jmp-hero-motion-dur, 14s) * 0.5) linear infinite;
	background-image:
		radial-gradient(2px 3px at 8% 100%, rgba(251, 146, 60, 0.9), transparent),
		radial-gradient(1.5px 2px at 18% 100%, rgba(248, 113, 113, 0.65), transparent),
		radial-gradient(2px 2px at 28% 100%, rgba(251, 191, 36, 0.75), transparent),
		radial-gradient(1.5px 2.5px at 42% 100%, rgba(251, 146, 60, 0.7), transparent),
		radial-gradient(2px 2px at 55% 100%, rgba(253, 186, 116, 0.65), transparent),
		radial-gradient(1.5px 2px at 68% 100%, rgba(248, 113, 113, 0.55), transparent),
		radial-gradient(2px 3px at 78% 100%, rgba(251, 146, 60, 0.8), transparent),
		radial-gradient(1.5px 2px at 88% 100%, rgba(251, 191, 36, 0.7), transparent),
		radial-gradient(2px 2px at 95% 100%, rgba(251, 146, 60, 0.6), transparent);
	background-repeat: no-repeat;
	background-size: 100% 220%;
	background-position: 0 100%;
	content: "";
	inset: 0;
	opacity: calc(0.45 + var(--jmp-hero-overlay-alpha) * 0.45);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-embers .jmp-animated-hero__fx::after {
	content: none;
}

.jmp-animated-hero--overlay-bubbles .jmp-animated-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, calc(0.05 + var(--jmp-hero-overlay-alpha) * 0.12)) 0%,
		transparent 60%
	);
}

.jmp-animated-hero--overlay-bubbles .jmp-animated-hero__fx::before {
	animation: jmp-hero-fx-bubbles calc(var(--jmp-hero-motion-dur, 14s) * 0.9) linear infinite;
	background-image:
		radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.22) 0 6px, transparent 7px),
		radial-gradient(circle at 20% 100%, rgba(186, 230, 253, 0.2) 0 5px, transparent 6px),
		radial-gradient(circle at 80% 100%, rgba(255, 255, 255, 0.18) 0 7px, transparent 8px);
	background-repeat: no-repeat;
	background-size: 100% 200%;
	background-position: 0 100%;
	content: "";
	inset: 0;
	opacity: calc(0.35 + var(--jmp-hero-overlay-alpha) * 0.45);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-bubbles .jmp-animated-hero__fx::after {
	animation: jmp-hero-fx-bubbles calc(var(--jmp-hero-motion-dur, 14s) * 1.15) linear infinite reverse;
	background-image: radial-gradient(circle at 60% 100%, rgba(255, 255, 255, 0.15) 0 4px, transparent 5px);
	background-repeat: no-repeat;
	background-size: 100% 220%;
	background-position: 30% 100%;
	content: "";
	inset: 0;
	opacity: calc(0.22 + var(--jmp-hero-overlay-alpha) * 0.3);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-rain .jmp-animated-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, calc(0.08 + var(--jmp-hero-overlay-alpha) * 0.22)) 0%,
		transparent 65%
	);
}

.jmp-animated-hero--overlay-rain .jmp-animated-hero__fx {
	animation: jmp-hero-fx-rain calc(var(--jmp-hero-motion-dur, 14s) * 0.22) linear infinite;
	background-image: repeating-linear-gradient(
		100deg,
		transparent,
		transparent 8px,
		rgba(255, 255, 255, calc(0.08 + var(--jmp-hero-overlay-alpha) * 0.12)) 8px,
		rgba(255, 255, 255, calc(0.08 + var(--jmp-hero-overlay-alpha) * 0.16)) 9px
	);
	background-size: 48px 48px;
	inset: 0;
	opacity: calc(0.72 + var(--jmp-hero-overlay-alpha) * 0.22);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--motion-float-overlay.jmp-animated-hero--fx-layer.jmp-animated-hero--overlay-rain .jmp-animated-hero__fx {
	animation:
		jmp-hero-float 6s ease-in-out infinite,
		jmp-hero-fx-rain calc(var(--jmp-hero-motion-dur, 14s) * 0.22) linear infinite;
}

.jmp-animated-hero--overlay-fireflies .jmp-animated-hero__overlay {
	background: radial-gradient(
		ellipse 100% 80% at 50% 100%,
		rgba(15, 23, 42, calc(0.15 + var(--jmp-hero-overlay-alpha) * 0.35)) 0%,
		transparent 65%
	);
}

.jmp-animated-hero--overlay-fireflies .jmp-animated-hero__fx::before {
	animation: jmp-hero-fx-fireflies calc(var(--jmp-hero-motion-dur, 14s) * 0.85) ease-in-out infinite;
	background-image:
		radial-gradient(circle at 15% 40%, rgba(190, 242, 100, 0.95) 0 2px, transparent 3px),
		radial-gradient(circle at 42% 62%, rgba(163, 230, 53, 0.85) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 68% 38%, rgba(217, 249, 157, 0.9) 0 2px, transparent 3px),
		radial-gradient(circle at 82% 58%, rgba(190, 242, 100, 0.75) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 55% 22%, rgba(163, 230, 53, 0.7) 0 1.5px, transparent 2.5px);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	inset: 0;
	opacity: calc(0.4 + var(--jmp-hero-overlay-alpha) * 0.45);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-fireflies .jmp-animated-hero__fx::after {
	content: none;
}

.jmp-animated-hero--overlay-sparkles .jmp-animated-hero__overlay {
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, calc(0.06 + var(--jmp-hero-overlay-alpha) * 0.15)) 0%,
		transparent 58%
	);
}

.jmp-animated-hero--overlay-sparkles .jmp-animated-hero__fx::before {
	animation: jmp-hero-fx-sparkles calc(var(--jmp-hero-motion-dur, 14s) * 0.28) ease-in-out infinite;
	background-image:
		radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.95) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 48% 18%, rgba(255, 255, 255, 0.85) 0 1px, transparent 2px),
		radial-gradient(circle at 72% 42%, rgba(255, 255, 255, 0.9) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 38% 68%, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px),
		radial-gradient(circle at 85% 72%, rgba(255, 255, 255, 0.8) 0 1.5px, transparent 2.5px);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	inset: 0;
	opacity: calc(0.38 + var(--jmp-hero-overlay-alpha) * 0.5);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-sparkles .jmp-animated-hero__fx::after {
	animation: jmp-hero-fx-sparkles calc(var(--jmp-hero-motion-dur, 14s) * 0.36) ease-in-out infinite reverse;
	background-image: radial-gradient(circle at 60% 55%, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	content: "";
	inset: 0;
	opacity: calc(0.22 + var(--jmp-hero-overlay-alpha) * 0.35);
	pointer-events: none;
	position: absolute;
}

.jmp-animated-hero--overlay-none .jmp-animated-hero__overlay {
	background: transparent;
}

.jmp-animated-hero--overlay-upload .jmp-animated-hero__overlay {
	background: transparent;
}

.jmp-animated-hero__overlay-img {
	height: 100%;
	inset: 0;
	mix-blend-mode: var(--jmp-hero-blend-mode);
	object-fit: cover;
	opacity: var(--jmp-hero-overlay-alpha);
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 2;
}

.jmp-animated-hero__inner {
	align-content: center;
	display: grid;
	gap: 0.75rem;
	justify-items: center;
	max-width: 44rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	position: relative;
	text-align: center;
	z-index: 3;
}

.jmp-animated-hero--align-left .jmp-animated-hero__inner {
	justify-items: start;
	text-align: left;
}

.jmp-animated-hero--align-right .jmp-animated-hero__inner {
	justify-items: end;
	text-align: right;
}

.jmp-animated-hero__eyebrow {
	color: var(--jmp-hero-accent);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.jmp-animated-hero__headline {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.15;
	margin: 0;
}

.jmp-animated-hero__sub {
	font-size: 1.05rem;
	line-height: 1.5;
	margin: 0;
	max-width: 40rem;
	opacity: 0.95;
}

.jmp-animated-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.jmp-animated-hero__btn {
	border-radius: 10px;
	display: inline-block;
	font-weight: 700;
	padding: 0.65rem 1.25rem;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.jmp-animated-hero__btn:focus-visible {
	outline: 2px solid var(--jmp-hero-accent);
	outline-offset: 2px;
}

.jmp-animated-hero__btn--primary {
	background: var(--jmp-hero-primary);
	border: 1px solid var(--jmp-hero-secondary);
	color: #ffffff;
}

.jmp-animated-hero__btn--secondary {
	background: transparent;
	border: 1px solid rgba(248, 250, 252, 0.55);
	color: var(--jmp-hero-on-surface);
}

.jmp-animated-hero__btn--bevel {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.35) inset,
		0 -1px 0 rgba(15, 23, 42, 0.2) inset,
		0 10px 22px rgba(15, 23, 42, 0.18);
}

.jmp-animated-hero--btn-lift-on-hover .jmp-animated-hero__btn:hover {
	transform: translateY(-2px);
}

.jmp-animated-hero--btn-pulse-cta .jmp-animated-hero__btn--primary {
	animation: jmp-hero-pulse 2.4s ease-in-out infinite;
}

.jmp-animated-hero--btn-glow .jmp-animated-hero__btn--primary {
	box-shadow: 0 0 0 0 rgba(13, 142, 196, 0.45), 0 12px 28px rgba(13, 142, 196, 0.35);
}

.jmp-animated-hero--btn-shimmer-border .jmp-animated-hero__btn--primary {
	background: linear-gradient(120deg, var(--jmp-hero-primary), var(--jmp-hero-secondary));
	position: relative;
}

.jmp-animated-hero--btn-shimmer-border .jmp-animated-hero__btn--primary::after {
	animation: jmp-hero-shimmer 2.8s linear infinite;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	border-radius: inherit;
	content: "";
	inset: 0;
	mix-blend-mode: overlay;
	pointer-events: none;
	position: absolute;
}

@keyframes jmp-hero-pan {
	0% {
		background-position: 40% 50%;
	}
	100% {
		background-position: 60% 50%;
	}
}

@keyframes jmp-hero-ken {
	0% {
		transform: scale(1.02) translate(0, 0);
	}
	100% {
		transform: scale(1.08) translate(-1.5%, -1%);
	}
}

@keyframes jmp-hero-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

@keyframes jmp-hero-ambient {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(25deg);
	}
}

@keyframes jmp-hero-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.03);
	}
}

@keyframes jmp-hero-shimmer {
	0% {
		opacity: 0.15;
	}
	50% {
		opacity: 0.45;
	}
	100% {
		opacity: 0.15;
	}
}

@keyframes jmp-hero-fx-twinkle {
	0%,
	100% {
		filter: brightness(0.82);
	}
	50% {
		filter: brightness(1.38);
	}
}

@keyframes jmp-hero-fx-drift-slow {
	0% {
		transform: translate3d(-1.2%, -0.8%, 0);
	}
	50% {
		transform: translate3d(1%, 0.6%, 0);
	}
	100% {
		transform: translate3d(-1.2%, -0.8%, 0);
	}
}

@keyframes jmp-hero-fx-snow {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 100%;
	}
}

@keyframes jmp-hero-fx-sand {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 100% 80%;
	}
}

@keyframes jmp-hero-fx-orbs-a {
	0% {
		background-position: 38% 42%;
	}
	100% {
		background-position: 58% 58%;
	}
}

@keyframes jmp-hero-fx-orbs-b {
	0% {
		background-position: 62% 48%;
	}
	100% {
		background-position: 42% 38%;
	}
}

@keyframes jmp-hero-fx-embers {
	0% {
		background-position: 0 100%;
	}
	100% {
		background-position: 0 -30%;
	}
}

@keyframes jmp-hero-fx-bubbles {
	0% {
		background-position: 0 110%;
	}
	100% {
		background-position: 0 -30%;
	}
}

@keyframes jmp-hero-fx-rain {
	0% {
		background-position: 0 0, 0 0;
	}
	100% {
		background-position: 0 48px, 0 0;
	}
}

@keyframes jmp-hero-fx-fireflies {
	0%,
	100% {
		filter: brightness(0.9);
		transform: translate3d(0, 0, 0);
	}
	25% {
		filter: brightness(1.25);
		transform: translate3d(1.5%, -2%, 0);
	}
	50% {
		filter: brightness(1);
		transform: translate3d(-1%, -3.5%, 0);
	}
	75% {
		filter: brightness(1.2);
		transform: translate3d(2%, 0.5%, 0);
	}
}

@keyframes jmp-hero-fx-sparkles {
	0%,
	100% {
		filter: brightness(0.85);
		transform: scale(1);
	}
	40% {
		filter: brightness(1.45);
		transform: scale(1.03);
	}
	70% {
		filter: brightness(1);
		transform: scale(0.99);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jmp-animated-hero[data-jmp-hero-reduced="1"] .jmp-animated-hero__bg--motion,
	.jmp-animated-hero[data-jmp-hero-reduced="1"] .jmp-animated-hero__overlay,
	.jmp-animated-hero[data-jmp-hero-reduced="1"] .jmp-animated-hero__fx,
	.jmp-animated-hero[data-jmp-hero-reduced="1"] .jmp-animated-hero__fx::before,
	.jmp-animated-hero[data-jmp-hero-reduced="1"] .jmp-animated-hero__fx::after,
	.jmp-animated-hero[data-jmp-hero-reduced="1"] .jmp-animated-hero__btn--primary {
		animation: none !important;
	}

	.jmp-animated-hero[data-jmp-hero-reduced="1"] .jmp-animated-hero__fx::before,
	.jmp-animated-hero[data-jmp-hero-reduced="1"] .jmp-animated-hero__fx::after {
		filter: none !important;
		transform: none !important;
	}
}