/*--------------------- STYLE AREA -----------------------*/

.bg-calculus-mountain-sky {

    background-image: url("../media/images/backgrounds/mountain-sky.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    /*
    background-position: top top;
    width: 100%;
    height: 100vh;
    position: fixed;
    */
}
.bg-circle-choice {

    background-image: url("../media/images/calculus/circlechoice.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

}
.bg-rotator {

    background-image: url("../media/images/calculus/bg-rotator.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

}

.bg-connector {

    background-image: url("../media/images/calculus/connectorchoice.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}
.bg-card-calculus {

    background-image: url("../media/images/calculus/card.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

}

.bg-daylight-25 {

    background: linear-gradient(rgba(245, 94, 39, 0.5), rgba(245, 207, 39, 0.4)), url("../media/images/library/gallery/waterton/4.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: lighten;
    z-index: 5;

}
.bg-board-light-75 {
    background-color:rgba(252, 250, 250, 0.75);
}

.bg-modern-technology-container {
    width: 100%;
    padding: 3rem;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.8);

    /* Bright Tech Gradient Base */
    background-color: #f4f7fc;
    background-image:
        /* Animated Floating Nodes SVG Layer */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E @keyframes float1 %7B 0%25, 100%25 %7B transform: translate(0, 0); %7D 50%25 %7B transform: translate(15px, -20px); %7D %7D @keyframes float2 %7B 0%25, 100%25 %7B transform: translate(0, 0); %7D 50%25 %7B transform: translate(-20px, 15px); %7D %7D @keyframes pulse %7B 0%25, 100%25 %7B opacity: 0.3; %7D 50%25 %7B opacity: 0.7; %7D %7D .node %7B fill: %2300d2ff; opacity: 0.4; animation: pulse 4s ease-in-out infinite; %7D .line %7B stroke: %230082ff; stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.15; %7D .group-a %7B animation: float1 12s ease-in-out infinite; %7D .group-b %7B animation: float2 16s ease-in-out infinite; %7D %3C/style%3E%3C/defs%3E%3Cg class='group-a'%3E%3Ccircle cx='10%25' cy='20%25' r='4' class='node' /%3E%3Ccircle cx='15%25' cy='25%25' r='2' class='node' /%3E%3Cline x1='10%25' y1='20%25' x2='15%25' y2='25%25' class='line' /%3E%3Ccircle cx='85%25' cy='15%25' r='5' class='node' style='fill: %237928ca;' /%3E%3Ccircle cx='75%25' cy='30%25' r='3' class='node' style='fill: %237928ca;' /%3E%3Cline x1='85%25' y1='15%25' x2='75%25' y2='30%25' class='line' /%3E%3C/g%3E%3Cg class='group-b'%3E%3Ccircle cx='20%25' cy='75%25' r='3' class='node' /%3E%3Ccircle cx='80%25' cy='80%25' r='4' class='node' style='fill: %237928ca;' /%3E%3Ccircle cx='88%25' cy='70%25' r='2' class='node' style='fill: %237928ca;' /%3E%3Cline x1='80%25' y1='80%25' x2='88%25' y2='70%25' class='line' /%3E%3C/g%3E%3C/svg%3E"),

        /* Digital Grid Layer */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='%230055ff' stroke-width='1' stroke-opacity='0.03'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%230055ff' fill-opacity='0.06'/%3E%3C/svg%3E"),

        /* Vibrant, clean linear gradient base */
        linear-gradient(135deg, #f5f7fa 0%, #e4ecfa 50%, #f1e9fc 100%);

    background-attachment: local;
}

/* Text Content Typography (Ensuring high contrast) */
.bg-modern-technology-container h1 {
    margin-top: 0;
    color: #1e293b; /* Dark slate for premium readability */
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
}

.bg-modern-technology-container p {
    color: #475569; /* Balanced dark gray text */
    font-size: 1.125rem;
    line-height: 1.75;
    margin-bottom: 2rem;
}

.bg-modern-technology-button {
    display: inline-block;
    background: linear-gradient(135deg, #0082ff 0%, #7928ca 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 130, 255, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 0;
}

.bg-modern-technology-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 130, 255, 0.4);
}

.animate-choice {

    animation: scale-up 3s ease infinite;
    animation-timing-function: linear;

}

.bacteria {
    width: 200px;
    height: 200px;
    position: relative;
    animation: bounce 2s cubic-bezier(.28,.84,.42,1) infinite;
}



/* Form Buttons */
.choice-neon {
    background: rgb(241,147,4);
    background: linear-gradient(0deg, rgba(241,147,4,1) 0%, rgba(240,198,6,0.5998774509803921) 33%, rgba(244,220,1,1) 100%);
}
.choice-neon:focus {
    background: rgb(21,175,3);
    background: linear-gradient(0deg, rgba(21,175,3,0.7) 0%, rgba(175,240,6,1) 33%, rgba(59,222,9,1) 100%);
    color: #1C6305;
}

/* Bounce keyframes */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-150px); /* Jump height */
    }
    60% {
        transform: translateY(-75px); /* Smaller bounce */
    }
}

/*--------------------- CUSTOM SCROLL BARS -----------------------*/


/* CUSTOM SCROLLBARS */
.scroll-lemon::-webkit-scrollbar {
    width: 10px;
}
.scroll-lemon::-webkit-scrollbar-thumb {
    background: Gold;
}
.scroll-lemon::-webkit-scrollbar-track {
    background: LemonChiffon;
}

/*--------------------- ANIMATIONS AREA -----------------------*/

@keyframes scale-up {

    from {
        transform: scale(0.5); /* Original size */
    }
    to {
        transform: scale(1); /* 20% larger */
    }

}

/*--------------------- BIRD ON GAME BACKGROUND -----------------------*/
.sky-container {
    width: 100%;
    height: 200px; /* Adjust as needed */
    overflow: hidden; /* Keeps the bird inside the container */
    position: fixed;
    background-color: transparent;
}

.bird {
    position: absolute;
    width: 150px; /* Adjust image size */
    top: 75px; /* Starting vertical position */
    animation: fly-across 5s linear infinite ; /* The 'alternate' property is key for smooth direction change */
    z-index: 1;
}

@keyframes fly-across {
    0% {
        left: -25%;
    }
    25% {
        top: 50%;
    }
    75% {
        top: 0;
    }
    100% {
        left: calc(100% - 100px); /* Moves to the right edge */
    }
}