.fj-effects-available .fj-ember-field,
[data-fj-ember-atmosphere] {
	position: relative;
	isolation: isolate;
}

.fj-effects-available .fj-ember-field::before,
[data-fj-ember-atmosphere]::before {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(circle at 18% 18%, rgba(255, 176, 0, 0.18), transparent 16rem),
		radial-gradient(circle at 84% 24%, rgba(232, 91, 36, 0.16), transparent 18rem),
		radial-gradient(circle at 52% 78%, rgba(168, 42, 26, 0.14), transparent 22rem);
	opacity: 0.86;
}

.fj-effects-available .fj-ember-field::after,
[data-fj-ember-atmosphere]::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(90deg, rgba(255, 240, 214, 0.035) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255, 240, 214, 0.026) 1px, transparent 1px);
	background-size: 4rem 4rem;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 72%);
	opacity: 0.32;
}

.fj-depth-surface {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(255, 240, 214, 0.075), rgba(255, 240, 214, 0.03)),
		var(--fj-color-cacao, #2a1b15);
	border: 1px solid rgba(255, 240, 214, 0.14);
	border-radius: var(--fj-radius-xl, 2rem);
	box-shadow:
		0 1.4rem 3.4rem rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.fj-depth-surface::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: "";
	background:
		radial-gradient(circle at 18% 0%, rgba(255, 176, 0, 0.13), transparent 20rem),
		radial-gradient(circle at 100% 10%, rgba(232, 91, 36, 0.13), transparent 22rem);
}

.fj-depth-surface > * {
	position: relative;
	z-index: 1;
}

.fj-glow-divider {
	position: relative;
	min-height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 176, 0, 0.42), transparent);
}

.fj-glow-divider::after {
	position: absolute;
	inset: -0.5rem 20%;
	content: "";
	background: radial-gradient(ellipse, rgba(255, 176, 0, 0.16), transparent 62%);
	filter: blur(10px);
}

.fj-image-lift img,
.wp-block-image.is-style-fj-image-lift img {
	border: 1px solid rgba(255, 240, 214, 0.14);
	border-radius: var(--fj-radius-xl, 2rem);
	box-shadow:
		0 1.5rem 4rem rgba(0, 0, 0, 0.32),
		0 0 0 1px rgba(255, 176, 0, 0.08);
}

.fj-cinematic-frame {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 240, 214, 0.14);
	border-radius: var(--fj-radius-xl, 2rem);
	box-shadow:
		0 1.5rem 4rem rgba(0, 0, 0, 0.34),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.fj-cinematic-frame::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26%),
		linear-gradient(0deg, rgba(22, 15, 11, 0.22), transparent 38%);
}

.fj-soft-reveal {
	animation: fj-soft-reveal 520ms ease both;
}

@keyframes fj-soft-reveal {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (hover: hover) and (pointer: fine) {
	.fj-image-lift img,
	.wp-block-image.is-style-fj-image-lift img,
	.fj-cinematic-frame {
		transition:
			border-color 220ms ease,
			box-shadow 220ms ease,
			transform 220ms ease;
	}

	.fj-image-lift:hover img,
	.wp-block-image.is-style-fj-image-lift:hover img,
	.fj-cinematic-frame:hover {
		border-color: rgba(255, 176, 0, 0.28);
		box-shadow:
			0 1.8rem 4.6rem rgba(0, 0, 0, 0.4),
			0 0 0 1px rgba(255, 176, 0, 0.12);
		transform: translateY(-3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fj-soft-reveal {
		animation: none;
	}

	.fj-image-lift img,
	.wp-block-image.is-style-fj-image-lift img,
	.fj-cinematic-frame {
		transition: none;
	}

	.fj-image-lift:hover img,
	.wp-block-image.is-style-fj-image-lift:hover img,
	.fj-cinematic-frame:hover {
		transform: none;
	}
}