/* Blooopp Interactive Loading Screen & Split-Door Reveal */

/* Custom Font Face Declaration directly in loader stylesheet (Prevents FOUT font swap restart) */
@font-face {
	font-family: 'Blacky';
	src: url('../fonts/blacky-modern-headline-food-font/Blacky.woff2') format('woff2'),
	     url('../fonts/blacky-modern-headline-food-font/Blacky.woff') format('woff'),
	     url('../fonts/blacky-modern-headline-food-font/Blacky.ttf') format('truetype');
	font-weight: 400 900;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'Blacky Modern Headline Food Font';
	src: url('../fonts/blacky-modern-headline-food-font/Blacky.woff2') format('woff2'),
	     url('../fonts/blacky-modern-headline-food-font/Blacky.woff') format('woff'),
	     url('../fonts/blacky-modern-headline-food-font/Blacky.ttf') format('truetype');
	font-weight: 400 900;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: 'Dirty Weather';
	src: url('../fonts/blacky-modern-headline-food-font/Blacky.woff2') format('woff2'),
	     url('../fonts/blacky-modern-headline-food-font/Blacky.woff') format('woff'),
	     url('../fonts/blacky-modern-headline-food-font/Blacky.ttf') format('truetype');
	font-weight: 400 900;
	font-style: normal;
	font-display: block;
}

:root {
	--blooopp-loader-bg: #000000;
	--door-speed: 1s;
}

body.blooopp-loader-active {
	overflow: hidden !important;
}

/* Fullscreen Loader Container */
#blooopp-loading-screen {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999999;
	overflow: hidden;
	background: transparent;
	pointer-events: all;
	user-select: none;
	-webkit-user-select: none;
	perspective: 1200px;
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
	transition: opacity var(--door-speed, 1.2s) cubic-bezier(0.25, 1, 0.5, 1),
	            visibility var(--door-speed, 1.2s) cubic-bezier(0.25, 1, 0.5, 1);
}

/* Solid Unified Backdrop for seamless cinematic fade */
.blooopp-loader-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: var(--blooopp-loader-bg, #000000);
	z-index: 4;
	pointer-events: none;
	transition: opacity var(--door-speed, 1.2s) cubic-bezier(0.25, 1, 0.5, 1);
}

/* Center Stage Area with 3D depth space */
.blooopp-loader-stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	pointer-events: none;
	transform-style: preserve-3d;
}

/* Center Brand / Title */
.blooopp-loader-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 15;
	text-align: center;
	pointer-events: none;
	transform-style: preserve-3d;
	will-change: transform, opacity, filter;
	opacity: 1;
}

.blooopp-loader-brand-title {
	margin: 0;
	font-family: 'Blacky', 'Blacky Modern Headline Food Font', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	perspective: 1200px;
	transform-style: preserve-3d;
	will-change: transform, opacity, filter;
	font-size: min(var(--brand-font-size, 68px), 11vw);
	max-width: 94vw;
	text-shadow: none !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.blooopp-text-line {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	text-align: center;
	text-shadow: none !important;
}

#blooopp-loading-screen .blooopp-word {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	text-shadow: none !important;
}

#blooopp-loading-screen .blooopp-char-space {
	display: inline-block;
	width: 0.32em;
}

#blooopp-loading-screen .blooopp-char {
	display: inline-block;
	will-change: transform, opacity, filter;
	opacity: 0;
	transform: translate3d(0, 36px, 0) scale(0.92);
	text-shadow: none !important;
	filter: none !important;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: transform var(--door-speed, 1.1s) cubic-bezier(0.25, 1, 0.5, 1),
	            opacity var(--door-speed, 1.1s) ease;
}

/* Stagger speeds */
.text-speed-fast .blooopp-char {
	animation-delay: calc(var(--char-idx, 0) * 0.04s + 0.08s);
}
.text-speed-normal .blooopp-char {
	animation-delay: calc(var(--char-idx, 0) * 0.065s + 0.12s);
}
.text-speed-slow .blooopp-char {
	animation-delay: calc(var(--char-idx, 0) * 0.11s + 0.15s);
}

/* 0. Bucks Sauce Silky Float & Blur-Fade Entrance (Ultra-smooth, zero bounce) */
#blooopp-loading-screen.blooopp-text-anim-ready .text-anim-buckssauce_smooth .blooopp-char,
#blooopp-loading-screen.blooopp-text-anim-ready .text-anim-smooth_fade .blooopp-char {
	animation-name: bloooppBucksSauceChar;
	animation-fill-mode: both;
	animation-duration: 0.95s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bloooppBucksSauceChar {
	0% {
		opacity: 0;
		transform: translate3d(0, 32px, 0) scale(0.94);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

/* 1. One-by-One Drop & Settle (Smooth, non-jarring cascade) */
#blooopp-loading-screen.blooopp-text-anim-ready .text-anim-char_drop .blooopp-char {
	animation-name: bloooppCharDrop;
	animation-fill-mode: both;
	animation-duration: 0.85s;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes bloooppCharDrop {
	0% {
		opacity: 0;
		transform: translate3d(0, -40px, 0) scale(0.94);
	}
	75% {
		opacity: 1;
		transform: translate3d(0, 2px, 0) scale(1.01);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

/* 2. Bubble Pop & Inflate (Zero Twist) */
#blooopp-loading-screen.blooopp-text-anim-ready .text-anim-bubble_pop .blooopp-char {
	animation-name: bloooppCharPop;
	animation-fill-mode: both;
	animation-duration: 0.82s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bloooppCharPop {
	0% {
		opacity: 0;
		transform: scale(0.2);
	}
	65% {
		opacity: 1;
		transform: scale(1.18);
	}
	85% {
		transform: scale(0.96);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* 3. Wave Float & Rise */
#blooopp-loading-screen.blooopp-text-anim-ready .text-anim-wave_rise .blooopp-char {
	animation-name: bloooppCharWave;
	animation-fill-mode: both;
	animation-duration: 0.82s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bloooppCharWave {
	0% {
		opacity: 0;
		transform: translate3d(0, 85px, 0) scale(0.75);
	}
	60% {
		opacity: 1;
		transform: translate3d(0, -14px, 0) scale(1.08);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

/* 4. Neon Pulse & Breathing Glow */
#blooopp-loading-screen.blooopp-text-anim-ready .text-anim-neon_pulse .blooopp-char {
	animation-name: bloooppCharNeon;
	animation-duration: 2.2s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes bloooppCharNeon {
	0% {
		opacity: 0.8;
		transform: scale(0.97);
	}
	100% {
		opacity: 1;
		transform: scale(1.04);
	}
}

/* 5. Smooth Fade */
#blooopp-loading-screen.blooopp-text-anim-ready .text-anim-smooth_fade .blooopp-char {
	animation-name: bloooppCharFade;
	animation-duration: 0.82s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes bloooppCharFade {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.blooopp-loader-brand-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	user-select: none;
}

.blooopp-loader-brand-logo {
	max-width: var(--logo-max-width, clamp(140px, 20vw, 240px));
	height: auto;
	object-fit: contain;
	filter: none !important;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
	opacity: 0;
	animation: bloooppLogoEntrance 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: 0.15s;
}

@keyframes bloooppLogoEntrance {
	0% {
		opacity: 0;
		transform: scale(0.6) translate3d(0, 20px, 0);
	}
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1) translate3d(0, 0, 0);
	}
}

#blooopp-loading-screen.has-round-effect:not(.blooopp-round-done) .blooopp-loader-brand-logo {
	opacity: 0 !important;
	animation-play-state: paused !important;
}

#blooopp-loading-screen.blooopp-round-done .blooopp-loader-brand-logo {
	animation-play-state: running !important;
}

/* ----------------------------------------------------
 * Split Door Curtains (Left & Right)
 * ---------------------------------------------------- */
.blooopp-loader-door {
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 50.5vw;
	background-color: var(--blooopp-loader-bg, #000000);
	z-index: 5;
	overflow: hidden;
	will-change: transform;
	transition: transform var(--door-speed, 1s) cubic-bezier(0.77, 0, 0.175, 1);
}

.blooopp-loader-door-left {
	left: 0;
	transform: translateX(0);
	box-shadow: none !important;
}

.blooopp-loader-door-right {
	right: 0;
	transform: translateX(0);
	box-shadow: none !important;
}

/* ----------------------------------------------------
 * Fullscreen Concentric Circles Round Effect (Intro Sequence)
 * ---------------------------------------------------- */
.blooopp-round-intro-canvas {
	position: absolute;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 25;
	overflow: hidden;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	will-change: opacity, transform;
}

#blooopp-loading-screen.blooopp-round-done .blooopp-round-intro-canvas {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 0.35s ease-out, visibility 0.35s ease-out;
}

.blooopp-round-cluster {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0) scale(0);
	width: var(--round-base-size);
	height: var(--round-base-size);
	pointer-events: none;
	will-change: transform, opacity;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-style: preserve-3d;
	contain: layout paint style;
}

:root {
	--round-base-size: min(130vh, 130vw);
	--round-color-1: #FCB07F;
	--round-color-2: #FF6584;
	--round-color-3: #F8AFC0;
	--round-color-4: #B3D28E;
	--round-center-dot: #000000;
}

.blooopp-round-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	border-radius: 50%;
	pointer-events: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.blooopp-round-1 {
	width: 100%;
	height: 100%;
	background-color: var(--round-color-1, #FCB07F);
	z-index: 1;
}

.blooopp-round-2 {
	width: 72%;
	height: 72%;
	background-color: var(--round-color-2, #FF6584);
	z-index: 2;
}

.blooopp-round-3 {
	width: 46%;
	height: 46%;
	background-color: var(--round-color-3, #F8AFC0);
	z-index: 3;
}

.blooopp-round-4 {
	width: 22%;
	height: 22%;
	background-color: var(--round-color-4, #B3D28E);
	z-index: 4;
}

.blooopp-round-center-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	width: max(16px, 3.2%);
	height: max(16px, 3.2%);
	border-radius: 50%;
	background-color: var(--round-center-dot, #000000);
	z-index: 5;
	pointer-events: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* ----------------------------------------------------
 * Buttery Smooth GPU Keyframe Animation:
 * Continuous, non-stalling, single-curve expansion
 * (Strictly positive velocity throughout: impossible to get stuck)
 * ---------------------------------------------------- */
@keyframes bloooppRoundClusterSmooth {
	0% {
		transform: translate3d(-50%, -50%, 0) scale(0);
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	76% {
		opacity: 1;
	}
	100% {
		transform: translate3d(-50%, -50%, 0) scale(4.4);
		opacity: 0;
	}
}

.has-round-effect:not(.blooopp-round-done) .blooopp-round-cluster {
	animation: bloooppRoundClusterSmooth 1.30s cubic-bezier(0.4, 0, 0.7, 0.85) both;
}

/* ----------------------------------------------------
 * Phase 1: Hide Name & Floating Elements During Round Intro
 * ---------------------------------------------------- */
#blooopp-loading-screen.has-round-effect:not(.blooopp-round-done) .blooopp-loader-center {
	opacity: 0 !important;
	pointer-events: none !important;
	transform: translate(-50%, -50%) scale(0.85) !important;
	visibility: hidden !important;
}

#blooopp-loading-screen.has-round-effect:not(.blooopp-round-done) .blooopp-loader-stage {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

#blooopp-loading-screen.has-round-effect:not(.blooopp-round-done) .blooopp-loader-elem {
	opacity: 0 !important;
	transform: translate(-50%, -50%) scale(0) !important;
}

/* ----------------------------------------------------
 * Phase 2: Show Name & Floating Elements When Round Finishes
 * ---------------------------------------------------- */
#blooopp-loading-screen.blooopp-round-done .blooopp-loader-center {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

#blooopp-loading-screen.blooopp-round-done .blooopp-loader-stage {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease-out;
}

#blooopp-loading-screen.is-opening .blooopp-loader-stage {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
	pointer-events: none !important;
}

/* Door Seam Subtle Line (Hidden for seamless edge) */
.blooopp-loader-seam {
	display: none !important;
}

/* ----------------------------------------------------
 * Floating Elements Layer (Bucks Sauce Smooth Entrance & Zero-Gravity Motion)
 * ---------------------------------------------------- */
.blooopp-loader-elem {
	position: absolute;
	z-index: 12;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: center center;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
	will-change: transform, opacity;
	opacity: 0;
	animation: bloooppElemEntrance 1.25s cubic-bezier(0.19, 1, 0.22, 1) both;
	animation-delay: var(--enter-delay, 0.15s);
	transition: transform var(--door-speed, 1.25s) cubic-bezier(0.42, 0, 0.15, 1),
	            opacity var(--door-speed, 1.25s) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth Bucks Sauce Fly-in & Bloom Entrance */
@keyframes bloooppElemEntrance {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) translate3d(var(--enter-offset-x, 0vw), var(--enter-offset-y, 14vh), 0) scale(0.25) rotate(var(--enter-rot, -8deg));
	}
	55% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1) rotate(0deg);
	}
}

/* If concentric circles round intro is active, pause elements until round finishes */
#blooopp-loading-screen.has-round-effect:not(.blooopp-round-done) .blooopp-loader-elem {
	animation-play-state: paused !important;
	opacity: 0 !important;
}

#blooopp-loading-screen.blooopp-round-done .blooopp-loader-elem {
	animation-play-state: running !important;
}

/* Inner Float & Bobbing Container ("Vibing" Layer) */
.blooopp-elem-inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: center center;
	will-change: transform;
	animation-fill-mode: both;
}

.blooopp-elem-inner img,
.blooopp-loader-elem img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	pointer-events: none;
	-webkit-user-drag: none;
	user-select: none;
	filter: none !important;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: transform 0.2s ease-out;
}

/* 6 Organic Ambient Float Paths ("Vibing" bob and gentle sway) */
.blooopp-elem-inner.blooopp-path-1,
.blooopp-loader-elem.blooopp-path-1 .blooopp-elem-inner {
	animation: bloooppDriftPath1 7.2s ease-in-out infinite alternate;
}
@keyframes bloooppDriftPath1 {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	33%  { transform: translate3d(-18px, -24px, 0) rotate(-6deg) scale(1.03); }
	66%  { transform: translate3d(14px, -12px, 0) rotate(5deg) scale(0.98); }
	100% { transform: translate3d(-22px, 18px, 0) rotate(-8deg) scale(1.02); }
}

.blooopp-elem-inner.blooopp-path-2,
.blooopp-loader-elem.blooopp-path-2 .blooopp-elem-inner {
	animation: bloooppDriftPath2 7.8s ease-in-out infinite alternate;
}
@keyframes bloooppDriftPath2 {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	33%  { transform: translate3d(20px, -18px, 0) rotate(7deg) scale(0.97); }
	66%  { transform: translate3d(-16px, 16px, 0) rotate(-5deg) scale(1.03); }
	100% { transform: translate3d(18px, 22px, 0) rotate(8deg) scale(1); }
}

.blooopp-elem-inner.blooopp-path-3,
.blooopp-loader-elem.blooopp-path-3 .blooopp-elem-inner {
	animation: bloooppDriftPath3 8.2s ease-in-out infinite alternate;
}
@keyframes bloooppDriftPath3 {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	33%  { transform: translate3d(-18px, 20px, 0) rotate(-6deg) scale(1.02); }
	66%  { transform: translate3d(20px, -16px, 0) rotate(6deg) scale(0.98); }
	100% { transform: translate3d(-14px, -22px, 0) rotate(-5deg) scale(1.01); }
}

.blooopp-elem-inner.blooopp-path-4,
.blooopp-loader-elem.blooopp-path-4 .blooopp-elem-inner {
	animation: bloooppDriftPath4 7.5s ease-in-out infinite alternate;
}
@keyframes bloooppDriftPath4 {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	33%  { transform: translate3d(18px, 18px, 0) rotate(5deg) scale(1.02); }
	66%  { transform: translate3d(-20px, -14px, 0) rotate(-7deg) scale(0.97); }
	100% { transform: translate3d(16px, -20px, 0) rotate(6deg) scale(1.03); }
}

.blooopp-elem-inner.blooopp-path-5,
.blooopp-loader-elem.blooopp-path-5 .blooopp-elem-inner {
	animation: bloooppDriftPath5 8.5s ease-in-out infinite alternate;
}
@keyframes bloooppDriftPath5 {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	33%  { transform: translate3d(-16px, -18px, 0) rotate(-5deg) scale(0.98); }
	66%  { transform: translate3d(18px, 16px, 0) rotate(6deg) scale(1.03); }
	100% { transform: translate3d(-18px, 20px, 0) rotate(-7deg) scale(1); }
}

.blooopp-elem-inner.blooopp-path-6,
.blooopp-loader-elem.blooopp-path-6 .blooopp-elem-inner {
	animation: bloooppDriftPath6 7.0s ease-in-out infinite alternate;
}
@keyframes bloooppDriftPath6 {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
	33%  { transform: translate3d(18px, -20px, 0) rotate(6deg) scale(1.02); }
	66%  { transform: translate3d(-16px, 18px, 0) rotate(-6deg) scale(0.97); }
	100% { transform: translate3d(20px, 16px, 0) rotate(7deg) scale(1.01); }
}

/* Spin modifier classes */
.blooopp-spin-slow img {
	animation: bloooppSpin 20s linear infinite;
}
.blooopp-spin-medium img {
	animation: bloooppSpin 12s linear infinite;
}
.blooopp-spin-fast img {
	animation: bloooppSpin 6s linear infinite;
}

@keyframes bloooppSpin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* ----------------------------------------------------
 * Active Opening State (.is-opening)
 * Revealing the website underneath
 * ---------------------------------------------------- */
#blooopp-loading-screen.is-opening {
	pointer-events: none !important;
}

#blooopp-loading-screen.is-opening,
#blooopp-loading-screen.is-opening .blooopp-loader-center,
#blooopp-loading-screen.is-opening .blooopp-loader-brand-logo,
#blooopp-loading-screen.is-opening .blooopp-loader-elem,
#blooopp-loading-screen.is-opening .blooopp-elem-inner,
#blooopp-loading-screen.is-opening .blooopp-elem-inner img,
#blooopp-loading-screen.is-opening .blooopp-char,
#blooopp-loading-screen.is-opening .blooopp-loader-backdrop,
#blooopp-loading-screen.is-opening .blooopp-loader-door {
	transition: none !important;
}

#blooopp-loading-screen.is-opening .blooopp-loader-seam {
	opacity: 0;
}

/* Pause the ambient wobble so exit motion is crystal-clean and non-jittery */
#blooopp-loading-screen.is-opening .blooopp-elem-inner {
	animation-play-state: paused !important;
}

/* Ensure characters and brand logo remain fully visible and settled as center container performs 3D forward zoom */
#blooopp-loading-screen.is-opening .blooopp-char,
#blooopp-loading-screen.is-opening .blooopp-loader-brand-logo {
	opacity: 1 !important;
	transform: translate3d(0, 0, 0) scale(1) !important;
	filter: none !important;
	animation: none !important;
}

/* ----------------------------------------------------
 * 1. Bucks Sauce 3D "Come Forward Ahead & Smooth Reveal"
 * Pure, continuous fluid motion:
 * - All floating elements and center text maintain 100% visibility (no halfway fading).
 * - Elements complete their full trajectories flying completely off-screen beyond viewport boundaries.
 * - The backdrop unveils the website underneath while the elements fly all the way out.
 * ---------------------------------------------------- */
#blooopp-loading-screen.anim-smooth_fade {
	perspective: 1200px;
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
	will-change: opacity;
}

#blooopp-loading-screen.anim-smooth_fade.is-opening {
	animation: bloooppScreenCleanup calc(var(--door-speed, 1.4s) + 0.25s) ease forwards !important;
	pointer-events: none !important;
}

@keyframes bloooppScreenCleanup {
	0% {
		opacity: 1;
		visibility: visible;
	}
	98% {
		opacity: 1;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

#blooopp-loading-screen.anim-smooth_fade.is-opening .blooopp-loader-backdrop {
	animation: bloooppBackdropDissolve var(--door-speed, 1.4s) cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
}

@keyframes bloooppBackdropDissolve {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 1;
	}
	68% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

#blooopp-loading-screen.anim-smooth_fade.is-opening .blooopp-loader-door-left,
#blooopp-loading-screen.anim-smooth_fade.is-opening .blooopp-loader-door-right {
	transform: none !important;
	animation: bloooppBackdropDissolve var(--door-speed, 1.4s) cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
}

/* Center Brand: Glides up in authentic 3D perspective, tilting forward and scaling slightly */
#blooopp-loading-screen.anim-smooth_fade.is-opening .blooopp-loader-center {
	animation: bloooppCenterComeOut var(--door-speed, 1.4s) cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
	opacity: 1 !important;
	will-change: transform, filter;
}

@keyframes bloooppCenterComeOut {
	0% {
		transform: translate(-50%, -50%) translate3d(0, 0, 0) rotateX(0deg) scale(1);
		opacity: 1;
		filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
	}
	100% {
		transform: translate(-50%, -50%) translate3d(0, -110vh, 220px) rotateX(-14deg) scale(1.22);
		opacity: 1;
		filter: drop-shadow(0 35px 55px rgba(0, 0, 0, 0.55));
	}
}

/* Floating Elements: Fly through 3D space with natural pitch, yaw, roll and depth shadows */
#blooopp-loading-screen.anim-smooth_fade.is-opening .blooopp-loader-elem {
	animation: bloooppElemComeOut var(--door-speed, 1.4s) cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
	opacity: 1 !important;
	will-change: transform, filter;
}

@keyframes bloooppElemComeOut {
	0% {
		transform: translate(-50%, -50%) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
		opacity: 1;
		filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25));
	}
	100% {
		transform: translate(-50%, -50%) translate3d(var(--disperse-x, 0vw), var(--disperse-y, 0vh), var(--disperse-z, 220px)) rotateX(var(--disperse-rot-x, 12deg)) rotateY(var(--disperse-rot-y, 14deg)) rotateZ(var(--disperse-rot-z, 15deg)) scale(var(--disperse-scale, 1.10));
		opacity: 1;
		filter: drop-shadow(0 26px 45px rgba(0, 0, 0, 0.45));
	}
}

/* 2. Standard Split Doors (Slide Left & Right) */
#blooopp-loading-screen.anim-split_doors.is-opening .blooopp-loader-door-left {
	transform: translateX(-102%);
}
#blooopp-loading-screen.anim-split_doors.is-opening .blooopp-loader-door-right {
	transform: translateX(102%);
}

#blooopp-loading-screen.anim-split_doors.is-opening .blooopp-char.char-door-left {
	transform: translate3d(-115vw, 0, 0) scale(1) !important;
	opacity: 1 !important;
	transition: transform var(--door-speed, 1s) cubic-bezier(0.77, 0, 0.175, 1) !important;
}
#blooopp-loading-screen.anim-split_doors.is-opening .blooopp-char.char-door-right {
	transform: translate3d(115vw, 0, 0) scale(1) !important;
	opacity: 1 !important;
	transition: transform var(--door-speed, 1s) cubic-bezier(0.77, 0, 0.175, 1) !important;
}

#blooopp-loading-screen.anim-split_doors.is-opening .blooopp-loader-elem.door-target-left {
	animation: none !important;
	transform: translate(-50%, -50%) translate3d(-115vw, 0, 0) scale(1) !important;
	opacity: 1 !important;
	transition: transform var(--door-speed, 1s) cubic-bezier(0.77, 0, 0.175, 1) !important;
}
#blooopp-loading-screen.anim-split_doors.is-opening .blooopp-loader-elem.door-target-right {
	animation: none !important;
	transform: translate(-50%, -50%) translate3d(115vw, 0, 0) scale(1) !important;
	opacity: 1 !important;
	transition: transform var(--door-speed, 1s) cubic-bezier(0.77, 0, 0.175, 1) !important;
}
#blooopp-loading-screen.anim-split_doors.is-opening .blooopp-loader-elem.door-target-center {
	animation: bloooppElemComeOut var(--door-speed, 1s) cubic-bezier(0.77, 0, 0.175, 1) forwards !important;
	opacity: 1 !important;
}

/* 3. 3D Perspective Vault Doors */
#blooopp-loading-screen.anim-split_doors_3d {
	perspective: 1400px;
}
#blooopp-loading-screen.anim-split_doors_3d .blooopp-loader-door-left {
	transform-origin: left center;
}
#blooopp-loading-screen.anim-split_doors_3d .blooopp-loader-door-right {
	transform-origin: right center;
}
#blooopp-loading-screen.anim-split_doors_3d.is-opening .blooopp-loader-door-left {
	transform: rotateY(-88deg) translateX(-20%);
	opacity: 0.7;
}
#blooopp-loading-screen.anim-split_doors_3d.is-opening .blooopp-loader-door-right {
	transform: rotateY(88deg) translateX(20%);
	opacity: 0.7;
}

/* 4. Horizon Slide */
#blooopp-loading-screen.anim-horizon_slide.is-opening .blooopp-loader-door-left {
	transform: translateX(-102%) translateY(-10%);
}
#blooopp-loading-screen.anim-horizon_slide.is-opening .blooopp-loader-door-right {
	transform: translateX(102%) translateY(10%);
}

/* 5. Cinema Zoom Out & 3D Fly-Through Reveal */
#blooopp-loading-screen.anim-zoom_out {
	transform-origin: 50% 50%;
	perspective: 1200px;
	transform-style: preserve-3d;
	will-change: transform, opacity;
	transition: transform var(--door-speed, 1.2s) cubic-bezier(0.16, 1, 0.3, 1),
	            opacity var(--door-speed, 1.2s) cubic-bezier(0.22, 1, 0.36, 1);
}

#blooopp-loading-screen.anim-zoom_out.is-opening {
	animation: bloooppScreenDissolve var(--door-speed, 1.2s) cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
	pointer-events: none !important;
}

#blooopp-loading-screen.anim-zoom_out.is-opening .blooopp-loader-door-left,
#blooopp-loading-screen.anim-zoom_out.is-opening .blooopp-loader-door-right,
#blooopp-loading-screen.anim-zoom_out.is-opening .blooopp-loader-backdrop {
	transform: none !important;
	animation: bloooppBackdropDissolve var(--door-speed, 1.2s) cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

#blooopp-loading-screen.anim-zoom_out.is-opening .blooopp-loader-center {
	animation: bloooppCenterComeOut var(--door-speed, 1.2s) cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

#blooopp-loading-screen.anim-zoom_out.is-opening .blooopp-loader-elem {
	animation: bloooppElemComeOut var(--door-speed, 1.2s) cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
	animation-delay: var(--disperse-delay, 0s) !important;
}

/* 6. Cinema Zoom Forward & Smooth Fade */
#blooopp-loading-screen.anim-zoom_in {
	transform-origin: 50% 50%;
	will-change: transform, opacity;
	transition: transform var(--door-speed, 1.1s) cubic-bezier(0.22, 1, 0.36, 1),
	            opacity var(--door-speed, 1.1s) cubic-bezier(0.22, 1, 0.36, 1);
}

#blooopp-loading-screen.anim-zoom_in.is-opening {
	transform: scale(1.12);
	opacity: 0 !important;
	pointer-events: none !important;
}

#blooopp-loading-screen.anim-zoom_in.is-opening .blooopp-loader-door-left,
#blooopp-loading-screen.anim-zoom_in.is-opening .blooopp-loader-door-right,
#blooopp-loading-screen.anim-zoom_in.is-opening .blooopp-loader-backdrop {
	transform: none !important;
	opacity: 0 !important;
}

#blooopp-loading-screen.anim-zoom_in.is-opening .blooopp-loader-center {
	transform: translate(-50%, -50%) scale(1) !important;
	opacity: 0 !important;
}

#blooopp-loading-screen.anim-zoom_in.is-opening .blooopp-loader-elem {
	animation: bloooppElemComeOut var(--door-speed, 1.1s) cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
	opacity: 1 !important;
}

/* ----------------------------------------------------
 * Finished State (.is-complete)
 * Completely remove from visual tree & layout
 * ---------------------------------------------------- */
#blooopp-loading-screen.is-complete {
	display: none !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

/* ----------------------------------------------------
 * Mobile Performance & Layout Optimization
 * Guarantees silky-smooth 60fps animations on iOS & Android
 * ---------------------------------------------------- */
@media (max-width: 768px) {
	.blooopp-loader-brand-title {
		font-size: min(var(--brand-font-size, 68px), 9vw) !important;
		max-width: 90vw;
		gap: 4px;
	}

	.blooopp-char {
		animation-duration: 0.7s;
	}

	/* Scale down floating elements on mobile so they don't clutter the small screen */
	.blooopp-loader-elem {
		max-width: 28vw !important;
	}

	.blooopp-loader-elem img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Tighter drift paths on mobile to prevent clipping phone screen edges */
	@keyframes bloooppDriftPath1 {
		0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
		50%  { transform: translate3d(-10px, -12px, 0) rotate(-4deg); }
		100% { transform: translate3d(10px, 12px, 0) rotate(4deg); }
	}
	@keyframes bloooppDriftPath2 {
		0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
		50%  { transform: translate3d(12px, -10px, 0) rotate(5deg); }
		100% { transform: translate3d(-10px, 12px, 0) rotate(-4deg); }
	}
	@keyframes bloooppDriftPath3 {
		0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
		50%  { transform: translate3d(-10px, 10px, 0) rotate(-4deg); }
		100% { transform: translate3d(10px, -10px, 0) rotate(4deg); }
	}
	@keyframes bloooppDriftPath4 {
		0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
		50%  { transform: translate3d(10px, 12px, 0) rotate(4deg); }
		100% { transform: translate3d(-10px, -10px, 0) rotate(-3deg); }
	}
	@keyframes bloooppDriftPath5 {
		0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
		50%  { transform: translate3d(-10px, -10px, 0) rotate(-3deg); }
		100% { transform: translate3d(10px, 10px, 0) rotate(4deg); }
	}
	@keyframes bloooppDriftPath6 {
		0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
		50%  { transform: translate3d(10px, -10px, 0) rotate(5deg); }
		100% { transform: translate3d(-10px, 10px, 0) rotate(-3deg); }
	}
}

/* ----------------------------------------------------
 * Accessibility: Prefers-Reduced-Motion Support
 * Disables 3D scaling and rapid transforms, using simple fade
 * ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.blooopp-loader-elem,
	.blooopp-elem-inner,
	.blooopp-char,
	.blooopp-loader-brand-logo,
	.blooopp-round-cluster {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	#blooopp-loading-screen.anim-smooth_fade.is-opening,
	#blooopp-loading-screen.anim-smooth_fade.is-opening .blooopp-loader-backdrop,
	#blooopp-loading-screen.anim-smooth_fade.is-opening .blooopp-loader-center,
	#blooopp-loading-screen.anim-smooth_fade.is-opening .blooopp-loader-elem {
		animation: bloooppSimpleFade 0.6s ease forwards !important;
		transform: none !important;
		filter: none !important;
	}

	@keyframes bloooppSimpleFade {
		0%   { opacity: 1; }
		100% { opacity: 0; visibility: hidden; }
	}
}