:root{
--bg:#020305;
--fg:#e8edf5;
--accent:#8fdfff;
}

html,body{
margin:0;
height:100%;
background:var(--bg);
color:var(--fg);
font-family:Inter,Segoe UI,sans-serif;
overflow:hidden;
}

.stars{
position:fixed;
inset:0;
background-image:
radial-gradient(circle at 10% 20%, rgba(255,255,255,.8) 1px, transparent 1px),
radial-gradient(circle at 70% 15%, rgba(255,255,255,.6) 1px, transparent 1px),
radial-gradient(circle at 80% 60%, rgba(255,255,255,.7) 1px, transparent 1px),
radial-gradient(circle at 25% 80%, rgba(255,255,255,.5) 1px, transparent 1px);
background-size: 220px 220px;
opacity:.8;
}

.hero{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
padding-top:12vh;
text-align:center;
}

#sigil{
width:min(260px,42vw);
overflow:visible;
}

#beacon{
fill:var(--fg);
opacity:0;
}

#spire,.frame{
fill:none;
stroke:var(--fg);
stroke-width:5;
stroke-linecap:round;
stroke-linejoin:round;
opacity:.12;
}

.active{
opacity:1 !important;
filter:drop-shadow(0 0 8px rgba(143,223,255,.7));
}

#title,#tagline,#email{
opacity:0;
transform:translateY(8px);
transition:all .8s ease;
}

#title{
margin-top:18px;
font-size:clamp(2rem,6vw,5rem);
font-weight:300;
letter-spacing:.35em;
}

#tagline{margin-top:18px;line-height:1.9}
#email{margin-top:24px}

.show{
opacity:1 !important;
transform:none !important;
}