/* =========================
   GLOBAL BASE
   ========================= */
body {
    margin: 0;
    padding: 0;
    position: relative;

    font-family: Georgia, serif;

    /* middle zone (off-white blue/gray) */
    background: #eef2f6;
    color: #2b2b2b;
}

/* force theme override for old inline colors */
h1, h2, h3, p, a {
    color: #E0115F !important;
}



/* =========================
   TOP HEADER (PURE WHITE)
   ========================= */
.header {
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* logo clean */
.logo-img {
    filter: none !important;
    box-shadow: none !important;
}

/* =========================
   CONTENT AREA
   ========================= */
.container {
    background: #eef2f6;
    padding-bottom: 120px; /* room for footer */
}

.center_all {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* =========================
   LINKS
   ========================= */
a {
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* =========================
   STORY BUTTON
   ========================= */
p a[href='./story.php'] {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid #2b2b2b;
    border-radius: 6px;
}

p a[href='./story.php']:hover {
    background: #2b2b2b;
    color: #fff !important;
}

p a[href='./story.php'] {
    filter: none !important;
}

/* =========================
   FOOTER (PURE WHITE)
   ========================= */
.bottom_nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    background: #ffffff;

    border-top: 1px solid rgba(0,0,0,0.08);

    display: flex;
    justify-content: center;
    gap: 12px;

    padding: 12px 0;
}

/* footer links */
.bottom_nav a {
    color: #2b2b2b !important;
    padding: 6px 12px;
    border-radius: 6px;
}

.bottom_nav a:hover {
    background: rgba(0,0,0,0.05);
}

/* =========================
   SMOKE (CENTERED ON FOOTER EDGE)
   ========================= */

/*
   Key idea:
   - centered on footer top edge
   - extends 50% above, 50% below
*/
body::after {
    content: "";
    position: fixed;

    left: 0;
    width: 100%;
    height: 220px;

    /* now properly hugging the footer */
    bottom: -100px;

    z-index: 9998;
    pointer-events: none;

    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 200, 0.45),
        rgba(255, 255, 200, 0.45) 35%,
        rgba(255, 255, 200, 0.45) 60%,
        rgba(255, 255, 200, 0.45) 80%,
        transparent 92%
    );

    filter: blur(10px);

    opacity: 1;

    animation: astralSmoke 10s ease-in-out infinite;
}

/* gentle breathing motion */
@keyframes astralSmoke {
    0% {
        transform: translateY(1px);
        opacity: 0.2;
        height:75px;
    }
    50% {
        transform: translateY(-34px);
        opacity: 0.95;
        height:200px;
    }
    100% {
        transform: translateY(1px);
        opacity: 0.2;
        height:75px;
    }
}
/* gentle breathing motion */
@keyframes astralSmoke2 {
    0% {
        transform: translateY(1px);
        opacity: 0.1;
    }
    50% {
        transform: translateY(1px);
        opacity: 0.3;
    }
    100% {
        transform: translateY(1px);
        opacity: 0.1;
    }
}



/*  FIRE  */
body::before {
    content: "";
    position: fixed;

    left: 0;
    width: 100%;
    height: 100px;

    /* sits slightly ABOVE footer edge, overlapping smoke */
    bottom: -30px;

    z-index: 9999;
    pointer-events: none;

    /* FIRE CORE */
    background: radial-gradient(
        ellipse at center bottom,
        rgba(224, 17, 95, 0.95),
        rgba(224, 17, 95, 0.75) 40%,
        rgba(224, 17, 95, 0.35) 70%,
        transparent 90%
    );

    filter: blur(6px);

    opacity: 0.9;

    /*animation: astralFireFlicker 1.8s infinite ease-in-out;*/
    animation: astralSmoke2 10s ease-in-out infinite;
}
@keyframes astralFireFlicker {
    0% {
        transform: translateY(0px) scaleY(1);
        opacity: 0.75;
    }
    25% {
        transform: translateY(-2px) scaleY(1.05);
        opacity: 0.95;
    }
    50% {
        transform: translateY(1px) scaleY(0.98);
        opacity: 0.85;
    }
    75% {
        transform: translateY(-1px) scaleY(1.02);
        opacity: 1;
    }
    100% {
        transform: translateY(0px) scaleY(1);
        opacity: 0.8;
    }
}