/*
 * CaseCreator — Page Loader / Preloader
 *
 * Covers: three animation styles (dots, ring, logo-pulse).
 * Hidden by JS via .page-loader--hidden → visibility + opacity transition.
 */

/* =========================================================================
   Base Loader
   ========================================================================= */
.page-loader {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var( --cc-loader-bg, #1a1a22 );
	z-index: 9999;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	will-change: opacity;
}

.page-loader--hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.page-loader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.page-loader__text {
	margin: 0;
	color: color-mix(in srgb, var(--cc-loader-dot, #c2f24a) 55%, #fff);
	font-family: var(--cc-font-primary, sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* =========================================================================
   Style 1: Three Bouncing Dots (default)
   ========================================================================= */
.page-loader__dots {
	display: flex;
	gap: 10px;
	align-items: center;
}

.page-loader__dot {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var( --cc-loader-dot, #c2f24a );
	animation: cc-loader-bounce 1.2s infinite ease-in-out both;
}

.page-loader__dot:nth-child(1) { animation-delay: -0.32s; }
.page-loader__dot:nth-child(2) { animation-delay: -0.16s; }
.page-loader__dot:nth-child(3) { animation-delay: 0s; }

@keyframes cc-loader-bounce {
	0%, 80%, 100% {
		transform: scale( 0 );
		opacity: 0.4;
	}
	40% {
		transform: scale( 1 );
		opacity: 1;
	}
}

/* =========================================================================
   Style 2: Spinning Ring
   ========================================================================= */
.page-loader__ring {
	color: var( --cc-loader-dot, #c2f24a );
	animation: cc-loader-spin 0.9s linear infinite;
	display: flex;
	align-items: center;
	justify-content: center;
}

@keyframes cc-loader-spin {
	to { transform: rotate( 360deg ); }
}

/* =========================================================================
   Style 3: Logo Pulse
   ========================================================================= */
.page-loader__logo {
	animation: cc-loader-pulse 1.5s ease-in-out infinite;
}

.page-loader__logo-img {
	max-height: 64px;
	width: auto;
	/* Invert to white if the logo is dark (works for flat/mono logos) */
	filter: brightness( 0 ) invert( 1 );
}

@keyframes cc-loader-pulse {
	0%, 100% {
		opacity: 1;
		transform: scale( 1 );
	}
	50% {
		opacity: 0.5;
		transform: scale( 0.92 );
	}
}

/* Dots under logo-pulse style */
.page-loader--logo-pulse .page-loader__dots {
	margin-top: 0.5rem;
}

/* Style 4: animated custom-case brand mark */
.page-loader__case {
	position: relative;
	display: grid;
	place-items: center;
	width: 92px;
	height: 174px;
	border: 5px solid color-mix(in srgb, var(--cc-loader-dot, #c2f24a) 35%, #15162f);
	border-radius: 24px;
	background:
		radial-gradient(circle at 25% 25%, rgba(255,255,255,.45), transparent 22%),
		linear-gradient(145deg, #a487da, #57bdea 52%, #38bd9c);
	box-shadow: 0 25px 55px -25px var(--cc-loader-dot, #c2f24a);
	animation: cc-loader-case 1.45s ease-in-out infinite;
}

.page-loader__case span {
	color: #fff;
	font-family: var(--cc-font-display, sans-serif);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -.09em;
}

.page-loader__case i {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 27px;
	height: 27px;
	border-radius: 9px;
	background: #1b1c44;
	box-shadow: inset 0 0 0 5px rgba(255,255,255,.12);
}

@keyframes cc-loader-case {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50% { transform: translateY(-12px) rotate(3deg); }
}

/* =========================================================================
   Style 5: SVG Case (design preview — matches index1-pure.html splash)
   ========================================================================= */
.page-loader--svg-case {
	background: #eef1f8;
	padding: 0;
	overflow: hidden;
}

.page-loader--svg-case > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* =========================================================================
   Reduced Motion
   ========================================================================= */
@media ( prefers-reduced-motion: reduce ) {
	.page-loader__dot,
	.page-loader__ring,
	.page-loader__logo {
		animation: none;
	}

	.page-loader__dot {
		opacity: 1;
		transform: scale( 1 );
	}
}