body {
    margin:0;
    background:#05080c;
    color:#d0f2ff;
    font-family: 'Cinzel', serif;
    overflow-x:hidden;
}

/* Raven Intro */
#raven-intro {
    position:fixed;
    inset:0;
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    animation:ravenFade 3s ease forwards 2s;
}

#intro-logo {
    width:200px;
    opacity:0;
    animation:logoGlow 2.5s ease forwards;
}

/* Ravens */
.raven-left, .raven-right {
    position:absolute;
    width:200px;
    height:200px;
    background:url('/static/img/logo.png') no-repeat center/contain;
    opacity:0.05;
    animation:ravens 2.5s ease;
}

.raven-left { left:-300px; animation-name:ravensLeft; }
.raven-right { right:-300px; animation-name:ravensRight; }

@keyframes ravensLeft {
    to { left:30%; opacity:0.9; }
}

@keyframes ravensRight {
    to { right:30%; opacity:0.9; }
}

@keyframes logoGlow {
    to { opacity:1; filter:drop-shadow(0 0 20px #00eaff); }
}

@keyframes ravenFade {
    to { opacity:0; pointer-events:none; }
}

/* Hero */
.hero {
    text-align:center;
    padding:140px 20px 80px;
}

.hero-logo {
    width:250px;
    filter:drop-shadow(0 0 20px #009bff);
}

.hero-title {
    font-size:3.5rem;
    margin:20px 0 5px;
    color:#66e0ff;
    text-shadow:0 0 20px #009bff;
}

.hero-subtitle {
    font-size:1.5rem;
    color:#9fdcff;
}

/* Sections */
section {
    max-width:1000px;
    margin:60px auto;
    text-align:center;
}

.realm-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:25px;
    margin-top:30px;
}

.realm-card {
    background:#0a1118;
    border:1px solid #113344;
    padding:20px;
    border-radius:8px;
    text-decoration:none;
    color:#d0f2ff;
    transition:0.3s;
}

.realm-card:hover {
    transform:scale(1.05);
    background:#0d1620;
    border-color:#22aaff;
    box-shadow:0 0 20px #009bff55;
}

/* Footer */
footer {
    margin:80px 0 30px;
    text-align:center;
    color:#557788;
}