/**
 * Two Column Text Animations
 * Styles for word-by-word text animations in two column sections (strong tags)
 * File: css/components/two-column-animations.css or add to css/sections/two-column-content.css
 */

/* Animated word styling */
.animated-word {
	display: inline-block;
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Optional: Add subtle brightness pulse effect when word appears */
@keyframes colorPulse {
	0%, 100% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(1.15);
	}
}

.animated-word {
	animation: colorPulse 0.6s ease-out;
}

/* Ensure strong tags maintain proper spacing and gradient */
.two-column-content-section strong {
	display: inline-block;
}

/* Preserve the gradient text color on animated words */
.two-column-content-section :is(h1, h2, h3, h4) strong .animated-word {
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
	.two-column-content-section.no-animations .animated-word {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	
	.two-column-content-section.no-animations .first-column-content *,
	.two-column-content-section.no-animations .second-column-content * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Mobile optimizations */
@media screen and (max-width: 768px) {
	.animated-word {
		animation-duration: 0.4s;
	}
}