:root {
    --bg: #050505;
    --fg: #fff;
    --muted: #aaa;
    --card: #1a1a1a;
    --cardHover: rgba(30,30,30,.6);
    --font: "Courier New", Courier, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font);overflow-x:hidden}

#hero{position:relative;height:100vh;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}
canvas{position:absolute;inset:0;z-index:1;display:block}

#nav-container{
    position:fixed;top:0;left:0;width:100%;padding:20px 40px;z-index:100;
    display:flex;justify-content:flex-end;align-items:center;
    opacity:0;transition:opacity 1s ease,padding .3s ease,background-color .3s ease;
    mix-blend-mode:difference;
}
#nav-container.visible{opacity:1}
#nav-container.collapsed{padding:10px 20px;background:rgba(0,0,0,.8);backdrop-filter:blur(5px)}
#nav-links{display:flex;gap:2rem;text-transform:uppercase;letter-spacing:2px;transition:.4s}
#nav-links a{color:#fff;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:5px;transition:.25s}
#nav-links a:hover{border-bottom:1px solid #fff}
#nav-container.collapsed #nav-links{opacity:0;pointer-events:none;transform:translateX(20px);position:absolute}
#nav-container.collapsed.expanded #nav-links{opacity:1;pointer-events:auto;transform:translateX(-50px);position:relative}
#nav-toggle{
    display:none;cursor:pointer;font-size:1.2rem;font-weight:bold;border:1px solid #fff;
    padding:5px 10px;background:#000;color:#fff;user-select:none
}
#nav-container.collapsed #nav-toggle{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.section{padding:4rem 2rem;max-width:1400px;margin:0 auto;position:relative;z-index:2}
h2{font-size:2rem;margin-bottom:2rem;text-transform:uppercase;border-left:5px solid var(--fg);padding-left:1rem}

.filter-container{
    margin-bottom:3rem;display:flex;flex-wrap:wrap;gap:15px;justify-content:center
}
.filter-btn{
    background:transparent;border:1px solid #444;color:#666;padding:8px 16px;cursor:pointer;
    font-family:var(--font);text-transform:uppercase;font-size:.8rem;transition:.25s
}
.filter-btn:hover,.filter-btn.active{
    border-color:#fff;color:#fff;background:#111;box-shadow:0 0 10px rgba(255,255,255,.08)
}

.projects-grid{
    display:flex;flex-wrap:wrap;justify-content:center;gap:3rem
}

.card-wrapper{
    position:relative;display:block;text-decoration:none;color:inherit;z-index:10;
    width:350px;max-width:100%;
    flex: 0 1 350px;
    transition: opacity .28s ease, transform .28s ease;
    will-change: opacity, transform;
}

.card-wrapper.is-hiding{opacity:0;transform:translateY(10px) scale(.985);pointer-events:none}
.card-wrapper.is-hidden{display:none}

.card-shadow-layer{
    position:absolute;inset:0;z-index:-1;
    background-image: radial-gradient(#888 1.5px, transparent 1.5px), radial-gradient(#555 2.5px, transparent 2.5px);
    background-size:6px 6px,16px 16px;opacity:0;transition:opacity .3s ease
}
.card{
    background:var(--card);padding:2rem;border:1px solid #333;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), background-color .3s ease, border-color .3s ease;
    position:relative;z-index:2;height:100%;
    display:flex;flex-direction:column;justify-content:space-between;
}
.card h3{font-size:1.5rem;margin-bottom:.5rem;text-transform:uppercase}
.card p{color:var(--muted);font-size:.9rem;margin-bottom:1.5rem;line-height:1.4;flex-grow:1}
.status{
    font-size:.7rem;border:1px solid #444;padding:4px 8px;align-self:flex-start;color:#888;
    text-transform:uppercase;letter-spacing:1px;background:#0a0a0a
}

.card-wrapper:hover .card{
    transform:translate(-10px,-10px);
    background:var(--cardHover);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border-color:#fff;
}
.card-wrapper:hover .status{border-color:#fff;color:#fff}
.card-wrapper:hover .card-shadow-layer{
    opacity:1;transform:translate(10px,10px);
    animation:static-noise .2s infinite steps(2)
}
@keyframes static-noise{
    0%{background-position:0 0,0 0}
    50%{background-position:-2px 2px,0 -2px}
    100%{background-position:0 0,0 0}
}

#show-more-btn{
    display:block;margin:4rem auto 0;background:transparent;color:#666;border:1px solid #444;
    padding:15px 40px;font-family:var(--font);text-transform:uppercase;cursor:pointer;transition:.25s;letter-spacing:2px
}
#show-more-btn:hover{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 12px rgba(255,255,255,.22)}
#show-more-btn.hidden{display:none}

.contacts-list{list-style:none;font-size:1.2rem}
.contacts-list li{margin-bottom:1rem}
.contacts-list a{
    color:var(--fg);text-decoration:none;border-bottom:1px dashed #555;
    transition:.18s; padding:2px 5px;
}
.contacts-list a:hover{
    background:#fff;color:#000;border-bottom:1px solid #fff;
    box-shadow:0 0 6px rgba(255,255,255,.22);
}

footer{padding:3rem 2rem;border-top:1px solid #333;margin-top:4rem;display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:#666;flex-wrap:wrap;gap:1rem}
.oaklog-badge{display:flex;align-items:center;gap:10px}
.oaklog-logo{width:20px;height:20px;background:#fff;display:inline-block;clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%)}

@media (max-width:768px){
    #nav-container{padding:15px 20px}
    .card-wrapper{width:100%;flex:1 1 100%}
    .projects-grid{gap:2.5rem}
    .card-wrapper:hover .card{transform:translate(-5px,-5px)}
}