/* Hero section */
.hero-section {
	padding: 100px 20px;
	text-align: center;
	background-color: var(--bg-surface);
	color: #ffffff;
}

.hero-section h1 {
	font-size: 3.5rem;
	font-weight: 900;
}

.content-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 20px;
}

/* Content blocks */
.split-section {
	display: flex;
	align-items: center;
	gap: 50px;
	margin-bottom: 80px;
}

.split-section.reverse {
	flex-direction: row-reverse;
}

.image-box {
	flex: 1;
	background-color: var(--bg-card);
	height: 300px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-color);
}

.text-box {
	flex: 1;
}

.text-box h2 {
	color: var(--text-main);
	font-size: 2rem;
	margin-bottom: 15px;
}

/* Full width elements */
.full-box {
	width: 100%;
	background-color: var(--bg-card);
	border-radius: 20px;
	padding: 40px;
	text-align: center;
	margin-bottom: 50px;
	border: 1px solid var(--border-color);
}

.cta-box {
	display: block;
	text-decoration: none;
	transition: transform 0.2s;
}

.cta-box:hover {
	transform: scale(1.01);
}

@media (max-width: 800px) {
	.split-section,
	.split-section.reverse {
		flex-direction: column;
		text-align: center;
	}
}

/* === | Hero Section | === */
.hero-section {
	position: relative;
	overflow: hidden;
	padding: 180px 20px;
	text-align: center;
	background-color: var(--bg-main);
	z-index: 1;
}

.hero-section h1 {
	position: relative;
	z-index: 2;
	font-size: clamp(2.5rem, 8vw, 4.5rem);
	font-weight: 900;
	color: var(--text-main);
	margin: 0;
	text-shadow: 0 4px 30px rgba(0, 12, 38, 0.8);
}

/* --- Dynamic Multi-Orb Glow Container --- */
.hero-glow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
}

/* Base style for all glowing shapes */
.hero-glow-core,
.hero-glow::before,
.hero-glow::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.6;
	animation: drift 10s infinite alternate ease-in-out;
}

/* Center */
.hero-glow-core {
	top: 50%;
	left: 50%;
	width: 50vw;
	height: 50vw;
	max-width: 700px;
	max-height: 700px;
	background: radial-gradient(
		circle,
		var(--accent-light) 0%,
		var(--accent-blue) 50%,
		transparent 80%
	);
	animation-duration: 6s;
	animation-name: pulseCore;
}

/* Drifting Top-Left Orb */
.hero-glow::before {
	top: 10%;
	left: 20%;
	width: 60vw;
	height: 60vw;
	background: radial-gradient(circle, var(--accent-blue) 0%, transparent 70%);
	animation-duration: 6s;
	animation-name: driftLeft;
}

/* Drifting Bottom-Right Orb */
.hero-glow::after {
	bottom: -10%;
	right: 10%;
	width: 65vw;
	height: 65vw;
	background: radial-gradient(
		circle,
		var(--accent-dark) 0%,
		var(--accent-blue) 40%,
		transparent 70%
	);
	animation-duration: 7.5s;
	animation-name: driftRight;
}

/* --- The Animations --- */
@keyframes pulseCore {
	0% {
		transform: translate(-50%, -50%) scale(0.8);
		opacity: 0.4;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.1);
		opacity: 0.8;
	}
}

@keyframes driftLeft {
	0% {
		transform: translate(0, 0) scale(1);
	}
	100% {
		transform: translate(-10%, 15%) scale(1.1);
		opacity: 0.5;
	}
}

@keyframes driftRight {
	0% {
		transform: translate(0, 0) scale(1);
	}
	100% {
		transform: translate(15%, -10%) scale(1.2);
		opacity: 0.7;
	}
}

/* Scroll Reveal Animations */
.split-section .image-box,
.split-section .text-box {
	opacity: 0;
}

.split-section.in-view .image-box {
	animation: slideInLeft 0.8s ease-out forwards;
}
.split-section.in-view .text-box {
	animation: slideInRight 0.8s ease-out forwards;
}

.split-section.reverse.in-view .image-box {
	animation: slideInRight 0.8s ease-out forwards;
}
.split-section.reverse.in-view .text-box {
	animation: slideInLeft 0.8s ease-out forwards;
}
/* switched from previous version because of better visual flow */
@keyframes slideInLeft {
	0% {
		opacity: 0;
		transform: translateX(-40px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	0% {
		opacity: 0;
		transform: translateX(40px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}