/**
 * Branded editor loader — logo pulse + soft atmosphere.
 */

@keyframes bm-brand-loader-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bm-brand-loader-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

@keyframes bm-brand-loader-ripple {
	0% {
		opacity: 0.55;
		transform: scale(0.92);
	}
	70% {
		opacity: 0;
		transform: scale(1.35);
	}
	100% {
		opacity: 0;
		transform: scale(1.35);
	}
}

@keyframes bm-brand-loader-orb {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(12px, -18px, 0) scale(1.08);
	}
}

@keyframes bm-brand-loader-dot {
	0%,
	80%,
	100% {
		opacity: 0.25;
		transform: translateY(0);
	}
	40% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

.joc-blockora-morph-app .bm-brand-loader {
	position: relative;
	display: flex;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 2.5rem 1.5rem;
	font-family: var(--bm-font-sans);
	color: var(--bm-color-on-background, #131b2e);
	background: var(--bm-color-surface-bg, #faf8ff);
}

.joc-blockora-morph-app .bm-brand-loader__atmosphere {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(
			ellipse 80% 55% at 50% -5%,
			color-mix(in srgb, var(--bm-color-primary-container, #4f46e5) 28%, transparent),
			transparent 62%
		),
		radial-gradient(
			ellipse 55% 45% at 100% 100%,
			color-mix(in srgb, var(--bm-color-primary, #3525cd) 12%, transparent),
			transparent 55%
		),
		linear-gradient(
			180deg,
			var(--bm-color-surface-bg, #faf8ff) 0%,
			var(--bm-color-surface-low, #f2f3ff) 100%
		);
}

.joc-blockora-morph-app .bm-brand-loader__orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(48px);
}

.joc-blockora-morph-app .bm-brand-loader__orb--a {
	top: 18%;
	right: 16%;
	width: min(28vw, 220px);
	height: min(28vw, 220px);
	background: color-mix(in srgb, var(--bm-color-primary-container, #4f46e5) 35%, transparent);
	animation: bm-brand-loader-orb 7s ease-in-out infinite;
}

.joc-blockora-morph-app .bm-brand-loader__orb--b {
	bottom: 12%;
	left: 10%;
	width: min(34vw, 260px);
	height: min(34vw, 260px);
	background: color-mix(in srgb, var(--bm-color-secondary, #4648d4) 22%, transparent);
	animation: bm-brand-loader-orb 9s ease-in-out infinite reverse;
}

.joc-blockora-morph-app .bm-brand-loader__stage {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	animation: bm-brand-loader-rise 0.55s var(--bm-ease, ease) both;
}

.joc-blockora-morph-app .bm-brand-loader__mark {
	--bm-brand-loader-size: 5.75rem;
	position: relative;
	display: grid;
	place-items: center;
	width: var(--bm-brand-loader-size);
	height: var(--bm-brand-loader-size);
	margin-bottom: 1.35rem;
	animation: bm-brand-loader-float 2.4s ease-in-out infinite;
}

.joc-blockora-morph-app .bm-brand-loader__logo,
.joc-blockora-morph-app .bm-brand-loader__logo-fallback {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 14%;
	box-sizing: border-box;
	border-radius: 50%;
	object-fit: contain;
	background: #fff;
	box-shadow:
		0 12px 28px -14px color-mix(in srgb, var(--bm-color-primary, #3525cd) 45%, transparent),
		0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.joc-blockora-morph-app .bm-brand-loader__logo-fallback {
	display: grid;
	place-items: center;
	padding: 0;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--bm-color-primary, #3525cd);
	background: linear-gradient(145deg, #fff 0%, #eaedff 100%);
}

.joc-blockora-morph-app .bm-brand-loader__ring {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 50%;
	border: 1.5px solid color-mix(in srgb, var(--bm-color-primary, #3525cd) 45%, transparent);
	pointer-events: none;
	opacity: 0;
	animation: bm-brand-loader-ripple 2.4s var(--bm-ease, ease) infinite;
}

.joc-blockora-morph-app .bm-brand-loader__ring--1 {
	animation-delay: 0s;
}

.joc-blockora-morph-app .bm-brand-loader__ring--2 {
	animation-delay: 0.8s;
}

.joc-blockora-morph-app .bm-brand-loader__ring--3 {
	animation-delay: 1.6s;
}

.joc-blockora-morph-app .bm-brand-loader__brand {
	margin: 0 0 0.65rem;
	font-size: clamp(1.15rem, 2.8vw, 1.45rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--bm-color-on-background, #131b2e);
}

.joc-blockora-morph-app .bm-brand-loader__brand-accent {
	color: var(--bm-color-primary, #3525cd);
}

.joc-blockora-morph-app .bm-brand-loader__label {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--bm-color-on-surface-variant, #464555);
}

.joc-blockora-morph-app .bm-brand-loader__dots {
	display: inline-flex;
	align-items: center;
	gap: 0.18rem;
	margin-left: 0.15rem;
}

.joc-blockora-morph-app .bm-brand-loader__dots span {
	display: block;
	width: 0.28rem;
	height: 0.28rem;
	border-radius: 50%;
	background: var(--bm-color-primary, #3525cd);
	animation: bm-brand-loader-dot 1.1s ease-in-out infinite;
}

.joc-blockora-morph-app .bm-brand-loader__dots span:nth-child(2) {
	animation-delay: 0.15s;
}

.joc-blockora-morph-app .bm-brand-loader__dots span:nth-child(3) {
	animation-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	.joc-blockora-morph-app .bm-brand-loader__mark,
	.joc-blockora-morph-app .bm-brand-loader__ring,
	.joc-blockora-morph-app .bm-brand-loader__orb,
	.joc-blockora-morph-app .bm-brand-loader__dots span {
		animation: none;
	}

	.joc-blockora-morph-app .bm-brand-loader__ring {
		opacity: 0.2;
		transform: scale(1.12);
	}
}
