@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700;900&display=swap');

:root {
    --acid-green: #CCFF00;
    --hot-pink: #FF00FF;
    --cyan: #00FFFF;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
}

/* Backgrounds */
.retro-bg {
    background-color: #e5e5f7;
    /*background-image:  linear-gradient(#000 1.2px, transparent 1.2px), linear-gradient(90deg, #000 1.2px, transparent 1.2px);*/
    background-size: 40px 40px;
    animation: scrollGrid 20s linear infinite;
}
@keyframes scrollGrid {
    to { background-position: 40px 40px; }
}

/* Animations */
.slide-up { animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(50px); }
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }

.marquee-container { overflow: hidden; white-space: nowrap; position: absolute; top: 0; left: 0; width: 100%; opacity: 0.1; font-size: 10rem; font-weight: 900; pointer-events: none; }
.marquee-content { display: inline-block; animation: marquee 20s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Brutal Components */
.brutal-card {
    background: white; border: 3px solid black; box-shadow: 8px 8px 0px 0px #000;
    transition: 0.2s;
}
.brutal-card:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0px 0px var(--hot-pink); }

.brutal-input {
    border: 3px solid black; background: #fff; font-weight: bold; transition: 0.2s;
}
.brutal-input:focus { outline: none; background-color: var(--acid-green); box-shadow: 6px 6px 0px 0px black; }

.brutal-btn {
    border: 3px solid black; font-weight: 900; text-transform: uppercase; box-shadow: 6px 6px 0px 0px black; transition: 0.1s;
}
.brutal-btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0px 0px black; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Add to style.css */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 3s linear infinite;
}