/* Banner entrance animations — initial state set in CSS */
.page-banner .banner-breadcrumbs,
.page-banner .post-tags,
.page-banner .banner-intro,
.page-banner .banner-content h1,
.page-banner .banner-content > p,
.page-banner .content-buttons,
.page-banner .banner-buttons,
.page-banner .application-buttons {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
}

.page-banner .banner-media-image {
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
}

/* JS adds .banner-animate-* as a marker, then .banner-animated to reveal.
   Scoped under .page-banner to beat the initial-state selectors in specificity. */
.page-banner .banner-animate-up.banner-animated,
.page-banner .banner-animate-left.banner-animated,
.page-banner .banner-animate-right.banner-animated {
	opacity: 1;
	transform: translateY(0) translateX(0);
}

/* Shimmer Effect */
.banner-shimmer {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.1),
		transparent
	);
	z-index: 0;
	pointer-events: none;
}

@keyframes bannerShimmer {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

/* Floating Animation for Images */
/* .banner-float {
	animation: bannerFloat 6s ease-in-out infinite;
} */

@keyframes bannerFloat {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-15px);
	}
}

/* Button Ripple Effect */
.content-button {
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-button:not(.secondary-link) .button-ripple {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transform: translate(-50%, -50%);
	transition: width 0.6s ease, height 0.6s ease;
	pointer-events: none;
}

.content-button .button-ripple.active {
	width: 300px;
	height: 300px;
}

/* Click pop effect */
.content-button.pop {
	animation: buttonPop 0.4s cubic-bezier(0.36, 0, 0.66, -0.56);
}

@keyframes buttonPop {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.92);
	}
	100% {
		transform: scale(1);
	}
}

/* Click ripple burst */
.content-button .button-ripple.burst {
	background: rgba(255, 255, 255, 0.4);
	width: 350px;
	height: 350px;
	transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
	            height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
	            opacity 0.3s ease;
	opacity: 0;
}
/* Tag Hover Effects (CSS-only, no JS needed) */
.page-banner .post-tags .tag-item {
	display: inline-block;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-banner .post-tags .tag-item:hover {
	transform: translateY(-3px) scale(1.05);
}

/* Logo Hover Effects (CSS-only, no JS needed) */
.banner-logo-bar .logo-marquee-container img {
	transition: transform 0.3s ease, filter 0.3s ease;
}

.banner-logo-bar .logo-marquee-container img:hover {
	transform: scale(1.1);
	filter: brightness(1.2);
}

/* Disable animations for reduced motion — also covers elements before JS adds marker classes */
@media (prefers-reduced-motion: reduce) {
	.page-banner.no-animations,
	.page-banner.no-animations *,
	.banner-shimmer,
	.banner-float,
	.banner-animate-up,
	.banner-animate-left,
	.banner-animate-right,
	.page-banner .banner-breadcrumbs,
	.page-banner .post-tags,
	.page-banner .banner-intro,
	.page-banner .banner-content h1,
	.page-banner .banner-content > p,
	.page-banner .content-buttons,
	.page-banner .banner-buttons,
	.page-banner .application-buttons,
	.page-banner .banner-media-image {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.page-banner .post-tags .tag-item:hover,
	.banner-logo-bar .logo-marquee-container img:hover,
	.page-banner.no-animations .content-button:hover {
		transform: none;
	}
}

/* Mobile optimizations */
@media screen and (max-width: 575px) {
	.banner-float {
		animation: bannerFloatMobile 8s ease-in-out infinite;
	}
	
	@keyframes bannerFloatMobile {
		0%, 100% {
			transform: translateY(0px);
		}
		50% {
			transform: translateY(-10px);
		}
	}
	
	.content-button .button-ripple.active {
		width: 200px;
		height: 200px;
	}
}