/* --- BASIS INSTELLINGEN --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #050505; 
    color: #ffffff;
    overflow-x: hidden;
}

/* --- DE MAGISCHE INTRO (WOW EFFECT) --- */
#intro-scherm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #050505;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: schuifWeg 0.8s cubic-bezier(0.77, 0, 0.175, 1) 2.8s forwards;
}

.intro-logo {
    width: 375px;
    opacity: 0;
    animation: logoWow 2.5s ease-out forwards;
}

@keyframes logoWow {
    0% { opacity: 0; transform: scale(0.9); filter: blur(10px); }
    30% { opacity: 1; transform: scale(1.05); filter: blur(0px); }
    70% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.1); filter: blur(5px); }
}

@keyframes schuifWeg {
    to { transform: translateY(-100%); visibility: hidden; }
}

/* --- INTRO VIDEO MET SCHOON INTERLACE EFFECT (DESKTOP & MOBIEL) --- */
.intro-video-screen, .mobile-intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    z-index: 10000;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#intro-video-element, #mobile-intro-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

/* Schoon Broadcast Interlace Effect (100% Uniform & Zonder Moiré Vlekken) */
.interlace-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.interlace-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.32) 50%
    );
    background-size: 100% 4px;
    opacity: 0.85;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.interlace-beam {
    position: absolute;
    top: -150px;
    left: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    animation: interlaceScanBeam 6s linear infinite;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

@keyframes interlaceScanBeam {
    0% { transform: translateY(-150px); }
    100% { transform: translateY(115vh); }
}

.interlace-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}

/* Gecentreerde bedieningselementen voor desktop en mobiel */
.intro-center-controls, .mobile-intro-center-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 85%;
    max-width: 320px;
    pointer-events: auto;
    text-align: center;
}

.intro-glass-btn {
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    border-radius: 40px;
    padding: 14px 24px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.25s ease;
    outline: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.intro-skip-main-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.85);
    color: #ffffff;
}

.intro-skip-main-btn:active, .intro-skip-main-btn:hover {
    background: #ffffff;
    color: #000000;
    transform: scale(1.03);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.7);
}

.intro-sound-badge {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    padding: 10px 18px;
}

.intro-sound-badge.muted-pulse {
    animation: soundPulse 1.8s infinite ease-in-out;
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.4);
}

@keyframes soundPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); transform: scale(1); }
    50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); transform: scale(1.03); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); transform: scale(1); }
}

.intro-touch-hint {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    margin-top: 2px;
}

/* --- HET MENU (HEADER) - GECENTREERD EN TROTS --- */

/* Geluidsbediening */
.audio-btn {
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 1001; /* Zorgt dat hij altijd overal bovenop ligt */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 30px; /* Mooie afgeronde hoeken (pil-vorm) */
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* Subtiel wazig achter het knopje */
}

.audio-btn:hover {
    background: #ffffff;
    color: #000000;
}

.header {
    position: absolute; /* Zodat het mee-scrollt en niet te veel schermruimte pakt */
    top: 0;
    width: 100%;
    padding: 40px 20px;
    display: flex;
    flex-direction: column; /* Zet het logo BOVEN het menu */
    align-items: center; /* Centreert alles perfect in het midden */
    z-index: 1000;
}

.hoofd-logo {
    height: 225px; /* 2x groter, echt gigantisch en trots! */
    width: auto;
    margin-bottom: 25px; /* Ruimte tussen logo en het menu */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.hoofd-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0px 0px 10px rgba(255,255,255,0.3)); /* Een subtiele witte 'glow' als je er met de muis op staat */
}

.nav {
    display: flex;
    gap: 40px; /* Mooie, ruime afstand tussen de linkjes */
}

.nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px; /* Iets meer spatiëring voor een exclusieve look */
    opacity: 0.7;
    transition: opacity 0.3s;
}

.nav a:hover {
    opacity: 1;
}

/* --- DE GROTE BINNENKOMER (HERO) MET VIDEO --- */
.hero {
    position: relative; /* Belangrijk voor de video en overlay plaatsing */
    height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #111; /* Fallback kleur voor als video laadt */
    border-bottom: 1px solid #222;
    padding-top: 150px; 
    overflow: hidden; /* Zorgt dat de video niet buiten de sectie steekt */
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zorgt dat de video het hele scherm vult zonder te vervormen */
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 5, 5, 0.45);
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3; /* Zorgt dat de tekst BÓVEN de video en interlace overlay staat */
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 5.5rem;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #ffffff;
    opacity: 0;
    animation: fadeInTekst 1s ease-out 3.2s forwards;
}

.hero h1 em {
    font-style: italic;
    font-weight: 500;
    color: #ffffff; /* Subtiel iets zachter voor de cursieve letters */
}

.hero p {
    font-size: 1.2rem;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: 1px;
    opacity: 0;
    animation: fadeInTekst 1s ease-out 3.5s forwards;
}

@keyframes fadeInTekst {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- SPLIT-SCREEN LOGIN EN REGISTRATIE PAGINA --- */
.split-auth-body {
    margin: 0;
    overflow-x: hidden;
    background-color: #111;
    font-family: 'Inter', sans-serif;
}

.split-auth-container {
    display: flex;
    min-height: 100vh;
    width: 100vw;
}

/* Linker Kant */
.auth-left {
    flex: 1;
    background: radial-gradient(circle at center, #222 0%, #0a0a0a 70%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    border-right: 1px solid #1a1a1a;
}

.auth-logo-groot {
    width: 80%;
    max-width: 500px; /* Mooi gigantisch zoals in je voorbeeld */
    margin-bottom: 30px;
}

.auth-subtitle-left {
    font-size: 1.2rem;
    color: #ffffff;
    text-align: center;
    max-width: 400px;
    font-weight: 300;
}

/* Rechter Kant */
.auth-right {
    flex: 1;
    background-color: #141414;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 8%;
    position: relative;
}

.terug-knop-split {
    position: absolute;
    top: 40px;
    left: 8%;
    color: #ffffff;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
}

.terug-knop-split:hover {
    color: #fff;
}

.form-wrapper {
    max-width: 450px;
    width: 100%;
}

.auth-kicker {
    color: #ffffff; /* De felgele accentkleur */
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.auth-titel-split {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 40px;
}

.auth-form-split {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-group label {
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
}

.input-group input {
    width: 100%;
    padding: 18px 20px;
    background-color: #fdfad2; /* De lichtgele/creme kleur uit de mockup */
    border: none;
    color: #000;
    font-size: 1.1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.input-group input:focus {
    outline: 2px solid #ffffff;
}

.auth-btn-split {
    margin-top: 10px;
    background-color: #ffffff;
    color: #fff;
    border: none;
    padding: 20px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.auth-btn-split:hover {
    background-color: #fff;
}

.auth-links-split {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.yellow-link {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.yellow-link:hover {
    color: #fff;
}

.register-text {
    color: #ffffff;
    font-size: 0.95rem;
}

.spam-disclaimer-split {
    margin-top: 50px;
    font-size: 0.8rem;
    color: #444;
}

/* Mobiele optimalisatie voor split-screen */
@media (max-width: 900px) {
    .split-auth-container {
        flex-direction: column; /* Stapel ze op elkaar op kleine schermen */
    }
    .auth-left, .auth-right {
        padding: 40px 20px;
    }
    .auth-titel-split {
        font-size: 2.5rem;
    }
    .terug-knop-split {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 40px;
        display: inline-block;
    }
}

@media (max-width: 768px) {
    .audio-btn {
        top: 20px;
        right: 20px;
        padding: 8px 16px;
        font-size: 0.65rem;
    }
    .header { padding: 30px 20px; }
    .hoofd-logo { 
        height: 75px; /* Nog steeds lekker groot, maar past perfect op een GSM */ 
        margin-bottom: 20px; 
    }
    .nav { 
        gap: 15px; 
        flex-wrap: nowrap; 
        justify-content: center; 
    } /* Zorgt dat het menu op een kleine telefoon niet buiten beeld valt */
    .nav a { font-size: 0.65rem !important; }
    .hero h1 { font-size: 2.8rem; }
    .hero p { 
        font-size: 0.65rem; 
        white-space: nowrap; 
        letter-spacing: 0.5px;
    }
}
/* --- PORTFOLIO (MIJN WERK) SECTIE --- */
.portfolio-container {
    max-width: 1550px;
    margin: 0 auto;
}

.portfolio-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 45px;
    color: #ffffff;
    letter-spacing: 1px;
}

.portfolio-section h2 em {
    font-style: italic;
    font-weight: 400;
    color: #ffffff;
}

@media (max-width: 768px) {
    .portfolio-section h2 {
        font-size: 2rem;
        margin-bottom: 25px;
    }
}

/* --- 3D LOGIN SECTIE --- */
html {
    scroll-behavior: smooth;
}

.login-3d-section {
    min-height: 100vh;
    background: radial-gradient(circle at center, #1a1a1a 0%, #050505 80%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 20px;
    overflow: hidden;
}

.scene-3d {
    width: 100%;
    max-width: 500px;
    perspective: 1200px;
}

.card-3d {
    width: 100%;
    position: relative;
    transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    min-height: 500px;
}

.card-3d.flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 60px 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-back {
    transform: rotateY(180deg);
}

/* --- 3D INTERACTIEVE EFFECTEN --- */
.hero {
    perspective: 1000px; /* Creëert de 3D ruimte voor de Hero sectie */
}

.hero-content {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out; /* Zorgt voor een soepele beweging */
}

.hero-content h1 {
    transform: translateZ(80px); /* Laat de titel naar voren 'zweven' */
    text-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.hero-content p {
    transform: translateZ(40px); /* Laat de subtitel iets minder ver naar voren zweven */
}

/* --- DASHBOARD SECTIE --- */
#dashboard-section {
    display: none; /* Verborgen tot login */
    height: 100vh;
    width: 100vw;
    background-color: #050505;
    color: #fff;
    flex-direction: row;
    position: relative;
    border-top: 1px solid #222;
}

/* Sidebar / Chat list */
.sidebar { width: 350px; background-color: #111; border-right: 1px solid #222; display: flex; flex-direction: column; }
.sidebar-header { padding: 30px 20px; border-bottom: 1px solid #222; display: flex; align-items: center; justify-content: space-between; }
.sidebar-header img { height: 35px; }
.chat-list { flex: 1; overflow-y: auto; }
.chat-item { padding: 20px; border-bottom: 1px solid #1a1a1a; cursor: pointer; display: flex; gap: 15px; align-items: center; transition: background 0.2s; }
.chat-item:hover, .chat-item.active { background-color: #1a1a1a; }
.avatar { width: 50px; height: 50px; border-radius: 50%; background-color: #333; object-fit: cover; }
.chat-info h4 { font-size: 0.95rem; margin-bottom: 5px; color:#fff; }
.chat-info p { font-size: 0.8rem; color: #ffffff; }
.status-dot { width: 8px; height: 8px; background-color: #ffffff; border-radius: 50%; }

/* Main Chat Window */
.chat-window { flex: 1; display: flex; flex-direction: column; background: radial-gradient(circle at top right, #111 0%, #050505 100%); }
.chat-header { padding: 25px 40px; border-bottom: 1px solid #222; display: flex; align-items: center; gap: 15px; }
.chat-history { flex: 1; padding: 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }

.message { max-width: 60%; padding: 15px 20px; border-radius: 12px; font-size: 0.95rem; line-height: 1.5; color: #fff;}
.message.received { background-color: #1a1a1a; align-self: flex-start; border-bottom-left-radius: 2px; }
.message.sent { background-color: #ffffff; align-self: flex-end; border-bottom-right-radius: 2px; }
.message img { max-width: 100%; border-radius: 8px; margin-top: 10px; }

.chat-input-area { padding: 30px 40px; border-top: 1px solid #222; display: flex; gap: 15px; background-color: #0a0a0a; }
.chat-input-area input { flex: 1; background-color: #111; border: 1px solid #333; color: #fff; padding: 15px 20px; border-radius: 30px; font-family: "Inter", sans-serif; outline: none; }
.chat-input-area input:focus { border-color: #ffffff; }
.btn-attach { background: none; border: 1px solid #333; color: #fff; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; transition: 0.2s; }
.btn-attach:hover { background-color: #ffffff; border-color: #ffffff; }
.btn-send { background-color: #ffffff; color: #fff; border: none; padding: 0 30px; border-radius: 30px; font-weight: 800; cursor: pointer; transition: 0.2s; }
.btn-send:hover { background-color: #fff; color: #000; }

/* Onboarding / Setup Modal Overlay */
#onboarding-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5,5,5,0.95); backdrop-filter: blur(10px); z-index: 9999; display: flex; justify-content: center; align-items: center; }
.modal-content { background-color: #111; padding: 50px; border-radius: 15px; width: 100%; max-width: 600px; border: 1px solid #222; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
.modal-content h2 { font-family: "Playfair Display", serif; font-size: 2.5rem; margin-bottom: 10px; color:#fff;}
.modal-content p { color: #ffffff; margin-bottom: 30px; font-size: 0.9rem; }

.form-group { margin-bottom: 25px; }
.form-group label { display: block; font-size: 0.75rem; color: #ffffff; font-weight: 800; letter-spacing: 2px; margin-bottom: 10px; text-align:left;}
.form-group textarea, .form-group input { width: 100%; background-color: #050505; border: 1px solid #333; color: #fff; padding: 15px; border-radius: 8px; font-family: "Inter", sans-serif; resize: vertical; }
.form-group textarea:focus { border-color: #ffffff; outline: none; }

.upload-box { border: 2px dashed #333; padding: 40px; text-align: center; border-radius: 8px; cursor: pointer; color: #ffffff; transition: 0.3s; }
.upload-box:hover { border-color: #ffffff; color: #fff; }

.btn-submit-profile { width: 100%; background-color: #ffffff; color: #fff; border: none; padding: 20px; font-weight: 800; font-size: 1rem; border-radius: 8px; cursor: pointer; letter-spacing: 2px; margin-top: 10px; }
.btn-submit-profile:hover { background-color: #fff; color: #000; }

/* --- BIO SECTIE --- */
.bio-section {
    background-color: #050505;
    padding: 100px 20px;
    text-align: center;
    border-bottom: 1px solid #1a1a1a;
}

.container {
    max-width: 900px;
    margin: 0 auto;
}

.bio-kicker {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.35rem;
    color: #ffffff;
    margin-bottom: 35px;
    letter-spacing: 0.5px;
}

.bio-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
    font-weight: 300;
}

@media (max-width: 768px) {
    .bio-section {
        padding: 50px 18px 40px !important;
    }
    .bio-kicker {
        font-size: 0.92rem !important;
        line-height: 1.45 !important;
        margin-bottom: 20px !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }
    .bio-content p {
        font-size: 0.8rem !important;
        line-height: 1.65 !important;
        margin-bottom: 16px !important;
        color: rgba(255, 255, 255, 0.82) !important;
    }
}

/* --- CONTACT SECTIE --- */
.contact-section {
    padding: 120px 20px;
    background-color: #050505;
    text-align: center;
}

.contact-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.contact-subtitle {
    color: #ffffff;
    margin-bottom: 60px;
    font-size: 1.1rem;
}

.model-form {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 12px;
    color: #fff;
}

.form-group input, .form-group textarea {
    width: 100%;
    background-color: #111;
    border: 1px solid #222;
    padding: 18px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    border-radius: 4px;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: #fff;
    outline: none;
}

.file-input {
    padding: 15px !important;
    border: 2px dashed #333 !important;
    background-color: transparent !important;
    cursor: pointer;
}

.btn-submit {
    width: 100%;
    background-color: #fff;
    color: #000;
    padding: 25px;
    font-weight: 800;
    letter-spacing: 3px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 20px;
}

.btn-submit:hover {
    background-color: #ffffff;
}

/* Language Selector Style */
.lang-selector {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    cursor: pointer;
    margin-top: 25px; /* Adds space between nav and selector */
}

.lang-selector option {
    background-color: #111;
    color: #fff;
}


/* Lightbox Modal */
.lightbox-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.lightbox-content {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    animation: zoomIn 0.25s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.portfolio-section {
    background-color: #070707;
    padding: 110px 20px 80px;
    text-align: center;
}

/* --- VIDEO PORTFOLIO GRID --- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px;
}

.video-item {
    position: relative;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    border: 1px solid #222;
}

.video-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.video-item:hover video {
    opacity: 1;
}

.video-overlay-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 2px;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* --- VIDEO LIGHTBOX MODAL --- */
.video-lightbox-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.98);
    z-index: 10001;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.video-lightbox-container {
    width: 100%;
    max-width: 1000px;
    position: relative;
    background: #050505;
    border: 1px solid #222;
    border-radius: 8px;
    overflow: hidden;
}

.video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
}

.video-info {
    padding: 30px;
    text-align: left;
    background: #111;
}

.video-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: #fff;
}

.video-info p {
    font-size: 1rem;
    line-height: 1.6;
    color: #ccc;
    font-weight: 300;
}

.close-video {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 300;
    cursor: pointer;
    z-index: 10002;
    transition: 0.3s;
}

.close-video:hover {
    color: #888;
}

@media (max-width: 768px) {
    .video-info { padding: 20px; }
    .video-info h3 { font-size: 1.4rem; }
}

/* --- YOUPIC-STYLE CLEAN PHOTOGRAPHY MASONRY GALLERY --- */
.portfolio-grid {
    column-count: 4;
    column-gap: 22px;
    padding: 10px 0;
    text-align: left;
    width: 100%;
}

@media (max-width: 1400px) {
    .portfolio-grid {
        column-count: 3;
        column-gap: 18px;
    }
}

@media (max-width: 900px) {
    .portfolio-grid {
        column-count: 2;
        column-gap: 12px;
    }
}

@media (max-width: 480px) {
    .portfolio-grid {
        column-count: 2;
        column-gap: 8px;
        padding: 5px 0;
    }
}

.portfolio-item {
    break-inside: avoid;
    margin-bottom: 22px;
    background-color: #141414;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease;
}

@media (max-width: 900px) {
    .portfolio-item {
        margin-bottom: 12px;
        border-radius: 5px;
    }
}

@media (max-width: 480px) {
    .portfolio-item {
        margin-bottom: 8px;
        border-radius: 4px;
    }
}

.portfolio-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    filter: brightness(1) contrast(1.02);
    transition: transform 0.45s ease, filter 0.35s ease;
}

.portfolio-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

.portfolio-item:hover img {
    transform: scale(1.025);
    filter: brightness(1.08) contrast(1.04);
}

@media (max-width: 768px) {
    .hero p { 
        font-size: 0.55rem !important; 
        white-space: nowrap !important;
        letter-spacing: 0.3px !important;
    }
    .lang-selector {
        font-size: 0.8rem !important;
        padding: 8px 15px !important;
        border: 1px solid rgba(255,255,255,0.5) !important;
    }
    .nav {
        
        gap: 10px !important;
    }
}

/* --- FINAL MOBILE POLISH --- */
@media (max-width: 768px) {
    .hero p { 
        font-size: 0.45rem !important; opacity: 0.8; 
        white-space: normal !important; /* Allow wrapping if absolutely necessary but keep it tiny */
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.4;
        letter-spacing: 0.5px;
    }
    .nav {
        
        gap: 8px !important; flex-wrap: nowrap !important;
        align-items: center;
    }
    .lang-selector {
        background: rgba(255,255,255,0.1) !important;
        border: 1px solid rgba(255,255,255,0.5) !important;
        padding: 10px 20px !important;
        font-size: 0.9rem !important; /* Larger for better touch target */
        width: auto;
        text-align: center;
    }
}

/* --- NAV SEPARATORS & SPACING --- */
.nav {
    align-items: center;
}

.nav a + a::before {
    content: "|";
    margin-right: 20px;
    margin-left: -20px; /* Offset to center the line between gaps */
    opacity: 0.3;
    pointer-events: none;
    font-weight: 300;
}

@media (max-width: 768px) {
    .header {
        padding: 20px 5px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .hoofd-logo {
        height: 125px !important;
        margin-bottom: 15px !important;
    }
    .nav {
        gap: clamp(3px, 1.2vw, 8px) !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -webkit-overflow-scrolling: touch;
    }
    .nav::-webkit-scrollbar {
        display: none !important;
    }
    .nav a {
        font-size: clamp(0.48rem, 2.05vw, 0.65rem) !important;
        white-space: nowrap !important;
        letter-spacing: clamp(0.2px, 0.08vw, 1px) !important;
        flex-shrink: 0 !important;
    }
    .nav a + a::before {
        display: inline-block !important;
        margin-right: clamp(3px, 1vw, 6px) !important;
        margin-left: -2px !important;
        font-size: clamp(0.5rem, 1.8vw, 0.65rem) !important;
        opacity: 0.25 !important;
    }
    .lang-selector {
        margin-top: 15px !important; /* Duidelijk lager geplaatst */
        display: block !important;
    }
}

/* --- FOOTER BRANDING & CREDITS --- */
.site-footer {
    background-color: #020202;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 60px 20px 45px;
    text-align: center;
    position: relative;
    z-index: 10;
}

.footer-content {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.footer-logo {
    height: 50px;
    width: auto;
    opacity: 0.85;
    margin-bottom: 8px;
    transition: opacity 0.3s, transform 0.3s;
}

.footer-logo:hover {
    opacity: 1;
    transform: scale(1.05);
}

.footer-credit {
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.footer-credit strong {
    color: #ffffff;
    font-weight: 600;
}

.footer-sub {
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
    line-height: 1.6;
}