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

:root{
	--bg:#0a0a12;
	--gold:#d4a653;
	--gold-dim:#8a6d3b;
	--sand:rgb(210,180,140);
	--text:#c8bda4;
	--text-dim:#7a7060;
}

html,body{
	height:100%;
	overflow:hidden;
	background:var(--bg);
	color:var(--text);
	font-family:'Inter',sans-serif;
	font-weight:300;
}

/* Partículas */
#stars{
	position:fixed;
	inset:0;
	z-index:0;
	pointer-events:none;
}

/* Background hero */
.hero-bg{
	position:fixed;
	inset:0;
	z-index:1;
	background:url('/img/hero.png') center/cover no-repeat;
	opacity:.18;
	filter:saturate(.6) brightness(.7);
}

/* Vinheta escura nas bordas */
.vignette{
	position:fixed;
	inset:0;
	z-index:2;
	background:radial-gradient(ellipse at center,transparent 30%,var(--bg) 85%);
	pointer-events:none;
}

/* Conteúdo principal */
main{
	position:relative;
	z-index:3;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	height:100vh;
	text-align:center;
	padding:2rem;
}

/* Emblema */
.emblem-wrap{
	position:relative;
	margin-bottom:2rem;
}
.emblem{
	width:clamp(100px,20vw,160px);
	height:auto;
	filter:drop-shadow(0 0 30px rgba(212,166,83,.3));
	animation:float 6s ease-in-out infinite;
}
.emblem-glow{
	position:absolute;
	inset:-30%;
	border-radius:50%;
	background:radial-gradient(circle,rgba(212,166,83,.12) 0%,transparent 70%);
	animation:pulse 4s ease-in-out infinite;
	pointer-events:none;
}

/* Título */
h1{
	font-family:'Cinzel',serif;
	font-size:clamp(2.5rem,8vw,5rem);
	font-weight:700;
	color:var(--gold);
	letter-spacing:.15em;
	text-shadow:0 0 40px rgba(212,166,83,.2);
	line-height:1;
}

.subtitle{
	margin-top:.8rem;
	font-size:clamp(.75rem,2vw,1rem);
	color:var(--text-dim);
	letter-spacing:.25em;
	text-transform:uppercase;
}

/* Divisor com chama */
.divider{
	margin:2.5rem 0 2rem;
	display:flex;
	align-items:center;
	gap:1.5rem;
}
.divider::before,.divider::after{
	content:'';
	width:clamp(40px,12vw,80px);
	height:1px;
	background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}
.flame{
	font-size:1.5rem;
	animation:flicker 2s ease-in-out infinite alternate;
	filter:brightness(1.2);
}

/* "Em breve..." */
.coming{
	font-family:'Cinzel',serif;
	font-size:clamp(1.2rem,3vw,1.8rem);
	color:var(--sand);
	letter-spacing:.3em;
	text-transform:lowercase;
}
.dots::after{
	content:'';
	animation:dots 2s steps(3) infinite;
}

/* Lore */
.lore{
	margin-top:2rem;
	font-size:clamp(.7rem,1.5vw,.85rem);
	color:var(--text-dim);
	line-height:1.8;
	max-width:28rem;
}
.lore em{
	color:var(--gold-dim);
	font-style:italic;
}

/* Footer */
footer{
	position:fixed;
	bottom:1.5rem;
	left:0;right:0;
	z-index:3;
	text-align:center;
	font-size:.65rem;
	color:var(--text-dim);
	opacity:.5;
}

/* Animações */
@keyframes float{
	0%,100%{transform:translateY(0)}
	50%{transform:translateY(-10px)}
}
@keyframes pulse{
	0%,100%{opacity:.5;transform:scale(1)}
	50%{opacity:1;transform:scale(1.1)}
}
@keyframes flicker{
	0%{opacity:.7;transform:scale(.95)}
	100%{opacity:1;transform:scale(1.05)}
}
@keyframes dots{
	0%{content:''}
	33%{content:'.'}
	66%{content:'..'}
	100%{content:'...'}
}

/* Responsivo */
@media(max-width:480px){
	.divider::before,.divider::after{width:30px}
	.lore br{display:none}
}