/*
 * gm-blokken.css - gedeelde basis voor alle blocks.
 *
 * Core laadt dit bestand zelf (Integrations\Assets, wp_enqueue_scripts
 * prioriteit 5), dus elke site heeft het en niemand kopieert het meer naar zijn
 * child theme. Het is de basislaag: de stylesheet van core en die van het child
 * theme laden erna en winnen dus.
 *
 * Bewust plain CSS (geen @apply): het werkt in elke build, ongeacht de Tailwind-
 * configuratie van de klant.
 *
 * Inhoud:
 *   1. Sectie-achtergronden (wit / grijs / donker) en ruimte (normaal / compact)
 *   2. Kaarten op een donkere sectie
 *   3. Foto-placeholder voor voertuigen zonder beeld
 *   4. Scroll-reveal animaties (+ stagger), count-up, marquee, parallax
 *   5. Scroll-strips (horizontale sliders met scroll-snap)
 */

/* ---------------------------------------------------------------------------
 * 1. Secties
 * ------------------------------------------------------------------------- */

:root {
    /* Lichte kleuren bewaren zodat een kaart op een donkere sectie ze terug kan zetten */
    --gm-licht-body-active: var(--color-body-active);
    --gm-licht-body: var(--color-body);
    --gm-licht-body-secondary: var(--color-body-secondary);
    --gm-licht-border-primary: var(--color-border-primary);
    --gm-licht-bg-secondary: var(--color-bg-secondary);

    --gm-reveal-afstand: 18px;
    --gm-reveal-duur: 650ms;
    --gm-reveal-stap: 90ms;
}

.gm-sectie--grijs {
    background: var(--color-bg-secondary);
    margin-top: var(--sectionPadding);
    padding-bottom: var(--sectionPadding);
}

.gm-sectie--donker {
    background: var(--color-body-active);
    color: #fff;
    margin-top: var(--sectionPadding);
    padding-bottom: var(--sectionPadding);

    /* Alles wat de design-tokens gebruikt wordt automatisch licht */
    --color-body-active: #ffffff;
    --color-body: rgba(255, 255, 255, 0.78);
    --color-body-secondary: rgba(255, 255, 255, 0.55);
    --color-border-primary: rgba(255, 255, 255, 0.16);
    --color-bg-secondary: rgba(255, 255, 255, 0.06);
}

/* Twee gekleurde secties direct na elkaar: geen dubbele marge */
.gm-sectie--grijs + .gm-sectie--grijs,
.gm-sectie--donker + .gm-sectie--donker,
.gm-sectie--grijs + .gm-sectie--donker,
.gm-sectie--donker + .gm-sectie--grijs {
    margin-top: 0;
}

.gm-sectie--compact {
    padding-top: calc(var(--sectionPadding) / 2);
}

.gm-sectie--compact.gm-sectie--grijs,
.gm-sectie--compact.gm-sectie--donker {
    padding-bottom: calc(var(--sectionPadding) / 2);
}

/* ---------------------------------------------------------------------------
 * 2. Kaarten
 * ------------------------------------------------------------------------- */

.gm-kaart {
    background: #fff;
}

.gm-sectie--donker .gm-kaart {
    --color-body-active: var(--gm-licht-body-active);
    --color-body: var(--gm-licht-body);
    --color-body-secondary: var(--gm-licht-body-secondary);
    --color-border-primary: var(--gm-licht-border-primary);
    --color-bg-secondary: var(--gm-licht-bg-secondary);
    color: var(--gm-licht-body);
}

/* Een donkere kaart (bv. cijfers op wit) gebruikt dezelfde truc andersom */
.gm-kaart--donker {
    background: var(--color-body-active);
    color: #fff;
    --color-body-active: #ffffff;
    --color-body: rgba(255, 255, 255, 0.78);
    --color-body-secondary: rgba(255, 255, 255, 0.55);
    --color-border-primary: rgba(255, 255, 255, 0.16);
    --color-bg-secondary: rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------------------------
 * 3. Foto-placeholder
 * ------------------------------------------------------------------------- */

.gm-foto-placeholder {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-align: center;
    background-color: var(--color-bg-secondary);
    background-image: repeating-linear-gradient(
            135deg,
            var(--color-border-primary) 0,
            var(--color-border-primary) 1px,
            transparent 1px,
            transparent 14px
    );
}

.gm-foto-placeholder__merk {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-body-active);
}

.gm-foto-placeholder__tekst {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-body-secondary);
}

/* ---------------------------------------------------------------------------
 * 4. Scroll-reveal
 *
 * Gebruik:
 *   <section data-gm-reveal>                 sectie schuift zacht omhoog in beeld
 *   <div data-gm-reveal="links|rechts|zoom|fade">   variant
 *   <div class="grid" data-gm-stagger>       kinderen komen één voor één (90 ms) in beeld
 *   <span data-gm-tellen>1.250</span>        telt op van 0 naar de waarde
 *   <div data-gm-marquee>                    kinderen schuiven oneindig door (logo-strip)
 *   <div data-gm-parallax="0.15">            achtergrond beweegt langzamer dan de pagina
 *
 * gm-blokken.js zet <html class="gm-js">; zonder JS blijft alles gewoon zichtbaar.
 * Bij prefers-reduced-motion worden alle bewegingen uitgezet.
 * ------------------------------------------------------------------------- */

.gm-js [data-gm-reveal],
.gm-js [data-gm-stagger] > * {
    opacity: 0;
    transform: translateY(var(--gm-reveal-afstand));
    transition: opacity var(--gm-reveal-duur) cubic-bezier(0.22, 1, 0.36, 1),
                transform var(--gm-reveal-duur) cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--gm-i, 0) * var(--gm-reveal-stap));
    will-change: opacity, transform;
}

.gm-js [data-gm-reveal="links"] {
    transform: translateX(calc(var(--gm-reveal-afstand) * -1.5));
}

.gm-js [data-gm-reveal="rechts"] {
    transform: translateX(calc(var(--gm-reveal-afstand) * 1.5));
}

.gm-js [data-gm-reveal="zoom"] {
    transform: scale(0.96);
}

.gm-js [data-gm-reveal="fade"] {
    transform: none;
}

.gm-js [data-gm-reveal].is-zichtbaar,
.gm-js [data-gm-stagger].is-zichtbaar > * {
    opacity: 1;
    transform: none;
}

/* Een sectie met reveal én een stagger-grid erin: de sectie zelf niet ook nog eens laten schuiven */
.gm-js [data-gm-reveal="geen"] {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Parallax-laag */
[data-gm-parallax] {
    will-change: transform;
}

/* Marquee */
[data-gm-marquee] {
    display: flex;
    gap: var(--gm-marquee-gap, 3rem);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

[data-gm-marquee] > * {
    flex-shrink: 0;
}

.gm-js [data-gm-marquee].is-actief > * {
    animation: gm-marquee var(--gm-marquee-duur, 30s) linear infinite;
}

[data-gm-marquee]:hover > * {
    animation-play-state: paused;
}

@keyframes gm-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - var(--gm-marquee-gap, 3rem))); }
}

/* Zachte hover voor kaarten en tegels */
.gm-hover-lift {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, box-shadow 220ms ease;
}

.gm-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -18px rgba(10, 20, 40, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .gm-js [data-gm-reveal],
    .gm-js [data-gm-stagger] > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .gm-js [data-gm-marquee].is-actief > * {
        animation: none;
    }

    [data-gm-parallax] {
        transform: none !important;
    }

    .gm-hover-lift,
    .gm-hover-lift:hover {
        transition: none;
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
 * 5. Scroll-strips
 *
 *   <div data-gm-strip>
 *     <button data-gm-strip-prev>…</button> <button data-gm-strip-next>…</button>
 *     <div data-gm-strip-track class="flex gap-6 overflow-x-auto snap-x snap-mandatory">…</div>
 *   </div>
 * ------------------------------------------------------------------------- */

[data-gm-strip-track] {
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

[data-gm-strip-track]::-webkit-scrollbar {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-gm-strip-track] {
        scroll-behavior: auto;
    }
}