/* Logo Fonts */
@font-face { font-family: 'CircuitBoard'; src: url('/fonts/circuit.ttf') format('truetype'); }
@font-face { font-family: 'AIFont'; src: url('/fonts/ai-font.ttf') format('truetype'); }

body, html {
    margin: 0; padding: 0; width: 100%; min-height: 100%;
    background-color: #020205;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    color: #ffffff;
}

/* --- LOGO EN HEADER --- */
.logo-container {
    font-family: 'CircuitBoard', sans-serif;
    font-size: 6rem; display: flex; justify-content: center; align-items: baseline;
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
}

.logo-container.to-header {
    top: 28px; left: 35px;
    transform: translate(0, 0) scale(0.4);
    transform-origin: top left;
}

.letter { display: inline-block; will-change: margin, transform, opacity; }
.v { color: #ff00ff; filter: drop-shadow(0 0 15px #ff00ff); margin-right: -8px; }
.r { color: #00e5ff; filter: drop-shadow(0 0 15px #00e5ff); margin-left: -8px; }

.inner {
    font-family: 'AIFont', sans-serif; font-size: 0.52em; width: 0; opacity: 0;
    overflow: hidden; white-space: nowrap; text-transform: none !important;
    transform: translateY(-15px); color: #ffffff;
    text-shadow: 0 0 8px #fff, 0 0 20px #ff00ff; 
    filter: brightness(1.8); display: inline-block;
}

/* --- ACCOUNT KNOP --- */
.account-btn-wrapper {
    position: fixed; top: 31px; right: 45px; opacity: 0; 
    transform: translateY(-10px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10001; pointer-events: none;
}
.account-btn-wrapper.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.profile-btn {
    background: #1a1a2e; border: 1px solid #ff00ff; color: #ff00ff;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; transition: 0.3s;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}
.profile-btn:hover { box-shadow: 0 0 25px #ff00ff; background: #ff00ff; color: #fff; }

/* --- CONTENT SECTIE --- */
#main-content {
    opacity: 0;
    padding: 160px 5% 60px 5%;
    max-width: 1400px;
    margin: 0 auto;
    transition: opacity 1.5s ease-in;
}

.hero-text { text-align: center; margin-bottom: 80px; }
.hero-tag { font-family: 'JetBrains Mono', monospace; color: #00e5ff; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; margin-bottom: 15px; }
.hero-text h1 { font-size: 3.5rem; font-weight: 800; letter-spacing: -1px; max-width: 800px; margin: 0 auto; line-height: 1.1; }

.gradient-text {
    background: linear-gradient(90deg, #ff00ff, #00e5ff);
    -webkit-background-clip: text; /* Voor Safari/Chrome */
    background-clip: text;         /* Standaard eigenschap */
    -webkit-text-fill-color: transparent;
    color: transparent;            /* Fallback */
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.card {
    background: rgba(15, 15, 25, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 35px;
    position: relative;
    transition: all 0.4s ease;
    backdrop-filter: blur(12px);
}

.card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 0, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.card-header { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; color: #ffffff; margin-bottom: 15px; display: flex; align-items: center; gap: 12px; }
.card-header i { color: #ff00ff; }
.card p { font-size: 1rem; color: #a0a0b0; line-height: 1.6; margin-bottom: 25px; }
.icon-group { display: flex; gap: 15px; margin-top: 15px; font-size: 1.8rem; }

.scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%); background-size: 100% 4px; z-index: 10000; pointer-events: none; }