/* style.css */

:root {
    --bg-color: #FFFDF5;
    --accent-orange: #FF5E1A;
    --accent-blue: #2B65FF;
    --accent-lime: #D4FF00;
    --accent-pink: #FF90E8;
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--bg-color);
    color: #000;
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
    font-family: 'Space Grotesk', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* --- Neo-Brutalist Components --- */

.hard-shadow {
    box-shadow: 4px 4px 0px 0px #000000;
    transition: all 0.2s ease;
    border: 2px solid #000;
}

.hard-shadow:hover {
    box-shadow: 2px 2px 0px 0px #000000;
    transform: translate(2px, 2px);
}

.hard-shadow-static {
    box-shadow: 4px 4px 0px 0px #000000;
    border: 2px solid #000;
}

.grid-pattern {
    background-image: linear-gradient(#000000 1px, transparent 1px),
                      linear-gradient(90deg, #000000 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: -1px -1px;
    opacity: 0.05;
}

/* --- Animations --- */

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

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

.marquee-content {
    display: inline-block;
    animation: scroll 20s linear infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(12deg); }
    50% { transform: translateY(-20px) rotate(12deg); }
}

.animate-float {
    animation: float 5s ease-in-out infinite;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.cursor-blink { animation: blink 1s step-end infinite; }


/* --- Ticker Styles (Subpages) --- */

.ticker-wrap {
    width: 100%;
    overflow: hidden;
    color: white;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

/* Theme Specific Tickers */
.ticker-wrap.blue { background-color: var(--accent-blue); }
.ticker-wrap.orange { background-color: var(--accent-orange); }
.ticker-wrap.pink { background-color: var(--accent-pink); color: black; } 
.ticker-wrap.lime { background-color: var(--accent-lime); color: black; } 

.ticker {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    animation: ticker 30s linear infinite;
}

.ticker__item {
    display: inline-block;
    padding: 0 2rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
}

@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* --- Video Player Controls --- */
.iv-player video::-webkit-media-controls { display: none !important; }

input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    background: #000;
    border: 2px solid var(--accent-lime);
    cursor: pointer;
    margin-top: -6px;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: #000;
}

/* --- LOGIC GATE COLOR SELECTORS (The Fix) --- */

/* Default State */
input[type="radio"] + div {
    transition: all 0.2s ease;
}

/* 1. Website -> Blue */
#type-web:checked + div {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    box-shadow: 4px 4px 0px 0px #000;
    transform: translateY(-4px);
}

/* 2. Mobile App -> Orange */
#type-app:checked + div {
    background-color: var(--accent-orange);
    color: white;
    border-color: var(--accent-orange);
    box-shadow: 4px 4px 0px 0px #000;
    transform: translateY(-4px);
}

/* 3. Bespoke Sys -> Lime */
#type-sys:checked + div {
    background-color: var(--accent-lime);
    color: black;
    border-color: black;
    box-shadow: 4px 4px 0px 0px #000;
    transform: translateY(-4px);
}

/* Icon Colors on Selection */
#type-web:checked + div i { color: white; }
#type-app:checked + div i { color: white; }
#type-sys:checked + div i { color: black; }

/* Glitch Text */
.glitch-text { text-shadow: 1px 0 0 #FF0000, -1px 0 0 #0000FF; }