/* ============================================================
   INDEX.CSS — Stijlen voor de homepagina
   ============================================================ */

body {
    background-color: #f7f6fd;
}

/* Hero-sectie vult de volledige viewport */
.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Achtergrondafbeelding */
.hero-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Langzame zoom-animatie voor levendigheid */
    animation: heroZoom 20s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    from { transform: scale(1);    }
    to   { transform: scale(1.06); }
}

/* Donkere gradient overlay voor leesbaarheid */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.35) 100%
    );
    z-index: 1;
}

/* Gecentreerd logo in hero */
.center-logo {
    position: relative;
    z-index: 2;
    text-align: center;
    /* Inkomst-animatie */
    animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.center-logo img {
    width: 28rem;
    max-width: 85vw;
    height: auto;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.35));
}

/* Scroll-down knop */
.scroll-down {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
    animation: fadeInUp 1s ease 1s both;
}

/* Bounce animatie — rustgevend tempo */
@keyframes bounce {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-8px); }
}

.scroll-link {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.scroll-link:hover {
    opacity: 1;
}

.scroll-link i {
    font-size: 1.8rem;
    animation: bounce 1.8s ease-in-out infinite;
}

/* Logo in navbar: onzichtbaar totdat gescrolld wordt op homepagina */
body.home-page .navbar {
    background-color: transparent;
    box-shadow: none;
}

body.home-page .navbar .logo {
    opacity: 0;
}

body.home-page .navbar.scrolled {
    background-color: var(--color-purple-light);
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}

body.home-page .navbar.scrolled .logo {
    opacity: 1;
}

/* Menu open op mobiel → navbar zichtbaar */
body.home-page .navbar.menu-open {
    background-color: var(--color-purple-light);
}

body.home-page .navbar.menu-open .logo {
    opacity: 1;
}

/* Tekst-informatieblok */
.textbox {
    background-color: var(--color-purple-mid);
    padding: 50px 48px;
    border-radius: 12px;
    max-width: 800px;
    margin: 40px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    /* Animatie bij zichtbaar worden */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.textbox.visible {
    opacity: 1;
    transform: translateY(0);
}

.textbox p {
    color: var(--color-text);
    line-height: 1.75;
    font-size: 1rem;
}

/* ============================================================
   RESPONSIVE — Homepagina
   ============================================================ */
@media (max-width: 768px) {
    /* Op mobiel is logo altijd zichtbaar */
    body.home-page .navbar .logo {
        opacity: 1;
    }

    .center-logo {
        display: none;
    }

    .textbox {
        margin: 20px 12px;
        padding: 32px 24px;
    }
}