/* ==========================================================
   FFV Page Loader
   Full-screen black overlay that plays a self-drawing animation
   of the Foundation For Feminine Values mark, then fades out
   once the real page is ready (see mobile-navigator... no,
   ffv-page-loader.js for the show/hide logic).
   ========================================================== */

html.ffv-loader-active,
html.ffv-loader-active body {
	overflow: hidden !important;
	height: 100%;
}

#ffv-page-loader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#ffv-page-loader.ffv-loader-hide {
	opacity: 0;
	pointer-events: none;
}

.ffv-loader-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.ffv-loader-glow {
	position: absolute;
	top: 46%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(63, 163, 77, 0.28) 0%, rgba(232, 65, 44, 0.14) 45%, transparent 72%);
	filter: blur(12px);
	opacity: 0;
	animation:
		ffv-glow-in 0.5s ease-out 1.0s forwards,
		ffv-glow-pulse 2.6s ease-in-out 1.5s infinite;
}

.ffv-loader-wrap svg {
	width: 150px;
	height: auto;
	position: relative;
	z-index: 2;
	overflow: visible;
}

#ffv-mark {
	animation: ffv-mark-settle 2.6s ease-in-out 1.2s infinite;
	transform-origin: 512px 512px;
}

.ffv-shape {
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill-opacity: 0;
	paint-order: stroke fill;
}

#ffv-hairMass {
	stroke: #3FA34D;
	fill: #3FA34D;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation:
		ffv-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.05s forwards,
		ffv-fillin 0.3s ease-out 0.85s forwards;
}

#ffv-faceProfile {
	stroke: #3FA34D;
	fill: #3FA34D;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation:
		ffv-draw 0.75s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards,
		ffv-fillin 0.3s ease-out 0.85s forwards;
}

#ffv-redLeaf {
	stroke: #E8412C;
	fill: #E8412C;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation:
		ffv-draw 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.95s forwards,
		ffv-fillin 0.25s ease-out 1.3s forwards;
}

#ffv-dot {
	fill: #E8412C;
	opacity: 0;
	transform: scale(0);
	transform-box: fill-box;
	transform-origin: center;
	animation: ffv-dot-pop 0.28s cubic-bezier(0.34, 1.8, 0.4, 1) 1.0s forwards;
}

@keyframes ffv-draw {
	to { stroke-dashoffset: 0; }
}
@keyframes ffv-fillin {
	to { fill-opacity: 1; stroke-width: 0; }
}
@keyframes ffv-dot-pop {
	60% { opacity: 1; transform: scale(1.3); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes ffv-glow-in {
	to { opacity: 1; }
}
@keyframes ffv-glow-pulse {
	0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); }
	50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes ffv-mark-settle {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(63, 163, 77, 0)); }
	50% { transform: scale(1.03); filter: drop-shadow(0 0 16px rgba(63, 163, 77, 0.35)); }
}

.ffv-loader-label {
	position: relative;
	z-index: 2;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0);
	animation: ffv-label-in 0.4s ease-out 1.0s forwards;
	white-space: nowrap;
}
.ffv-loader-label .ffv-dot-anim {
	display: inline-block;
	opacity: 0;
	animation: ffv-dot-fade 1.4s infinite;
	animation-delay: 1.4s;
}
.ffv-loader-label .ffv-dot-anim:nth-child(2) { animation-delay: 1.6s; }
.ffv-loader-label .ffv-dot-anim:nth-child(3) { animation-delay: 1.8s; }
@keyframes ffv-label-in { to { color: rgba(255, 255, 255, 0.6); } }
@keyframes ffv-dot-fade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.ffv-shape, #ffv-dot, .ffv-loader-glow, #ffv-mark, .ffv-loader-label, .ffv-dot-anim {
		animation: none !important;
	}
	.ffv-shape { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; }
	#ffv-dot { opacity: 1; transform: scale(1); }
	.ffv-loader-glow { opacity: 0.8; }
	.ffv-loader-label { color: rgba(255, 255, 255, 0.6); }
}