/**
 * Advanced Page Loading Pro — Public Styles
 *
 * Contains:
 *  - Loader overlay base styles
 *  - 5 animation style variants
 *  - Keyframe animations
 *  - Responsive adjustments
 *
 * @package AdvancedPageLoadingPro
 */

/* =========================================================
   FONT IMPORT (Google Fonts Almarai — closest to "Almiri")
   Loaded via PHP enqueue; this @import is a fallback only.
   ========================================================= */
/* @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap'); */

/* =========================================================
   OVERLAY BASE
   ========================================================= */
#aplp-loader-overlay {
	/* Positioning */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* Layout */
	display: flex;
	align-items: center;
	justify-content: center;

	/* Defaults (overridden by dynamic inline CSS) */
	background: #1a1a2e;
	z-index: 999999;

	/* Smooth hide */
	opacity: 1;
	visibility: visible;
	transition: opacity 600ms ease, visibility 600ms ease;

	/* Prevent content flash */
	will-change: opacity, visibility;

	/* Contain paint within overlay */
	contain: strict;
}

/**
 * Non-fullscreen mode: centered card.
 */
#aplp-loader-overlay:not(.aplp-fullscreen) {
	width: auto;
	height: auto;
	min-width: 280px;
	min-height: 140px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 40px 48px;
}

/**
 * Hidden state applied by JS after page load.
 */
#aplp-loader-overlay.aplp-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* =========================================================
   INNER CONTAINER
   ========================================================= */
.aplp-loader-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* =========================================================
   TEXT STYLES — base
   ========================================================= */
.aplp-loader-text {
	/* Default font — overridden by dynamic CSS */
	font-family: 'Almarai', 'Segoe UI', system-ui, sans-serif;
	font-size: 32px;
	font-weight: 600;
	color: #ffffff;
	text-align: center;
	letter-spacing: 2px;
	margin: 0;
	padding: 0;
	line-height: 1.3;

	/* Prevent selection during animation */
	user-select: none;
}

/* =========================================================
   STYLE 1 — TEXT FADE (animated fade in/out)
   ========================================================= */
.style-text-fade .aplp-loader-text {
	animation: aplp-text-fade 1200ms ease-in-out infinite alternate;
}

@keyframes aplp-text-fade {
	0%   { opacity: 0.1; transform: scale(0.97); }
	100% { opacity: 1;   transform: scale(1); }
}

/* =========================================================
   STYLE 2 — TEXT TYPING
   ========================================================= */
.style-text-typing .aplp-loader-text.aplp-typing {
	overflow: hidden;
	white-space: nowrap;
	border-right: 3px solid currentColor;
	/* Width animation drives the "typing" reveal */
	animation:
		aplp-typing-reveal 1200ms steps(40, end) forwards,
		aplp-cursor-blink 750ms step-end infinite;
}

@keyframes aplp-typing-reveal {
	from { width: 0; }
	to   { width: 100%; }
}

@keyframes aplp-cursor-blink {
	0%, 100% { border-color: transparent; }
	50%       { border-color: currentColor; }
}

/* =========================================================
   STYLE 3 — STATIC TEXT
   ========================================================= */
.style-text-static .aplp-loader-text {
	/* No animation — static display */
	animation: none;
}

/* =========================================================
   STYLE 4 — LOGO SPINNING
   ========================================================= */
.aplp-loader-logo {
	display: block;
	object-fit: contain;

	/* Default size overridden by dynamic CSS */
	width: 120px;
	height: 120px;
}

.style-logo-spin .aplp-loader-logo {
	animation: aplp-logo-spin 1500ms linear infinite;
}

@keyframes aplp-logo-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* =========================================================
   STYLE 5 — LOGO PULSE / BOUNCE
   ========================================================= */
.style-logo-pulse .aplp-loader-logo {
	animation: aplp-logo-pulse 1000ms ease-in-out infinite;
}

@keyframes aplp-logo-pulse {
	0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,0.35); }
	50%  { transform: scale(1.15); box-shadow: 0 0 0 18px rgba(255,255,255,0); }
	100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* =========================================================
   DEFAULT SVG SPINNER
   ========================================================= */
.aplp-default-spinner {
	color: #ffffff;
}

.style-logo-spin .aplp-default-spinner {
	animation: aplp-logo-spin 1000ms linear infinite;
}

.style-logo-pulse .aplp-default-spinner {
	animation: aplp-logo-pulse 1000ms ease-in-out infinite;
}

/* =========================================================
   ADMIN PREVIEW MODE
   ========================================================= */
.aplp-preview-mode {
	position: absolute;
	pointer-events: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 480px) {
	.aplp-loader-text {
		font-size: clamp(16px, 6vw, 32px);
	}

	.aplp-loader-logo {
		width: clamp(60px, 30vw, 120px) !important;
		height: clamp(60px, 30vw, 120px) !important;
	}

	/* Typing style cannot use fixed width on small screens */
	.style-text-typing .aplp-loader-text.aplp-typing {
		white-space: normal;
		border-right: none;
		animation: aplp-text-fade 1200ms ease-in-out infinite alternate;
	}
}

/* =========================================================
   REDUCED MOTION — accessibility
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	#aplp-loader-overlay,
	.aplp-loader-text,
	.aplp-loader-logo,
	.aplp-default-spinner {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}