html {
    background-color: #0F1617;
    /* Matches footer color to hide white overscroll gap */
}

body {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    display: flex;
    /* Sticky Footer Setup */
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    /* Prevent horizontal scroll on mobile */
    scroll-behavior: smooth;
    position: relative;
    /* Prevent fixed positioning issues */
}

main {
    flex: 1;
    /* Pushes footer down */
}

footer {
    margin-top: auto;
    /* Ensures footer stays at bottom */
}

.bg-grid-pattern {
    background-image: linear-gradient(to right, #e5e7eb 1px, transparent 1px),
        linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
    background-size: 40px 40px;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
    will-change: transform;
    /* Performance hint for browser compositor */
}

.animate-float-delayed {
    animation: float 7s ease-in-out infinite 2s;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-flex;
    animation: scroll 30s linear infinite;
}