/* ==========================================================================
   BO Intro -galliu — Frontend Styles
   كل الكلاسات الأساسية تبدأ بـ BO أو bo-intro
   ========================================================================== */

* {
	box-sizing: border-box;
}

.bo-intro-screen {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bo-bg-color, #0a0a0a);
	z-index: var(--bo-z-index, 999999);
	transition: opacity var(--bo-fade-duration, 0.6s) ease, visibility var(--bo-fade-duration, 0.6s) ease;
	opacity: 1;
	visibility: visible;
	overflow: hidden;
}

.bo-intro-screen.bo-intro-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* تأمين عدم اسكرول الصفحة وقت ظهور الانترو */
body.bo-intro-active {
	overflow: hidden !important;
	height: 100vh !important;
}

/* غلاف الـ Padding من 4 اتجاهات */
.bo-intro-padding-wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--bo-padding-top, 0px);
	padding-right: var(--bo-padding-right, 0px);
	padding-bottom: var(--bo-padding-bottom, 0px);
	padding-left: var(--bo-padding-left, 0px);
	box-sizing: border-box;
}

.bo-intro-content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* الوهج المحيط بالفريم - يحاكي الصورة المرجعية */
.bo-intro-frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bo-frame-size, 150px);
	height: var(--bo-frame-size, 150px);
	border: var(--bo-frame-border-width, 1px) solid var(--bo-frame-border-color, #ffffff);
	border-radius: var(--bo-frame-radius, 50%);
	background: transparent;
	box-shadow: 0 0 80px 40px color-mix(in srgb, var(--bo-accent-color, #ff9900) 35%, transparent);
	filter: drop-shadow(0 0 60px color-mix(in srgb, var(--bo-accent-color, #ff9900) 45%, transparent));
}

/* ======================================================
   وهج يلف على حدود الدايرة / الفريم
   pseudo-element يدور فوق الحدود بشعاع بيلف
   ====================================================== */
.bo-intro-frame::before {
	content: '';
	position: absolute;
	inset: calc( var(--bo-frame-border-width, 1px) * -3 );
	border-radius: inherit;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 60deg,
		color-mix(in srgb, var(--bo-accent-color, #ff9900) 90%, white) 120deg,
		color-mix(in srgb, var(--bo-accent-color, #ff9900) 40%, transparent) 160deg,
		transparent 200deg,
		transparent 360deg
	);
	-webkit-mask:
		radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 2px));
	mask:
		radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 2px));
	animation: BO-border-glow-spin var(--bo-frame-anim-speed, 2s) linear infinite;
	z-index: 2;
	pointer-events: none;
}

/* نقطة ضوء مركّزة تلف مع الشعاع */
.bo-intro-frame::after {
	content: '';
	position: absolute;
	inset: calc( var(--bo-frame-border-width, 1px) * -3 );
	border-radius: inherit;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 108deg,
		white 120deg,
		transparent 132deg,
		transparent 360deg
	);
	-webkit-mask:
		radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 2px));
	mask:
		radial-gradient(farthest-side, transparent calc(100% - 3px), white calc(100% - 2px));
	animation: BO-border-glow-spin var(--bo-frame-anim-speed, 2s) linear infinite;
	filter: blur(1px);
	z-index: 3;
	pointer-events: none;
}

@keyframes BO-border-glow-spin {
	from { transform: rotate(0deg);   }
	to   { transform: rotate(360deg); }
}

/* لو frame_glow = off → نخفي الـ pseudo-elements */
.bo-no-glow::before,
.bo-no-glow::after {
	display: none !important;
}

/* فيديو / صورة / جيف داخل الفريم */
.bo-intro-frame-media {
	overflow: visible; /* لازم visible عشان pseudo-elements الوهج تظهر خارج الحدود */
}

/* غلاف بادنج المحتوى (صورة/فيديو/جيف) داخل الفريم - 4 اتجاهات */
.bo-intro-content-padding {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: inherit;
	padding-top: var(--bo-content-padding-top, 0px);
	padding-right: var(--bo-content-padding-right, 0px);
	padding-bottom: var(--bo-content-padding-bottom, 0px);
	padding-left: var(--bo-content-padding-left, 0px);
	box-sizing: border-box;
}

.BO-intro-video,
.BO-intro-image,
.BO-intro-gif {
	width: var(--bo-media-size, 100%);
	height: var(--bo-media-size, 100%);
	object-fit: cover;
	display: block;
	border-radius: inherit;
	flex-shrink: 0;
}

/* ==========================================================================
   شريط اللودنج - بالعرض (Horizontal)
   ========================================================================== */
.BO-loading-frame-horizontal {
	width: var(--bo-loading-width, 250px);
	height: auto;
	min-height: var(--bo-frame-size, 60px);
	flex-direction: column;
	gap: 14px;
	border: none;
	box-shadow: none;
	filter: none;
}

.BO-loading-track-horizontal {
	width: 100%;
	height: var(--bo-loading-thickness, 4px);
	background-color: var(--bo-loading-track-color, #222);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}

.BO-loading-bar-horizontal {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background-color: var(--bo-loading-bar-color, #ff9900);
	border-radius: 999px;
	box-shadow: 0 0 12px 2px color-mix(in srgb, var(--bo-loading-bar-color, #ff9900) 60%, transparent);
	transition: width 0.15s linear;
}

/* ==========================================================================
   شريط اللودنج - بالطول (Vertical)
   ========================================================================== */
.BO-loading-frame-vertical {
	width: auto;
	height: var(--bo-loading-height, 250px);
	flex-direction: column-reverse;
	align-items: center;
	gap: 14px;
	border: none;
	box-shadow: none;
	filter: none;
}

.BO-loading-track-vertical {
	width: var(--bo-loading-thickness, 4px);
	height: 100%;
	background-color: var(--bo-loading-track-color, #222);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: flex-end;
}

.BO-loading-bar-vertical {
	width: 100%;
	height: 0%;
	background-color: var(--bo-loading-bar-color, #ff9900);
	border-radius: 999px;
	box-shadow: 0 0 12px 2px color-mix(in srgb, var(--bo-loading-bar-color, #ff9900) 60%, transparent);
	transition: height 0.15s linear;
}

/* ==========================================================================
   نسبة اللودنج
   ========================================================================== */
.BO-loading-percent {
	color: var(--bo-text-color, #fff);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	direction: ltr;
}

/* ==========================================================================
   التوافق مع جميع الشاشات
   ========================================================================== */
@media (max-width: 992px) {
	.bo-intro-frame {
		width: calc(var(--bo-frame-size, 150px) * 0.85);
		height: calc(var(--bo-frame-size, 150px) * 0.85);
	}
	.BO-loading-frame-horizontal {
		width: min(var(--bo-loading-width, 250px), 80vw);
	}
	.BO-loading-frame-vertical {
		height: min(var(--bo-loading-height, 250px), 60vh);
	}
}

@media (max-width: 480px) {
	.bo-intro-frame {
		width: calc(var(--bo-frame-size, 150px) * 0.65);
		height: calc(var(--bo-frame-size, 150px) * 0.65);
	}
	.BO-loading-frame-horizontal {
		width: min(var(--bo-loading-width, 250px), 75vw);
	}
	.BO-loading-frame-vertical {
		height: min(var(--bo-loading-height, 250px), 50vh);
	}
	.BO-loading-percent {
		font-size: 15px;
	}
}

@media (orientation: landscape) and (max-height: 500px) {
	.bo-intro-frame {
		width: calc(var(--bo-frame-size, 150px) * 0.6);
		height: calc(var(--bo-frame-size, 150px) * 0.6);
	}
	.BO-loading-frame-vertical {
		height: 70vh;
	}
}

/* ==========================================================================
   الأنيميشن — Keyframes
   ========================================================================== */

/* ---- Frame: Pulse ---- */
@keyframes BO-frame-pulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.08); }
}
.bo-frame-anim-pulse {
	animation: BO-frame-pulse var(--bo-frame-anim-speed, 2s) ease-in-out infinite;
}

/* ---- Frame: Breathe (نبض ناعم جداً + وهج) ---- */
@keyframes BO-frame-breathe {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 80px 40px color-mix(in srgb, var(--bo-accent-color, #ff9900) 35%, transparent);
	}
	50% {
		transform: scale(1.04);
		box-shadow: 0 0 110px 60px color-mix(in srgb, var(--bo-accent-color, #ff9900) 55%, transparent);
	}
}
.bo-frame-anim-breathe {
	animation: BO-frame-breathe var(--bo-frame-anim-speed, 2s) ease-in-out infinite;
}

/* ---- Frame: Rotate ---- */
@keyframes BO-frame-rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.bo-frame-anim-rotate {
	animation: BO-frame-rotate var(--bo-frame-anim-speed, 2s) linear infinite;
}
/* لما يدور الفريم، المحتوى جواه يفضل ثابت */
.bo-frame-anim-rotate .bo-intro-content-padding,
.bo-frame-anim-rotate .BO-intro-image,
.bo-frame-anim-rotate .BO-intro-video,
.bo-frame-anim-rotate .BO-intro-gif {
	animation: BO-frame-counter-rotate var(--bo-frame-anim-speed, 2s) linear infinite;
}
@keyframes BO-frame-counter-rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(-360deg); }
}

/* ---- Frame: Bounce ---- */
@keyframes BO-frame-bounce {
	0%, 100% { transform: translateY(0); }
	30%       { transform: translateY(-12px); }
	60%       { transform: translateY(-5px); }
}
.bo-frame-anim-bounce {
	animation: BO-frame-bounce var(--bo-frame-anim-speed, 2s) ease-in-out infinite;
}

/* ==========================================================================
   أنيميشن الوهج في الخلفية
   ========================================================================== */

/* ---- Glow: Pulse ---- */
@keyframes BO-glow-pulse {
	0%, 100% {
		background:
			radial-gradient(ellipse 55% 45% at 50% 50%,
				color-mix(in srgb, var(--bo-accent-color, #ff9900) 18%, transparent) 0%,
				transparent 70%),
			var(--bo-bg-color, #0a0a0a);
	}
	50% {
		background:
			radial-gradient(ellipse 75% 65% at 50% 50%,
				color-mix(in srgb, var(--bo-accent-color, #ff9900) 35%, transparent) 0%,
				transparent 70%),
			var(--bo-bg-color, #0a0a0a);
	}
}
.bo-glow-anim-pulse {
	animation: BO-glow-pulse var(--bo-glow-anim-speed, 3s) ease-in-out infinite;
}

/* ---- Glow: Drift (يتمايل) ---- */
@keyframes BO-glow-drift {
	0%   {
		background:
			radial-gradient(ellipse 60% 50% at 48% 52%,
				color-mix(in srgb, var(--bo-accent-color, #ff9900) 25%, transparent) 0%,
				transparent 68%),
			var(--bo-bg-color, #0a0a0a);
	}
	33%  {
		background:
			radial-gradient(ellipse 65% 55% at 53% 47%,
				color-mix(in srgb, var(--bo-accent-color, #ff9900) 28%, transparent) 0%,
				transparent 65%),
			var(--bo-bg-color, #0a0a0a);
	}
	66%  {
		background:
			radial-gradient(ellipse 58% 60% at 46% 54%,
				color-mix(in srgb, var(--bo-accent-color, #ff9900) 22%, transparent) 0%,
				transparent 72%),
			var(--bo-bg-color, #0a0a0a);
	}
	100% {
		background:
			radial-gradient(ellipse 60% 50% at 48% 52%,
				color-mix(in srgb, var(--bo-accent-color, #ff9900) 25%, transparent) 0%,
				transparent 68%),
			var(--bo-bg-color, #0a0a0a);
	}
}
.bo-glow-anim-drift {
	animation: BO-glow-drift var(--bo-glow-anim-speed, 3s) ease-in-out infinite;
}

/* الخلفية الأساسية تكون radial-gradient حتى بدون أنيميشن */
.bo-intro-screen:not(.bo-glow-anim-pulse):not(.bo-glow-anim-drift) {
	background:
		radial-gradient(ellipse 55% 45% at 50% 50%,
			color-mix(in srgb, var(--bo-accent-color, #ff9900) 18%, transparent) 0%,
			transparent 70%),
		var(--bo-bg-color, #0a0a0a);
}