html, body {
    margin: 0;
    user-select: none;
    padding: 0;
    height: 100%;
    background: radial-gradient(ellipse at center, #001330 0%, #020812 100%);
    font-family: 'Quicksand', sans-serif;
    overflow: hidden;
}

.container {
    position: relative;
    z-index: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

img.logo {
    width: 280px;
    max-width: 60vw;
    height: auto;
    opacity: 0;
    margin-bottom: 2rem;
    animation:
    fadeIn 2s ease-out 1s,
    float 12s ease-in-out infinite,
    pulseOpacity 5s ease-in-out infinite 3s;
}

@keyframes pulseOpacity {
    0%   { opacity: 1; }
    50%  { opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-30px); }
    100% { transform: translateY(0px); }
}

h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    background: linear-gradient(90deg, #7fdbff, #b388ff, #00ffcc, #b388ff);
    background-size: 300% 300%;
    animation: gradientMove 8s ease infinite, fadeIn 3s ease-out 0.5s forwards;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    letter-spacing: 1.2px;
    opacity: 0;
    margin: 0;
}

.coming-soon {
    position: absolute;
    bottom: 40px;
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 500;
    font-family: 'Josefin Sans', sans-serif;
    background: linear-gradient(90deg, #7fdbff, #ff77e9, #00ffc3, #7fdbff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: glowFadeIn 3s ease-out 1s forwards;
    opacity: 0;
    letter-spacing: 1px;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

@keyframes glowFadeIn {
    from { opacity: 0; text-shadow: none; }
    to {
    opacity: 1;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.2),
                    0 0 14px rgba(127, 219, 255, 0.3),
                    0 0 24px rgba(0, 255, 195, 0.2);
    }
}



/* ========= Fire-glows ========== */

.fire-glow {
	position: absolute;
	filter: blur(100px);
}
.fire-glow-1 {
	width: 700px;
	height: 700px;
	left: -200px;
	bottom: -400px;
	opacity: 0.5;
}
.fire-glow-2 {
	width: 800px;
	height: 800px;
	right: -200px;
	bottom: -300px;
	opacity: 0.5;
}
.fire-glow-3 {
	width: 900px;
	height: 900px;
	left: 50%;
	bottom: -600px;
	transform: translateX(-50%);
	opacity: 0.7;
}
.fire-glow-4 {
	width: 1000px;
	height: 1000px;
	left: 10%;
	bottom: -600px;
	transform: translateX(-25%);
	opacity: 0.55;
}
.fire-glow-5 {
	width: 1100px;
	height: 1100px;
	right: 10%;
	bottom: -700px;
	transform: translateX(25%);
	opacity: 0.55;
}
.fire-glow-6 {
	width: 1200px;
	height: 1200px;
	bottom: -700px;
	left: -200px;
	opacity: 1;
	transform: translateX(-50%);
	opacity: 0.7;
}

.container {
	position: relative;
	width: inherit;
	height: inherit;
}

.inner-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 100%;
}

.inner-glow-1 {
	height: 25%;
	width: 25%;
	background-color: #7fdbff;
	animation: flickerAnimation 4s ease-in-out infinite;
	z-index: 10;
}
.inner-glow-2 {
	height: 65%;
	width: 65%;
	background-color: #ff77e9;
	animation: flickerAnimation 3s ease-in-out infinite;
	z-index: 9;
}
.inner-glow-3 {
	height: 100%;
	width: 100%;
	background-color: #7fdbff;
	animation: flickerAnimation 3.6s ease-in-out infinite;
}

@keyframes flickerAnimation {
	0%,
	100% {
		opacity: 0.9;
		scale: 0.98;
	}
	15%,
	80% {
		opacity: 1;
		scale: 1;
	}
	30%,
	60% {
		opacity: 0.8;
		scale: 1.05;
	}
	45%,
	75% {
		opacity: 0.95;
		scale: 0.97;
	}
}

/* ======== Sparks ======== */

.spark {
	position: absolute;
	border-radius: 100%;
	scale: 1;
	z-index: 999;
}

.spark .spark-glow {
	width: 200%;
	height: 200%;
	transform: translate(-25%, -25%);
	background-color: inherit;
	border-radius: 100%;
	filter: blur(8px) brightness(1.5);
	z-index: 99;
}