.noise::before {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    content: "";
    opacity: .02;
    mix-blend-mode: hard-light;
    z-index: 1;
    pointer-events: none;
    background: url(https://file.garden/aIsfEmKdCw5cTYHb/noise.gif);
    animation: flickerAnimation 1s infinite;
}

.navbar a {
    top: 94%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    position: fixed;
    width: 40px;
    height: 40px;
    color: #F0ECE2;
    font-size: 1.5rem;
    background-color: #454239;
    border-radius: 100px;
    text-decoration: none;
    font-family: serif;
}

.navbar a:hover {
    text-decoration: underline 1.2px;
    text-underline-offset: 2px;
}

body {
    margin: 0;
    padding: 0;
    background-color: #F0ECE2;
}

@font-face {
    font-family: 'Pantasia';
    src: url('assets/PantasiaUnlicencedTrial-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Lettra';
    src: url('assets/PPLettraMono-UltralightItalic.otf');
    font-style: normal;
    font-weight: normal;
}

h2 {
    font-family: Lettra;
    font-size: 1.2em;
    color: #F0ECE2;
}

h2 a {
    text-shadow: #E4E0D8 1px 0 10px;
    color: #E4E0D8;
    text-decoration: none;
}

p {
    font-family: Pantasia;
    font-size: 1.1em;
}

.venndiagram {
    position: relative;
    width: 1200px;
    height: 800px;
    margin: 0 auto;
bottom:20px;
scale: 90%;
}

#leftcircle, #rightcircle {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    mix-blend-mode: multiply;
    border: 2px solid #27251F;
    background: none;
    filter: blur(0.4px);
}

#leftcircle {
    left: 0;
    top: 10%;
}

#rightcircle {
    left: 400px;
    top: 10%;
}

#vennicons {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#crow {
    position: absolute;
    width: 60px;
    height: auto;
    background: none;
    filter: blur(0.3px);
    left: 400px;
    top: 4%;
    transform: translate(-50%, -50%);
}

#raven {
    position: absolute;
    width: 78px;
    height: auto;
    background: none;
    filter: blur(0.3px);
    left: 800px;
    top: 4%;
    transform: translate(-50%, -50%);
}

#facts {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.fact {
    position: absolute;
    font-family: Georgia, serif;
    font-size: 14px;
    color: #454239;
    max-width: 200px;
    opacity: 0.2;
    transition: all 0.3s ease;
    cursor: default;
    line-height: 1.2em;
    text-align: center;
    filter: blur(0.3px);
}

.fact:hover {
    opacity: 1;
    color: #739F41;
}

/* CROW FACTS (Left Circle) */
.crow-fact-1 { left: 250px; top: 150px; }
.crow-fact-2 { left: 70px; top: 380px; }
.crow-fact-3 { left: 150px; top: 490px; }
.crow-fact-4 { left: 120px; top: 620px; }
.crow-fact-5 { left: 200px; top: 300px; }
.crow-fact-6 { left: 280px; top: 780px; }
.crow-fact-7 { left: 120px; top: 220px; }

/* RAVEN FACTS (Right Circle) */
.raven-fact-1 { left: 730px; top: 130px; }
.raven-fact-2 { left: 910px; top: 620px; }
.raven-fact-3 { left: 840px; top: 510px; }
.raven-fact-4 { left: 940px; top: 405px; }
.raven-fact-5 { left: 820px; top: 315px; }
.raven-fact-6 { left: 780px; top: 740px; }
.raven-fact-7 { left: 850px; top: 232px; }

/* SHARED FACTS (Center) */
.shared-fact-1 { left: 480px; top: 250px; }
.shared-fact-2 { left: 560px; top: 360px; }
.shared-fact-3 { left: 400px; top: 420px; }
.shared-fact-4 { left: 600px; top: 510px; }
.shared-fact-5 { left: 460px; top: 580px; }
.shared-fact-6 { left: 520px; top: 680px; }


/* --------------------------------------------------
   HOVER ZONES (new)
-------------------------------------------------- */

#hover-left, #hover-right, #hover-center {
    position: absolute;
    top: 10%;
    height: 800px;
    z-index: 5;
    background: transparent;
}

#hover-left {
    left: 0;
    width: 850px;
    border-radius: 50%;
}

#hover-right {
    left: 400px;
    width: 800px;
    border-radius: 50%;
}

#hover-center {
    top: 130px;
    left: 400px;
    width: 400px;
    height: 700px;
    border-radius: 50%;
}
/* --- STAGGER ANIMATION (slower) --- */

@keyframes fadeInStagger {
    from {
        opacity: 0.2;
        }
    to {
        opacity: 1;
        
    }
}

/* ---- fade-in via transition-delay + smooth fade-out ---- */

/* base: facts are low opacity and transition back immediately on unhover */
.fact {
    opacity: 0.2;
    transition: opacity .8s ease 0s, color .6s ease 0s;
}

/* -------- CROW: fade IN staggered, fade OUT smooth (no stagger) -------- */
#hover-left:hover ~ #facts .crow-fact-1 { opacity: 1; color: #27251F; transition-delay: 0s; }
#hover-left:hover ~ #facts .crow-fact-2 { opacity: 1; color: #27251F; transition-delay: .08s; }
#hover-left:hover ~ #facts .crow-fact-3 { opacity: 1; color: #27251F; transition-delay: .16s; }
#hover-left:hover ~ #facts .crow-fact-4 { opacity: 1; color: #27251F; transition-delay: .24s; }
#hover-left:hover ~ #facts .crow-fact-5 { opacity: 1; color: #27251F; transition-delay: .32s; }
#hover-left:hover ~ #facts .crow-fact-6 { opacity: 1; color: #27251F; transition-delay: .40s; }
#hover-left:hover ~ #facts .crow-fact-7 { opacity: 1; color: #27251F; transition-delay: .48s; }

/* -------- RAVEN: fade IN staggered, fade OUT smooth -------- */
#hover-right:hover ~ #facts .raven-fact-1 { opacity: 1; color: #27251F; transition-delay: 0s; }
#hover-right:hover ~ #facts .raven-fact-2 { opacity: 1; color: #27251F; transition-delay: .08s; }
#hover-right:hover ~ #facts .raven-fact-3 { opacity: 1; color: #27251F; transition-delay: .16s; }
#hover-right:hover ~ #facts .raven-fact-4 { opacity: 1; color: #27251F; transition-delay: .24s; }
#hover-right:hover ~ #facts .raven-fact-5 { opacity: 1; color: #27251F; transition-delay: .32s; }
#hover-right:hover ~ #facts .raven-fact-6 { opacity: 1; color: #27251F; transition-delay: .40s; }
#hover-right:hover ~ #facts .raven-fact-7 { opacity: 1; color: #27251F; transition-delay: .48s; }

/* -------- SHARED (center) : fade IN staggered, stay GREEN, fade OUT smooth -------- */
/* use !important so center color beats other rules */
#hover-center:hover ~ #facts .shared-fact-1 { opacity: 1; color: #739F41 !important; transition-delay: 0s; }
#hover-center:hover ~ #facts .shared-fact-2 { opacity: 1; color: #739F41 !important; transition-delay: .08s; }
#hover-center:hover ~ #facts .shared-fact-3 { opacity: 1; color: #739F41 !important; transition-delay: .16s; }
#hover-center:hover ~ #facts .shared-fact-4 { opacity: 1; color: #739F41 !important; transition-delay: .24s; }
#hover-center:hover ~ #facts .shared-fact-5 { opacity: 1; color: #739F41 !important; transition-delay: .32s; }
#hover-center:hover ~ #facts .shared-fact-6 { opacity: 1; color: #739F41 !important; transition-delay: .40s; }