/* Hero Background Container - Contained within hero section */
.hero-background-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	pointer-events: none;
	overflow: hidden; /* This ensures the animation stays within bounds */
}

/* Single Background Image - Contained movement */
.hero-bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.75;
	animation: smoothContinuousMove 15s linear infinite;
	transform-origin: center center; /* Center the transform origin */
}

/* Smooth continuous movement - contained within hero section */
@keyframes smoothContinuousMove {
	0% {
		background-position: 0% 0%;
		transform: scale(1.1);
	}
	25% {
		background-position: 25% 25%;
		transform: scale(1.05);
	}
	50% {
		background-position: 50% 50%;
		transform: scale(1.0);
	}
	75% {
		background-position: 75% 75%;
		transform: scale(1.05);
	}
	100% {
		background-position: 100% 100%;
		transform: scale(1.1);
	}
}

/* Overlay for dimmed effect - also contained */
.hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: -1;
	pointer-events: none;
}

/* Override bordders on subheros */
.sub-hero[data-section="elva"] .max-container.border-dashed-vertical,
.sub-hero[data-section="voice"] .max-container.border-dashed-vertical,
.sub-hero[data-section="messaging"] .max-container.border-dashed-vertical,
.sub-hero[data-section="internet"] .max-container.border-dashed-vertical {
	border-left: 1px dashed rgba(255,255, 255, 0.3) !important;
	border-right: 1px dashed rgba(255,255, 255, 0.3) !important;
	border-color: rgba(255,255, 255, 0.3) !important;
	border-image: repeating-linear-gradient(to bottom, rgba(255,255, 255, 0.3) 0, rgba(255,255, 255, 0.3) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}
.sub-hero[data-section="elva"] .max-container.border-dashed-horizontal,
.sub-hero[data-section="voice"] .max-container.border-dashed-horizontal,
.sub-hero[data-section="messaging"] .max-container.border-dashed-horizontal,
.sub-hero[data-section="internet"] .max-container.border-dashed-horizontal {
	border-top: 1px dashed rgba(255,255, 255, 0.3) !important;
	border-bottom: 1px dashed rgba(255,255, 255, 0.3) !important;
	border-color: rgba(255,255, 255, 0.3) !important;
	border-image: repeating-linear-gradient(to bottom, rgba(255,255, 255, 0.3) 0, rgba(255,255, 255, 0.3) 6px, transparent 6px, transparent 10px) 1 !important;
	border-image-slice: 1 !important;
}
.subhero-bg-image {
	filter: grayscale(100%) brightness(0.3) contrast(1);
}
.elva .subhero-bg-image {
	filter: grayscale(100%) brightness(0.5) contrast(1);
}
.messaging .subhero-bg-image {
	filter: grayscale(100%) brightness(0.3) contrast(1);
}
.internet .subhero-bg-image {
	filter: grayscale(100%) brightness(0.3) contrast(1);
}

.subsection-details {
	padding-block: 5rem !important;
}
.subsection-details .metrics-desc {
	font-size: 1rem !important;
}
.subhero-cta:hover,
.subhero-card-cta:hover {
	color: var(--color-white) !important;
	animation: textGlow 1.5s ease-in-out infinite alternate;
	transition: all 0.3s ease-in-out;
}

.subhero-cta:hover a,
.subhero-card-cta:hover a {
	color: var(--color-white) !important;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
	animation: textGlow 1.5s ease-in-out infinite alternate;
	transition: all 0.3s ease-in-out;
}

.subhero-cta:hover .cta-icon,
.subhero-card-cta:hover .cta-icon {
	color: var(--color-white) !important;
	animation: iconGlow 1.5s ease-in-out infinite alternate;
	transition: all 0.3s ease-in-out;
}

@keyframes textGlow {
	0% {
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.1);
	}
	100% {
		text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.4);
	}
}

@keyframes iconGlow {
	0% {
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3);
		transform: scale(1);
	}
	100% {
		text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6);
		transform: scale(1.1);
	}
}