@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Special+Elite&display=swap');

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

body {
    min-height: 100vh;
    overflow: hidden;
    font-family: 'Special Elite', serif;
    color: #f5ead2;
    background: #100905;
}

.background {
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(15, 7, 3, 0.65), rgba(10, 5, 2, 0.9)),
        url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center;
    animation: slowZoom 28s ease-in-out infinite alternate;
    z-index: -3;
}

.background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.85) 100%),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 2px,
            transparent 4px
        );
    z-index: -2;
}

.fog {
    position: absolute;
    width: 180%;
    height: 180%;
    background: radial-gradient(circle, rgba(215, 184, 127, 0.12), transparent 55%);
    filter: blur(40px);
    animation: drift 38s linear infinite;
    z-index: -1;
}

.fog-1 {
    top: -40%;
    left: -60%;
}

.fog-2 {
    bottom: -60%;
    right: -70%;
    animation-duration: 52s;
}

.embers {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 171, 74, 0.7) 1px, transparent 2px),
        radial-gradient(circle, rgba(255, 214, 139, 0.5) 1px, transparent 2px);
    background-size: 180px 180px, 260px 260px;
    animation: emberMove 18s linear infinite;
    opacity: 0.35;
}

.landing {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hero-card {
    width: min(92vw, 520px);
    padding: 3rem 2.5rem;
    text-align: center;
    border: 1px solid rgba(210, 165, 88, 0.45);
    border-radius: 18px;
    background: rgba(34, 18, 8, 0.72);
    box-shadow:
        0 0 35px rgba(0, 0, 0, 0.75),
        inset 0 0 30px rgba(210, 165, 88, 0.08);
    backdrop-filter: blur(8px);
    animation: fadeUp 1.2s ease forwards;
}

.logo {
    width: 300px;
    max-width: 90%;
    filter: drop-shadow(0 0 24px rgba(214, 168, 89, 0.55));
}

.login-btn {
    display: inline-block;
    margin-top: 2.2rem;
    padding: 0.95rem 2.2rem;
    color: #201006;
    background: linear-gradient(135deg, #d6a34f, #f1d28b);
    border: 1px solid #ffdf98;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 0 18px rgba(214, 163, 79, 0.35);
    transition: 0.25s ease;
}

.login-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 28px rgba(241, 210, 139, 0.65);
}

.flash-message {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999;
    max-width: 360px;
    padding: 16px 20px;
    border-radius: 16px;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 30px rgba(0,0,0,0.45);
    animation: flashIn 0.3s ease, flashOut 0.3s ease 4s forwards;
}

.flash-success {
    background: rgba(45, 140, 75, 0.95);
}

.flash-error {
    background: rgba(130, 30, 30, 0.95);
}

.flash-info {
    background: rgba(45, 93, 160, 0.95);
}

@keyframes flashIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flashOut {
    to {
        opacity: 0;
        transform: translateY(-12px);
        pointer-events: none;
    }
}

@keyframes slowZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.08);
    }
}

@keyframes drift {
    from {
        transform: translateX(0) translateY(0);
    }
    to {
        transform: translateX(22%) translateY(12%);
    }
}

@keyframes emberMove {
    from {
        background-position: 0 100%, 80px 160px;
    }
    to {
        background-position: 0 -400px, 80px -500px;
    }
}

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