.phoenix-effect-wrap {
	--phoenix-ink-900: #14130f;
	box-sizing: border-box;
	overflow: hidden;
}
.phoenix-effect-wrap *,
.phoenix-effect-wrap *::before,
.phoenix-effect-wrap *::after {
	box-sizing: border-box;
}
.phoenix-effect-frame {
	background: var(--phoenix-ink-900);
	background-position: center;
	background-size: cover;
	height: auto;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.phoenix-effect-ash-glow {
	animation: phoenixAshGlow 3.5s ease-in-out infinite;
	background: radial-gradient(
		80% 120% at 50% 100%,
		rgba(244, 136, 16, 0.55) 0%,
		rgba(244, 136, 16, 0) 70%
	);
	bottom: 0;
	height: 180px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	z-index: 2;
}
@keyframes phoenixAshGlow {
	0%,
	100% {
		opacity: 0.55;
	}
	50% {
		opacity: 1;
	}
}
.phoenix-effect-tiles {
	inset: 0;
	overflow: hidden;
	position: absolute;
	z-index: 1;
}
.phoenix-effect-tile {
	background-repeat: no-repeat;
	box-shadow: none;
	filter: grayscale(30%) sepia(6%) contrast(1.04);
	position: absolute;
	will-change: transform, opacity;
}
.phoenix-effect-placeholder {
	background: #f9f9f9;
	border: 2px dashed #ccc;
	border-radius: 4px;
	color: #666;
	padding: 24px;
	text-align: center;
}