/* Base Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Generic fade-in classes for sections (triggered by scroll) */
.fade-in {
	animation: fadeInUp 0.8s ease-out forwards;
}

.fade-in-delay-1 {
	animation-delay: 0.2s;
	opacity: 0;
}

.fade-in-delay-2 {
	animation-delay: 0.4s;
	opacity: 0;
}

.fade-in-delay-3 {
	animation-delay: 0.6s;
	opacity: 0;
}

/* Hero-specific animations that start immediately */
.hero-fade-in {
	animation: fadeInUp 0.8s ease-out forwards;
	opacity: 0;
}

.hero-fade-in-delay-1 {
	animation: fadeInUp 0.8s ease-out forwards;
	animation-delay: 0.2s;
	opacity: 0;
}

.hero-fade-in-delay-2 {
	animation: fadeInUp 0.8s ease-out forwards;
	animation-delay: 0.4s;
	opacity: 0;
}

.hero-fade-in-delay-3 {
	animation: fadeInUp 0.8s ease-out forwards;
	animation-delay: 0.6s;
	opacity: 0;
}

/* Wormhole Animation Styles */
.wormhole-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	pointer-events: none;
	overflow: hidden;
}

.wormhole-container.hidden {
	display: none;
}

.wormhole-container.active {
	display: block;
}

.wormhole-background {
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle at center,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.4) 30%,
			rgba(0, 0, 0, 0.85) 70%,
			rgba(0, 0, 0, 1) 100%);
	transition: opacity 0.5s ease;
}

/* Wormhole Tunnel */
.wormhole-tunnel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	height: 200px;
}

/* Central glow effect */
.wormhole-tunnel::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	background: radial-gradient(circle,
			rgba(255, 255, 255, 1) 0%,
			rgba(255, 255, 255, 0.8) 30%,
			rgba(255, 255, 255, 0) 70%);
	filter: blur(2px);
	animation: central-pulse 2s ease-in-out infinite;
}

@keyframes central-pulse {

	0%,
	100% {
		opacity: 0.6;
		transform: translate(-50%, -50%) scale(0.8);
	}

	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.2);
	}
}

.wormhole-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 2px solid transparent;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.ring-1 {
	width: 50px;
	height: 50px;
	border-color: rgba(255, 255, 255, 0.9);
	animation: wormhole-spin 2s linear infinite;
	filter: blur(0.5px);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.ring-2 {
	width: 80px;
	height: 80px;
	border-color: rgba(255, 255, 255, 0.7);
	animation: wormhole-spin 2.5s linear infinite reverse;
	filter: blur(0.3px);
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.ring-3 {
	width: 120px;
	height: 120px;
	border-color: rgba(255, 255, 255, 0.5);
	animation: wormhole-spin 3s linear infinite;
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

.ring-4 {
	width: 160px;
	height: 160px;
	border-color: rgba(255, 255, 255, 0.3);
	animation: wormhole-spin 3.5s linear infinite reverse;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}

.ring-5 {
	width: 200px;
	height: 200px;
	border-color: rgba(255, 255, 255, 0.2);
	animation: wormhole-spin 4s linear infinite;
	box-shadow: 0 0 3px rgba(255, 255, 255, 0.1);
}

/* Wormhole Animation Keyframes */
@keyframes portal-formation {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
	}

	50% {
		opacity: 0.7;
	}

	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

@keyframes wormhole-expansion {
	0% {
		transform: translate(-50%, -50%) scale(1);
	}

	100% {
		transform: translate(-50%, -50%) scale(3);
	}
}

@keyframes wormhole-spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg) scale(1);
		opacity: 0.8;
	}

	50% {
		transform: translate(-50%, -50%) rotate(180deg) scale(1.15);
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg) scale(1);
		opacity: 0.8;
	}
}

@keyframes tunnel-travel {
	0% {
		transform: translate(-50%, -50%) scale(1);
		filter: blur(0px);
	}

	100% {
		transform: translate(-50%, -50%) scale(8);
		filter: blur(3px);
	}
}

@keyframes hero-absorption {
	0% {
		transform: scale(1) translateY(0);
		opacity: 1;
	}

	50% {
		transform: scale(0.8) translateY(-30px);
		opacity: 0.6;
	}

	100% {
		transform: scale(0.3) translateY(-100px);
		opacity: 0;
	}
}

/* Star Field for Lightspeed Effect */
.star-field {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.star {
	position: absolute;
	background: white;
	border-radius: 50%;
	opacity: 0;
}

.star-dot {
	width: 2px;
	height: 2px;
	animation: star-appear 0.5s ease-out forwards;
}

.star-streak {
	width: 1px;
	height: 1px;
	transform-origin: center;
	animation: star-to-streak 2s ease-in forwards;
}

.star-streak.outer {
	animation: star-to-streak-outer 2s ease-in forwards;
}

@keyframes star-to-streak-outer {
	0% {
		opacity: 0.8;
		transform: rotate(var(--star-angle, 0deg)) scaleX(1) scaleY(1);
		filter: blur(0);
	}

	50% {
		opacity: 1;
		transform: rotate(var(--star-angle, 0deg)) scaleX(1) scaleY(80);
		filter: blur(0.5px);
	}

	100% {
		opacity: 0;
		transform: rotate(var(--star-angle, 0deg)) scaleX(0.5) scaleY(300);
		filter: blur(3px);
	}
}

@keyframes star-appear {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes star-to-streak {
	0% {
		opacity: 0.8;
		transform: rotate(var(--star-angle, 0deg)) scaleX(1) scaleY(1);
		filter: blur(0);
	}

	50% {
		opacity: 1;
		transform: rotate(var(--star-angle, 0deg)) scaleX(1) scaleY(50);
		filter: blur(0.5px);
	}

	100% {
		opacity: 0;
		transform: rotate(var(--star-angle, 0deg)) scaleX(0.5) scaleY(200);
		filter: blur(2px);
	}
}

.star-layer-1 .star {
	animation-duration: 1.5s;
}

.star-layer-2 .star {
	animation-duration: 2s;
	opacity: 0.8;
}

.star-layer-3 .star {
	animation-duration: 2.5s;
	opacity: 0.6;
}

.wormhole-container.lightspeed .star-field {
	opacity: 1;
}

.wormhole-container.lightspeed .wormhole-tunnel {
	animation: tunnel-collapse 1s ease-in forwards;
}

@keyframes tunnel-collapse {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) scale(0.1);
		opacity: 0;
	}
}

.wormhole-container.phase-1 .wormhole-tunnel {
	animation: portal-formation 0.5s ease-out forwards;
}

.wormhole-container.phase-2 .wormhole-tunnel {
	animation: wormhole-expansion 1s ease-in forwards;
}

.wormhole-container.phase-3 .wormhole-tunnel {
	animation: tunnel-travel 1.5s ease-in forwards;
}

.wormhole-container.phase-3 .wormhole-ring {
	animation-duration: 0.5s !important;
}

.wormhole-container.transitioning .wormhole-ring {
	animation: ring-to-streak 0.8s ease-in forwards;
}

.wormhole-container.transitioning .ring-1 {
	animation-delay: 0s;
}

.wormhole-container.transitioning .ring-2 {
	animation-delay: 0.1s;
}

.wormhole-container.transitioning .ring-3 {
	animation-delay: 0.2s;
}

.wormhole-container.transitioning .ring-4 {
	animation-delay: 0.3s;
}

.wormhole-container.transitioning .ring-5 {
	animation-delay: 0.4s;
}

@keyframes ring-to-streak {
	0% {
		transform: translate(-50%, -50%) rotate(0deg) scale(1);
		border-radius: 50%;
		border-width: 2px;
	}

	50% {
		transform: translate(-50%, -50%) rotate(90deg) scale(2, 0.1);
		border-radius: 50%;
		border-width: 1px;
		opacity: 0.8;
	}

	100% {
		transform: translate(-50%, -50%) rotate(90deg) scale(20, 0.02);
		border-radius: 0%;
		border-width: 0.5px;
		opacity: 0;
	}
}

.hero.wormhole-active {
	animation: hero-absorption 2s ease-in forwards;
}

.hero.wormhole-active .hero-cta {
	animation: hero-absorption 1.8s ease-in forwards;
	animation-delay: 0.2s;
}

.wormhole-container.phase-2 .wormhole-background {
	background: radial-gradient(circle at center,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.6) 20%,
			rgba(0, 0, 0, 0.95) 60%,
			rgba(0, 0, 0, 1) 100%);
}

.wormhole-container.phase-3 .wormhole-background {
	background: radial-gradient(circle at center,
			rgba(0, 0, 0, 0.3) 0%,
			rgba(0, 0, 0, 0.9) 30%,
			rgba(0, 0, 0, 1) 70%);
}

.wormhole-container.transitioning .wormhole-background {
	background: radial-gradient(circle at center,
			rgba(0, 0, 0, 0.8) 0%,
			rgba(0, 0, 0, 0.95) 30%,
			rgba(0, 0, 0, 1) 50%);
	transition: background 0.8s ease;
}

/* Loading Screen Styles */
.loading-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10000;
	background: #000000;
	overflow: hidden;
}

.loading-container.hidden {
	display: none;
}

.loading-background {
	position: relative;
	width: 100%;
	height: 100%;
}

.loading-stars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.loading-stars [class^="star-streak-layer"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.space-streak {
	position: absolute;
	background: white;
	width: 1px;
	height: 80px;
	transform-origin: center bottom;
}

@keyframes space-travel {
	0% {
		opacity: 0;
		transform: scaleY(0.1);
	}

	10% {
		opacity: 0.8;
		transform: scaleY(1);
	}

	90% {
		opacity: 0.8;
		transform: scaleY(1) translateY(-300px);
	}

	100% {
		opacity: 0;
		transform: scaleY(0.1) translateY(-350px);
	}
}

.star-streak-layer-1 .space-streak {
	height: 100px;
	animation-duration: 2s;
}

.star-streak-layer-2 .space-streak {
	height: 60px;
	opacity: 0.6;
	animation-duration: 2.5s;
}

.star-streak-layer-3 .space-streak {
	height: 40px;
	opacity: 0.4;
	animation-duration: 3s;
}

.loading-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: white;
	z-index: 1;
}

.ai-orb {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 0 auto 40px;
}

.orb-core {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	background: radial-gradient(circle,
			rgba(255, 255, 255, 1) 0%,
			rgba(255, 255, 255, 0.8) 50%,
			rgba(255, 255, 255, 0.6) 100%);
	border-radius: 50%;
	animation: orb-pulse 2s ease-in-out infinite;
	box-shadow:
		0 0 20px rgba(255, 255, 255, 0.8),
		0 0 40px rgba(255, 255, 255, 0.6),
		0 0 60px rgba(255, 255, 255, 0.4);
	filter: blur(1px);
}

.orb-core::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	background: white;
	border-radius: 50%;
	filter: blur(0);
}

.ai-orb .orb-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: orb-ring-spin 3s linear infinite;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.ai-orb .ring-1 {
	width: 60px;
	height: 60px;
}

.ai-orb .ring-2 {
	width: 80px;
	height: 80px;
	animation-direction: reverse;
	animation-duration: 4s;
}

.ai-orb .ring-3 {
	width: 100px;
	height: 100px;
	animation-duration: 5s;
}

@keyframes orb-pulse {

	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
	}

	50% {
		transform: translate(-50%, -50%) scale(1.2);
	}
}

@keyframes orb-ring-spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.loading-text h2 {
	font-size: 24px;
	margin-bottom: 12px;
	font-weight: 600;
	color: #ffffff;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.loading-text p {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 30px;
}

.progress-bar {
	width: 300px;
	height: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	margin: 30px auto;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.progress-fill {
	height: 100%;
	background: white;
	width: 0%;
	transition: width 0.3s ease;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
	position: relative;
}

.progress-fill::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 100%;
	background: linear-gradient(to right,
			rgba(255, 255, 255, 0.8),
			rgba(255, 255, 255, 1));
	filter: blur(2px);
}