/* ============================================
   VALUE PROPOSITION - SECTION STYLES
   ============================================ */

/* Value Proposition Section */
.wand-shine-value-proposition {
	background-color: #ffffff;
	padding: clamp(60px, 12vh, 100px) clamp(16px, 5vw, 64px);
	position: relative;
	overflow: hidden;
	margin-block-start: 0px;
}

.wp-block-wand-shine-value-proposition,
.value-proposition-section {
	margin-block-start: 0px;
}

/* Container */
.vp-container {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	z-index: 1;
}

/* Heading */
.vp-heading {
	color: #131415;
	margin-bottom: clamp(24px, 4vh, 32px);
}

/* Text Content */
.vp-text-content {
	font-family: 'Figtree', sans-serif;
	font-size: clamp(16px, 2.5vw, 18px);
	line-height: 1.5;
	color: #131415;
	margin-bottom: clamp(32px, 5vh, 40px);
	font-weight: 400;
}

.vp-paragraph {
	margin-bottom: 1em;
}

.vp-paragraph-last {
	margin-bottom: 0;
}

/* CTA Button Wrapper */
.vp-cta-wrapper {
	display: flex;
	justify-content: center;
}

/* Highlight marker effect for specific words in heading */
.wand-shine-value-proposition h2 .highlight-word,
.wand-shine-value-proposition h2 mark {
	background: linear-gradient(180deg, transparent 40%, rgba(255, 79, 243, 0.3) 40%, rgba(255, 79, 243, 0.3) 65%, transparent 65%);
	padding: 0 15px;
	color: inherit;
	border-radius: 0;
}

/* Hide default inline SVG decorations and replace with sparkle images */
.wand-shine-value-proposition > div:nth-child(4),
.wand-shine-value-proposition > div:nth-child(5),
.wand-shine-value-proposition .star-pink,
.wand-shine-value-proposition .star-yellow,
.wand-shine-value-proposition > div[style*="position: absolute"] {
	display: none !important;
}

/* Sparkle rotation and pulse animation */
@keyframes sparkle-spin-pulse {
	0% {
		transform: rotate(0deg) scale(1);
		opacity: 0.6;
	}
	50% {
		transform: rotate(180deg) scale(1.1);
		opacity: 0.8;
	}
	100% {
		transform: rotate(360deg) scale(1);
		opacity: 0.6;
	}
}

/* Add pink sparkle (top-right position like value-prop_3/4) */
.wand-shine-value-proposition::before {
	content: '';
	position: absolute;
	top: 10%;
	right: 15%;
	width: clamp(40px, 5vw, 60px);
	height: clamp(40px, 5vw, 60px);
	background-image: url('/wp-content/themes/wand-shine-theme/assets/icons/pink-sparkle.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 0;
	animation: sparkle-spin-pulse 9s ease-in-out infinite;
}

/* Add yellow sparkle (bottom-left position like value-prop_5/6) */
.wand-shine-value-proposition::after {
	content: '';
	position: absolute;
	bottom: 15%;
	left: 10%;
	width: clamp(35px, 4vw, 50px);
	height: clamp(35px, 4vw, 50px);
	background-image: url('/wp-content/themes/wand-shine-theme/assets/icons/yellow-sparkle.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 0;
	animation: sparkle-spin-pulse 9s ease-in-out infinite;
	animation-delay: 0.5s;
}

/* ============================================
   VALUE PROPOSITION - CTA BUTTON STYLES
   ============================================ */

/* CTA button now uses global .btn-outline class */

/* Mobile: smaller font and padding */
@media (max-width: 640px) {
	.wand-shine-value-proposition {
		padding: 60px 16px;
	}

	.vp-container {
		text-align: left;
	}

	.vp-cta-wrapper {
		justify-content: flex-start;
	}

	/* Compensate for mark padding to keep optical left alignment */
	.wand-shine-value-proposition h2 mark {
		margin-left: -15px;
	}

	.wand-shine-value-proposition .btn-outline {
		font-size: 14px;
		padding: 8px 20px;
	}

	/* Hide sparkles on mobile */
	.wand-shine-value-proposition::before,
	.wand-shine-value-proposition::after {
		display: none !important;
	}
}

/* ============================================
   TABLET VIEW - SPARKLE POSITIONS
   ============================================ */
@media (min-width: 481px) and (max-width: 1024px) {
	.wand-shine-value-proposition::before {
		right: 2rem;
		top: 20%;
	}

	.wand-shine-value-proposition::after {
		left: 2rem;
	}
}