/* Extracted from <style> in iFactor_main.html */
:where([class^="ri-"])::before {
    content: "\f3c2";
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #1A2942;
    color: #f0f0f0;
    overflow-x: hidden;
}

.terminal-font {
    font-family: 'Space Mono', monospace;
}

.holographic {
    background: linear-gradient(45deg, #D6E614, #2A4365, #D6E614, #2A4365);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.glow {
    box-shadow: 0 0 15px rgba(214, 230, 20, 0.3);
}

.glow-text {
    text-shadow: 0 0 10px rgba(214, 230, 20, 0.4);
}

.terminal {
    background-color: rgba(10, 10, 10, 0.9);
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 112, 243, 0.3);
}

.terminal-header {
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}

.cursor {
    display: inline-block;
    width: 10px;
    height: 20px;
    background-color: #0070f3;
    animation: blink 1s infinite;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 25px rgba(0, 112, 243, 0.4);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.console-input:focus {
    outline: none;
    border-color: #0070f3;
    box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.2);
}

.grid-pattern {
    background-image:
        linear-gradient(rgba(25, 25, 25, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 25, 25, 0.5) 1px, transparent 1px);
    background-size: 20px 20px;
}

div#mobile-menu {
    height: auto;
    min-height: 100vh;
}

.level-bar-bg {
    background: #374151;
    border-radius: 9999px;
    height: 8px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 8px;
}

.level-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 9999px;
    background: var(--bar-color, #D6E614);
    /* Use CSS var for color, fallback to purple-700 */
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.level-bar-container:hover .level-bar-fill {
    width: var(--target-width);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.active-flag span {
    background-color: #D6E614;
}