@import url(https://fonts.googleapis.com/css?family=Space+Grotesk:300,regular,500,600,700);
@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

:root {
	--sun-scale: 0.9;
	--planet-scale: 0.9;

	--mercury-orbit-size: calc(300px * var(--planet-scale));
	--venus-orbit-size: calc(420px * var(--planet-scale));
	--earth-orbit-size: calc(560px * var(--planet-scale));
	--moon-orbit-size: calc(70px * var(--planet-scale));
	--mars-orbit-size: calc(720px * var(--planet-scale));
	--jupiter-orbit-size: calc(920px * var(--planet-scale));
	--saturn-orbit-size: calc(1150px * var(--planet-scale));
	--uranus-orbit-size: calc(1400px * var(--planet-scale));
	--neptune-orbit-size: calc(1650px * var(--planet-scale));

	--mercury-orbit-time: calc(10s * var(--planet-scale));
	--venus-orbit-time: calc(14s * var(--planet-scale));
	--earth-orbit-time: calc(18s * var(--planet-scale));
	--moon-orbit-time: calc(10s * var(--planet-scale));
	--mars-orbit-time: calc(22s * var(--planet-scale));
	--jupiter-orbit-time: calc(30s * var(--planet-scale));
	--saturn-orbit-time: calc(38s * var(--planet-scale));
	--uranus-orbit-time: calc(48s * var(--planet-scale));
	--neptune-orbit-time: calc(60s * var(--planet-scale));

	--sun-size: calc(220px * var(--sun-scale));
	--mercury-size: calc(20px * var(--planet-scale));
	--venus-size: calc(28px * var(--planet-scale));
	--earth-size: calc(32px * var(--planet-scale));
	--moon-size: calc(9px * var(--planet-scale));
	--mars-size: calc(26px * var(--planet-scale));
	--jupiter-size: calc(70px * var(--planet-scale));
	--saturn-size: calc(120px * var(--planet-scale));
	--saturn-body-size: calc(65px * var(--planet-scale));
	--saturn-ring-size: calc(110px * var(--planet-scale));
	--uranus-size: calc(50px * var(--planet-scale));
	--neptune-size: calc(48px * var(--planet-scale));

	--sun-texture-shift-time: 25s;
	--mercury-texture-shift-time: 6s;
	--venus-texture-shift-time: 10s;
	--earth-texture-shift-time: 14s;
	--mars-texture-shift-time: 18s;
	--jupiter-texture-shift-time: 22s;
	--saturn-texture-shift-time: 28s;
	--uranus-texture-shift-time: 32s;
	--neptune-texture-shift-time: 36s;
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	overflow: hidden;
	background: radial-gradient(circle, #000 60%, #020617 100%);
	position: relative;
	font-family: 'Inter', sans-serif;

	&::before {
		content: '';
		inset: 0;
		background: url('../assets/images/background/stars.png');
		opacity: 0.3;
		position: absolute;
		z-index: 0;
	}

	&::after {
		content: '';
		position: absolute;
		inset: 0;
		background: radial-gradient(
			circle at 70% 30%,
			rgba(255, 255, 255, 0.05),
			transparent 60%
		);
		z-index: 0;
		pointer-events: none;
	}
}

.start-screen {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;

	&.active {
		opacity: 1;
		pointer-events: auto;
	}

	.glass-card {
		padding: 2.5rem 3rem;
		background: rgba(255, 255, 255, 0.05);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 20px;
		box-shadow:
			0 0 40px rgba(0, 0, 0, 0.6),
			inset 0 0 20px rgba(255, 255, 255, 0.05);
		text-align: center;
		max-width: 400px;
		animation: fadeIn 0.8s ease forwards;
		opacity: 0;
		transform: translateY(20px);

		h1 {
			font-family: 'Space Grotesk', sans-serif;
			font-size: 2.8rem;
			font-weight: 700;
			letter-spacing: 1.5px;
			margin-bottom: 0.5rem;
			color: #ffffff;
			animation: titleGlow 3s ease-in-out infinite alternate;
		}

		p {
			font-size: 0.95rem;
			line-height: 1.4;
			color: rgba(255, 255, 255, 0.7);
			margin-bottom: 1.5rem;
		}

		button {
			font-family: 'Inter', sans-serif;
			padding: 0.7rem 1.6rem;
			border-radius: 999px;
			border: none;
			cursor: pointer;

			background: linear-gradient(135deg, #3b82f6, #6366f1);
			color: white;

			box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);

			transition: all 0.25s ease;

			&:hover {
				transform: translateY(-2px) scale(1.03);
				box-shadow: 0 0 25px rgba(99, 102, 241, 0.8);
			}
		}
	}
}

.orbitarium-screen {
	transform: scale(0.02) translateY(400px);
	filter: brightness(0.1) blur(14px);

	&.active {
		animation: cosmicEntry 12s ease-in forwards;
	}
}

.orbitarium-camera {
	position: relative;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	perspective: 1000px;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

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

@keyframes titleGlow {
	from {
		text-shadow:
			0 0 10px rgba(255, 255, 255, 0.3),
			0 0 20px rgba(99, 102, 241, 0.5);
	}
	to {
		text-shadow:
			0 0 20px rgba(255, 255, 255, 0.6),
			0 0 30px rgba(99, 102, 241, 0.8);
	}
}

@keyframes cosmicEntry {
	0% {
		transform: scale(0.02) translateY(400px);
		filter: brightness(0.1) blur(14px);
	}

	95% {
		transform: scale(0.7) translateY(30px);
		filter: brightness(1.05) blur(5px);
	}

	98% {
		transform: scale(1.05) translateY(0);
		filter: brightness(1.1) blur(1px);
	}

	100% {
		transform: scale(1) translateY(0);
		filter: brightness(1) blur(0);
	}
}

@keyframes texture-shift {
	from {
		background-position: 0% 0%;
	}
	to {
		background-position: 200% 0%;
	}
}

@keyframes sunPulse {
	0%,
	100% {
		box-shadow:
			0 0 30px #ffcc33,
			0 0 60px #ff9900,
			0 0 110px #ff6600;
	}
	50% {
		box-shadow:
			0 0 45px #ffcc33,
			0 0 80px #ff9900,
			0 0 130px #ff6600;
	}
}

@keyframes orbitRotate {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}