@charset "utf-8";
/* CSS Document */

/* ========================================
   CONTENT SECTIONS — BASIS
======================================== */

.content-section {
    --section-bg: var(--bg);
    --section-color: var(--blue);
    --section-heading: var(--dark-blue);
    --section-eyebrow: var(--honey);
    --section-accent: var(--gold);
    --section-max-width: 42rem;

    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 100vh;
    min-height: 100svh;

    padding:
        var(--section-padding)
        var(--page-padding);

    overflow: hidden;

    background: var(--section-bg);
    color: var(--section-color);
}


/* ========================================
   CONTENTBREEDTE
======================================== */

.content-section > * {
    width: min(
        100%,
        var(--section-max-width)
    );
}


/* ========================================
   EYEBROW
======================================== */

.content-section .eyebrow {
    margin: 0 0 1rem;

    color: var(--section-eyebrow);

    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ========================================
   TITELS
======================================== */

.content-section h2 {
    position: relative;

    margin: 0;
    padding-bottom: 1.25rem;

    color: var(--section-heading);

    font-family: var(--font-heading);
    font-size: clamp(2rem, 9vw, 3.25rem);
    font-weight: 500;
    line-height: 1.05;

    text-wrap: balance;
}

/* ========================================
   TEKST
======================================== */

.content-section p {
    margin: 1.5rem 0 0;

    color: inherit;

    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
}

.content-section strong {
    color: var(--section-heading);
    font-weight: 600;
}

.content-section a {
    color: var(--section-heading);
    text-decoration-color: var(--section-accent);
    text-underline-offset: 0.2em;
}


/* ========================================
   LIJSTEN
======================================== */

.content-section ul,
.content-section ol {
    margin-top: 1.5rem;
    padding-left: 1.25rem;

    color: inherit;
}

.content-section li {
    margin-top: 0.65rem;
    line-height: 1.7;
}

.content-section li::marker {
    color: var(--section-accent);
}

/* ========================================
   CONTENTPALET — BLAUW
======================================== */

.content-section--blue {
    --section-bg: var(--blue);
    --section-color: var(--rock);
    --section-heading: var(--rock);
    --section-eyebrow: var(--honey);
    --section-accent: var(--honey);
}

.content-section--dark-blue {
    --section-bg: var(--dark-blue);
    --section-color: var(--honey);
    --section-heading: var(--honey);
    --section-eyebrow: var(--brown);
    --section-accent: var(--brown);
}

.content-section--storm-blue {
    --section-bg: var(--storm-blue);
    --section-color: var(--dark-blue);
    --section-heading: var(--dark-blue);
    --section-eyebrow: var(--honey);
    --section-accent: var(--honey);
}

.content-section--soft-blue {
    --section-bg: var(--soft-blue);
    --section-color: var(--dark-blue);
    --section-heading: var(--dark-blue);
    --section-eyebrow: var(--kaki);
    --section-accent: var(--kaki);
}

.content-section--ice-blue {
    --section-bg: var(--ice-blue);
    --section-color: var(--dark-blue);
    --section-heading: var(--dark-blue);
    --section-eyebrow: var(--honey);
    --section-accent: var(--honey);
}

/* ========================================
   CONTENTPALET — BRUIN
======================================== */

.content-section--brown-dark {
    --section-bg: var(--brown-dark);
    --section-color: var(--honey);
    --section-heading: var(--honey);
    --section-eyebrow: var(--karamel);
    --section-accent: var(--karamel);
}

.content-section--brown {
    --section-bg: var(--brown);
    --section-color: var(--jungle);
    --section-heading: var(--jungle);
    --section-eyebrow: var(--honey);
    --section-accent: var(--honey);
}

.content-section--brown-light {
    --section-bg: var(--brown-light);
    --section-color: var(--storm-blue);
    --section-heading: var(--karamel);
    --section-eyebrow: var(--storm-blue);
    --section-accent: var(--honey);
}

.content-section--karamel {
    --section-bg: var(--karamel);
    --section-color: var(--dark-blue);
    --section-heading: var(--dark-blue);
    --section-eyebrow: var(--honey);
    --section-accent: var(--honey);
}

.content-section--honey {
    --section-bg: var(--honey);
    --section-color: var(--jet);
    --section-heading: var(--jet);
    --section-eyebrow: var(--karamel);
    --section-accent: var(--karamel);
}

.content-section--terra {
    --section-bg: var(--terra);
    --section-color: var(--jungle);
    --section-heading: var(--jungle);
    --section-eyebrow: var(--brown-light);
    --section-accent: var(--ice-blue);
}

/* ========================================
   CONTENTPALET — DONKER
======================================== */

.content-section--jungle {
    --section-bg: var(--jungle);
    --section-color: var(--soft-blue);
    --section-heading: var(--soft-blue);
    --section-eyebrow: var(--karamel);
    --section-accent: var(--karamel);
}

.content-section--jet {
    --section-bg: var(--jet);
    --section-color: var(--brown-light);
    --section-heading: var(--brown-light);
    --section-eyebrow: var(--soft-blue);
    --section-accent: var(--soft-blue);
}

/* ========================================
   CONTENTPALET — LICHT
======================================== */

.content-section--sand {
    --section-bg: var(--sand);
    --section-color: var(--karamel);
    --section-heading: var(--karamel);
    --section-eyebrow: var(--storm-blue);
    --section-accent: var(--storm-blue);
}

.content-section--kaki {
    --section-bg: var(--kaki);
    --section-color: var(--dark-blue);
    --section-heading: var(--dark-blue);
    --section-eyebrow: var(--honey);
    --section-accent: var(--honey);
}

.content-section--rock {
    --section-bg: var(--rock);
    --section-color: var(--storm-blue);
    --section-heading: var(--storm-blue);
    --section-eyebrow: var(--brown-light);
    --section-accent: var(--brown-light);
}

.content-section--rice {
    --section-bg: var(--rice);
    --section-color: var(--blue);
    --section-heading: var(--blue);
    --section-eyebrow: var(--honey);
    --section-accent: var(--honey);
}

.content-section--offwhite {
    --section-bg: var(--offwhite);
    --section-color: var(--jungle);
    --section-heading: var(--jungle);
    --section-eyebrow: var(--soft-blue);
    --section-accent: var(--soft-blue);
}

/* ========================================
   CONTENT SECTIONS — STAPELSCROLL
======================================== */

.site-sections {
    position: relative;
    z-index: 8;

    background: transparent;

    isolation: isolate;
}

.site-sections > .content-section {
    position: sticky;
    top: var(--stack-top, 0px);

    width: 100%;

    padding-bottom: 6rem;

    overflow: hidden;

    border-radius:
        var(--hero-radius)
        var(--hero-radius)
        0
        0;
}


/* ========================================
   STAPELVOLGORDE
======================================== */

.site-sections > .content-section:nth-child(1) {
    z-index: 1;
}

.site-sections > .content-section:nth-child(2) {
    z-index: 2;
}

.site-sections > .content-section:nth-child(3) {
    z-index: 3;
}

.site-sections > .content-section:nth-child(4) {
    z-index: 4;
}

.site-sections > .content-section:nth-child(5) {
    z-index: 5;
}

.site-sections > .content-section:nth-child(6) {
    z-index: 6;
}

.site-sections > .content-section:nth-child(7) {
    z-index: 7;
}

.site-sections > .content-section:nth-child(8) {
    z-index: 8;
}

.site-sections > .content-section:nth-child(9) {
    z-index: 9;
}

.site-sections > .content-section:nth-child(10) {
    z-index: 10;
}

.site-sections > .content-section:nth-child(11) {
    z-index: 11;
}

.site-sections > .content-section:nth-child(12) {
    z-index: 12;
}

.site-sections > .content-section:nth-child(13) {
    z-index: 13;
}

.site-sections > .content-section:nth-child(14) {
    z-index: 14;
}

.site-sections > .content-section:nth-child(15) {
    z-index: 15;
}

.site-sections > .content-section:nth-child(16) {
    z-index: 16;
}

.site-sections > .content-section:nth-child(17) {
    z-index: 17;
}

.site-sections > .content-section:nth-child(18) {
    z-index: 18;
}
/* ========================================
   CONTENT SECTION — EYEBROW
======================================== */

.content-section .eyebrow {
    margin: 0 0 20px;

    color: var(--section-eyebrow);

    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ========================================
   REVEAL — STREEP ONDER H2
======================================== */

.content-section .reveal-heading {
    position: relative;
    display: inline-block;

    padding-bottom: 0.65rem;
}

.content-section .reveal-heading::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: min(10rem, 70%);
    height: 2px;

    background:
        linear-gradient(
            to right,
            var(--section-accent) 0%,
            var(--section-accent) 60%,
            transparent 100%
        );

    border-radius: 999px;

    transform: scaleX(0);
    transform-origin: left center;

    transition:
        transform 0.9s
        cubic-bezier(.22, 1, .36, 1);
}

.content-section .reveal-heading.is-visible::after {
    transform: scaleX(1);
}


/* ========================================
   REVEAL — WOORD VOOR WOORD
======================================== */

.content-section
.word-reveal.is-prepared .word {
    display: inline-block;

    opacity: 0;
    filter: blur(3px);

    transform: translateY(0.7rem);

    transition:
        opacity 0.55s ease,
        transform 0.55s ease,
        filter 0.55s ease;

    transition-delay:
        calc(var(--word-index) * 55ms);
}

.content-section
.word-reveal.is-visible .word {
    opacity: 1;
    filter: blur(0);

    transform: translateY(0);
}


/* ========================================
   GEANIMEERDE GRADIENT
======================================== */

.content-section.animated-gradient {
    background:
        linear-gradient(
            135deg,
            var(--ice-blue),
            var(--soft-blue),
            var(--storm-blue),
            var(--blue)
        );

    background-size: 300% 300%;

    animation:
        content-palette-gradient
        18s
        ease-in-out
        infinite;
}

@keyframes content-palette-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* ========================================
   MINDER BEWEGING
======================================== */

@media (prefers-reduced-motion: reduce) {

    .content-section .reveal-heading::after {
        transform: scaleX(1);
        transition: none;
    }

    .content-section
    .word-reveal.is-prepared .word {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }

    .content-section.animated-gradient {
        animation: none;
    }
}