/*
  4Bytes — Effecten
  Alle animaties en interactie-effecten staan apart van style.css, zodat ze
  in één keer aan of uit te zetten zijn (verwijder de <link> in header.php
  en de <script> in footer.php).

  De klasse .fx staat op <html> zodra effects.js geladen is.

  Prestaties: alles wat beweegt gebruikt enkel transform en opacity (dat
  doet de grafische kaart), en de scroll-effecten lopen via CSS zonder
  JavaScript waar de browser dat ondersteunt.
*/

/* --- Vloeiende overgang tussen pagina's (Chrome, Edge, Safari) --- */
@view-transition {
    navigation: auto;
}

header {
    view-transition-name: site-header;
}

::view-transition-old(root) {
    animation: fx-page-out 0.1s ease both;
}

::view-transition-new(root) {
    animation: fx-page-in 0.2s ease both;
}

@keyframes fx-page-out {
    to { opacity: 0; }
}

@keyframes fx-page-in {
    from { opacity: 0; }
}

/* --- Zichtbare toetsenbordfocus --- */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ============================================================
   HEADER — leesvoortgang in de lijn onder het menu
   ============================================================ */
.fx header::after {
    height: 3px;
    opacity: 1;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left center;
}

@supports (animation-timeline: scroll()) {
    .fx header::after {
        transform: scaleX(0);
        animation: fx-progress linear both;
        animation-timeline: scroll(root);
    }
}

@keyframes fx-progress {
    to { transform: scaleX(1); }
}

/* ============================================================
   HERO — bitveld, lichtgloed, intro en diepte bij scrollen
   ============================================================ */
.fx-bitfield {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.section-dark {
    overflow: hidden;
}

/* Gloed die de cursor volgt */
.fx-aurora {
    position: absolute;
    left: -340px;
    top: -340px;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 179, 230, 0.2), rgba(63, 127, 214, 0.09) 42%, transparent 68%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    will-change: transform;
    z-index: 0;
}

.fx-aurora.is-on {
    opacity: 1;
}

/* Intro: snel na elkaar. We animeren `translate` (niet `transform`),
   zodat de bestaande rotaties blijven werken. */
.hero .status-line,
.hero h1,
.hero-copy > p,
.hero .container > p,
.hero-buttons,
.hero-visual,
.hero-photo {
    animation: fx-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero h1 { animation-delay: 0.06s; }
.hero-copy > p,
.hero .container > p { animation-delay: 0.12s; }
.hero-buttons { animation-delay: 0.18s; }
.hero-visual,
.hero-photo { animation-delay: 0.16s; }

@keyframes fx-rise {
    from {
        opacity: 0;
        translate: 0 18px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* De markeerstift wordt "getrokken" onder de accentwoorden */
.hero h1 span {
    animation: fx-marker 0.7s cubic-bezier(0.3, 0.7, 0.2, 1) 0.45s both;
}

.hero .status-line {
    animation:
        fx-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both,
        fx-marker 0.6s cubic-bezier(0.3, 0.7, 0.2, 1) 0.35s both;
}

@keyframes fx-marker {
    from { background-size: 0% 0.4em; }
    to   { background-size: 100% 0.4em; }
}

/* Bij het wegscrollen zakt de hero-inhoud trager weg dan de pagina */
@supports (animation-timeline: view()) {
    .fx .hero {
        view-timeline-name: --fx-hero;
    }

    .fx .hero > .container {
        animation: fx-hero-out linear both;
        animation-timeline: --fx-hero;
        animation-range: exit 0% exit 100%;
    }
}

@keyframes fx-hero-out {
    to {
        opacity: 0.15;
        transform: translateY(90px);
    }
}

/* ============================================================
   BYTE-PANEEL — 4 bytes = 4 letters. Het paneel spelt telkens
   een dienst in binaire code, bit per bit.
   ============================================================ */
.hero-visual {
    width: 350px;
    flex-shrink: 0;
    perspective: 1100px;
}

.byte-panel {
    padding: 24px 22px 18px 24px;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow:
        0 40px 70px -35px rgba(0, 0, 0, 0.85),
        0 0 80px -30px rgba(0, 179, 230, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: rotateY(calc(-11deg + var(--tx, 0) * 1deg)) rotateX(calc(5deg + var(--ty, 0) * 1deg));
    will-change: transform;
}

.byte-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr) 40px;
    gap: 7px;
    align-items: center;
    margin-bottom: 9px;
}

.bit {
    aspect-ratio: 1;
    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.07);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Kleine adempauze tussen de twee helften van een byte */
.bit:nth-child(4) {
    margin-right: 5px;
}

.bit.on {
    background-color: #1fb0ea;
    box-shadow: 0 0 14px rgba(0, 179, 230, 0.6);
}

.bit.flip {
    animation: fx-bit 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes fx-bit {
    from { transform: scale(0.45); }
    to   { transform: scale(1); }
}

.byte-char {
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    text-align: right;
}

.byte-char.flip {
    animation: fx-char 0.4s ease;
}

@keyframes fx-char {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.byte-caption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13.5px;
    color: #8f9ab5;
}

.byte-meaning {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    text-align: right;
}

.byte-meaning.flip {
    animation: fx-char 0.45s ease;
}

.hero-visual .hero-founder {
    position: relative;
    z-index: 1;
    margin: -14px 0 0 -26px;
    max-width: 290px;
}

@media (max-width: 860px) {
    .hero-visual {
        width: 100%;
        max-width: 380px;
    }

    .byte-panel {
        transform: none;
    }

    .hero-visual .hero-founder {
        margin: 16px 0 0 0;
        max-width: 100%;
    }
}

/* ============================================================
   KNOPPEN — lichtveeg en indrukken
   ============================================================ */
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: translateX(-140%) skewX(-18deg);
    pointer-events: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -12px rgba(63, 127, 214, 0.75);
}

.btn-primary:hover::after {
    transform: translateX(340%) skewX(-18deg);
    transition: transform 0.6s ease;
}

.btn-primary:active,
.btn-secondary:active {
    transform: translateY(0) scale(0.97);
}

.btn-secondary {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-secondary:hover {
    transform: translateY(-2px);
}

/* ============================================================
   SCROLL-REVEAL — kort, en per rij na elkaar (vertraging via JS)
   ============================================================ */
.reveal {
    transform: translateY(24px);
    transition:
        opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fx .fx-title {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fx .fx-title.is-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   KAARTEN — lichtvlek die de cursor volgt
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .fx .spec-row:hover,
    .fx .case-card:hover,
    .fx .quote-card:hover,
    .fx .pricing-card:hover,
    .fx .card:hover,
    .fx .calculator-card:hover,
    .fx .faq-item:hover {
        background-image: radial-gradient(
            240px circle at var(--mx, 50%) var(--my, 50%),
            rgba(0, 179, 230, 0.11),
            transparent 70%
        );
    }

    /* Projectkaarten kantelen licht mee met de cursor */
    .fx .case-card:not(.case-card-empty):hover {
        transform: perspective(1000px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
        box-shadow: var(--shadow-lg);
    }
}

/* Citaatteken en avatar reageren op de kaart */
.quote-mark,
.quote-avatar {
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.quote-card:hover .quote-mark {
    transform: translateY(-3px) scale(1.15);
    transform-origin: left center;
}

.quote-card:hover .quote-avatar {
    transform: rotate(-8deg) scale(1.08);
}

/* Cijfers in de statsregel verspringen niet tijdens het optellen */
.stats-line .stat b {
    font-variant-numeric: tabular-nums;
}

/* Tijdlijn: het nummer licht op bij hover */
.timeline-step .number-badge {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.timeline-step:hover .number-badge {
    background: var(--accent);
    color: #ffffff;
}

/* Footerlinks: lijntje dat uitschuift */
.footer-col ul a {
    background-image: linear-gradient(var(--accent-2), var(--accent-2));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 100%;
    transition: background-size 0.3s ease, color 0.25s ease, padding 0.25s ease;
}

.footer-col ul a:hover {
    background-size: 100% 1px;
}

/* ============================================================
   MINDER BEWEGING — respecteert de systeeminstelling
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .reveal,
    .fx .fx-title {
        opacity: 1;
        transform: none;
    }

    .fx header::after {
        transform: scaleX(0);
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}


/* ============================================================
   DIENSTKAARTEN: icoon naast de titel, prijslabel onderaan.
   ============================================================ */
.spec-row.has-icon .spec-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.spec-row.has-icon h3 {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    line-height: 1.3;
}

.spec-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin-top: auto;
    padding-top: 18px;
}

.spec-foot .spec-link {
    margin-top: 0;
}

.spec-price {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent-dark);
    background: var(--accent-soft);
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.spec-group-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
    margin: 40px 0 16px;
}

.section-subtitle + .spec-group-title {
    margin-top: 0;
}

.spec-note {
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--text-light);
}

/* Eén klantquote onder de diensten */
.dienst-quote {
    max-width: 760px;
    margin: 48px auto 0;
    padding-left: 22px;
    border-left: 3px solid var(--accent-2);
}

.dienst-quote blockquote {
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.5;
    color: var(--text-main);
    margin: 0 0 10px;
}

.dienst-quote figcaption {
    font-size: 14px;
    color: var(--text-light);
}

.dienst-quote a {
    color: var(--accent-dark);
    font-weight: 600;
}

/* Eigen invoer onder het byte-paneel */
.byte-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    font-size: 13.5px;
    color: #a9b1c7;
}

.byte-input input {
    width: 104px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
}

.byte-input input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.byte-input input:focus {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
    border-color: transparent;
}

/* Mini-calculator in de hero */
.hero-calc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 26px;
    font-size: 15px;
    color: #a9b1c7;
    animation: fx-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.24s both;
}

.hero-calc-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}

.hero-calc-stepper button {
    width: 34px;
    height: 34px;
    border: 0;
    background: none;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 9px;
}

.hero-calc-stepper button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.hero-calc-stepper button:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 1px;
}

.hero-calc output {
    min-width: 26px;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hero-calc strong {
    font-family: var(--font-display);
    font-size: 21px;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.hero-calc small {
    font-size: 12.5px;
    color: #8f9ab5;
}

/* Gezicht bij de afsluitende oproep */
.cta-person {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    text-align: left;
}

.cta-person img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 12%;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.cta-person span {
    font-size: 14px;
    color: #c2cadb;
    line-height: 1.4;
}

.cta-person b {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    color: #ffffff;
}

/* ============================================================
   REVIEWS op één rij die traag doorschuift. Stopt wanneer je er
   met de muis op staat of ernaartoe tabt. Zonder beweging (of
   zonder JavaScript) is het een rij die je zelf opzij schuift.
   ============================================================ */
.quote-marquee {
    overflow-x: auto;
    padding: 6px 0 14px;
}

.quote-track {
    display: flex;
    gap: 24px;
    width: max-content;
}

.quote-track .quote-card {
    flex: 0 0 360px;
    width: 360px;
}

.quote-marquee.is-ready {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.quote-marquee.is-ready .quote-track {
    animation: fx-marquee var(--marquee-duration, 48s) linear infinite;
}

.quote-marquee.is-ready:hover .quote-track,
.quote-marquee.is-ready:focus-within .quote-track,
.quote-marquee.is-ready:focus .quote-track {
    animation-play-state: paused;
}

@keyframes fx-marquee {
    to { transform: translateX(calc(-50% - 12px)); }
}

@media (max-width: 640px) {
    .quote-track .quote-card {
        flex-basis: min(320px, 82vw);
        width: min(320px, 82vw);
    }
}

/* ============================================================
   GEANIMEERDE ICONEN — dienstkaarten (dienst-kaarten.php) en
   "achter de schermen" (achter-de-schermen.php)
   Elk icoon speelt één keer af wanneer de kaart in beeld komt
   (klasse .speelt, gezet door effects.js) en opnieuw bij hover.
   Zonder die klasse staat het icoon stil in zijn eindtoestand.
   Enkel transform, opacity en stroke-dashoffset: licht voor de browser.
   ============================================================ */
.spec-row h3 svg.achter-svg {
    width: 46px;
    height: 46px;
    overflow: visible;
    stroke: var(--accent-dark);
    transition: stroke 0.25s ease;
}

.spec-row:hover h3 svg.achter-svg {
    stroke: var(--accent-dark);
    transform: none;
}

/* Bij de dienstkaarten staat het icoon los, zonder gekleurd vakje erachter */
.spec-icon.spec-icon-anim,
.spec-row:hover .spec-icon.spec-icon-anim {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    transform: none;
}

.achter-svg * {
    transform-box: view-box;
}

.achter-svg .a-pop {
    transform-box: fill-box;
    transform-origin: center;
}

.achter-svg .a-accent { stroke: var(--accent-2); }
.achter-svg .a-dim { stroke: rgba(31, 76, 143, 0.22); }
.achter-svg .a-vul { fill: var(--accent-dark); stroke: none; }
.achter-svg .a-mid { fill: var(--accent); }
.achter-svg .a-led,
.achter-svg .a-cyaan,
.achter-svg .a-hoofd { fill: var(--accent-2); stroke: none; }
.achter-svg .a-punt { fill: #ffffff; stroke: none; }
.achter-svg .a-balk { stroke: none; fill: rgba(31, 76, 143, 0.16); }
.achter-svg .a-balk-op { fill: var(--accent-2); }
.achter-svg .a-dek { fill: var(--bg-card); }
.achter-svg .a-teken { stroke-dasharray: 1; }
.achter-svg .a-meter { stroke-dasharray: 0.8 1; }
.achter-svg .a-naald { transform: rotate(52deg); transform-origin: 24px 37px; }
.achter-svg .a-draai { transform-origin: 24px 24px; }

/* Dezelfde iconen op een donkere achtergrond */
.section-dark .spec-row h3 svg.achter-svg { stroke: #8fb4ee; }
.section-dark .spec-row:hover h3 svg.achter-svg { stroke: #ffffff; }
.section-dark .achter-svg .a-dim { stroke: rgba(255, 255, 255, 0.2); }
.section-dark .achter-svg .a-vul { fill: #8fb4ee; }
.section-dark .achter-svg .a-punt { fill: #0d1526; }
.section-dark .achter-svg .a-balk { fill: rgba(255, 255, 255, 0.16); }
.section-dark .achter-svg .a-balk-op { fill: var(--accent-2); }
.section-dark .achter-svg .a-dek { fill: #1b243d; }

/* Tot de kaart in beeld komt blijft het icoon onzichtbaar, zodat het niet
   eerst stilstaat en dan verspringt. */
.achter-kaart.wacht .achter-svg {
    opacity: 0;
}

/* Elementen die opploppen, na elkaar */
.achter-kaart.speelt .a-pop { animation: a-plop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.4s backwards; }
.achter-kaart.speelt .a-p1 { animation-delay: 0.1s; }
.achter-kaart.speelt .a-p2 { animation-delay: 0.25s; }
.achter-kaart.speelt .a-p3 { animation-delay: 0.4s; }
.achter-kaart.speelt .a-p4 { animation-delay: 0.6s; }
.achter-kaart.speelt .a-p5 { animation-delay: 0.95s; }

/* Aanpassen: het potlood komt aangeschoven en trekt een lijn */
.achter-kaart.speelt .a-pen { animation: a-pen 0.6s cubic-bezier(0.3, 1.3, 0.5, 1) 0.1s backwards; }

/* Automatisering: de pijlen draaien één keer rond */
.achter-kaart.speelt .a-draai { animation: a-draai 1s cubic-bezier(0.3, 0.9, 0.3, 1) 0.1s backwards; }

.achter-kaart.speelt .achter-svg { animation: a-in 0.3s ease both; }

/* Tekenen van lijnen */
.achter-kaart.speelt .a-teken { animation: a-teken 0.7s cubic-bezier(0.3, 0.7, 0.2, 1) backwards; }
.achter-kaart.speelt .a-t1 { animation-delay: 0.45s; animation-duration: 0.45s; }
.achter-kaart.speelt .a-t2 { animation-delay: 0.75s; animation-duration: 0.45s; }

/* Snelheid: de meter loopt vol en de naald slaat uit */
.achter-kaart.speelt .a-meter { animation: a-meter 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) 0.15s backwards; }
.achter-kaart.speelt .a-naald { animation: a-naald 1.1s cubic-bezier(0.3, 1.5, 0.5, 1) 0.15s backwards; }

/* SEO: het blauwe resultaat klimt naar de eerste plaats */
.achter-kaart.speelt .a-balk-op,
.achter-kaart.speelt .a-punt { animation: a-klim 0.8s cubic-bezier(0.5, 0, 0.2, 1) 0.35s backwards; }
.achter-kaart.speelt .a-balk-neer { animation: a-zak 0.8s cubic-bezier(0.5, 0, 0.2, 1) 0.35s backwards; }

/* GEO: de assistent schrijft een antwoord, met een sterretje erbij */
.achter-kaart.speelt .a-ster { animation: a-plop 0.5s cubic-bezier(0.3, 1.8, 0.5, 1) 1.15s backwards; transform-origin: 39px 5px; }

/* Elk scherm: de gsm schuift voor de computer */
.achter-kaart.speelt .a-gsm { animation: a-plop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.4s backwards; transform-origin: 45px 44px; }

/* Toegankelijkheid: het hoofd verschijnt voor het lijf getekend wordt */
.achter-kaart.speelt .a-hoofd { animation: a-plop 0.4s cubic-bezier(0.3, 1.8, 0.5, 1) 0.35s backwards; transform-origin: 24px 13.5px; }

/* Code: de haken schuiven open, de schuine streep komt ertussen */
.achter-kaart.speelt .a-haak-l { animation: a-haak-l 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 0.1s backwards; }
.achter-kaart.speelt .a-haak-r { animation: a-haak-r 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 0.1s backwards; }

/* Hosting: de servers schuiven op elkaar en de lampjes knipperen aan */
.achter-kaart.speelt .a-rek-1 { animation: a-rek 0.5s ease 0.1s backwards; }
.achter-kaart.speelt .a-rek-2 { animation: a-rek 0.5s ease 0.3s backwards; }
.achter-kaart.speelt .a-led { animation: a-led 1.1s steps(1, end) 0.7s backwards; }
.achter-kaart.speelt .a-led-2 { animation-delay: 0.9s; }

@keyframes a-in { from { opacity: 0; } }
@keyframes a-pen { from { transform: translate(-9px, 9px); opacity: 0; } }
@keyframes a-draai { from { transform: rotate(-270deg); opacity: 0; } }
@keyframes a-teken { from { stroke-dashoffset: 1; } }
@keyframes a-meter { from { stroke-dashoffset: 0.8; } }
@keyframes a-naald { from { transform: rotate(-80deg); } }
@keyframes a-klim { from { transform: translateY(24px); } }
@keyframes a-zak { from { transform: translateY(-12px); } }
@keyframes a-plop { from { transform: scale(0); opacity: 0; } }
@keyframes a-haak-l { from { transform: translateX(9px); opacity: 0; } }
@keyframes a-haak-r { from { transform: translateX(-9px); opacity: 0; } }
@keyframes a-rek { from { transform: translateY(8px); opacity: 0; } }
@keyframes a-led {
    0%, 40%, 80% { opacity: 0.15; }
    20%, 60%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .achter-kaart .achter-svg,
    .achter-kaart .achter-svg * {
        animation: none !important;
        opacity: 1;
    }
}

/* ============================================================
   LOGO — de drie blokjes vallen op hun plaats
   Het logo bestaat uit twee lagen: logo-header-basis.webp (zonder blokjes)
   en logo-header-blokjes.webp (enkel de blokjes, drie keer getoond en
   telkens tot één blokje bijgesneden). Speelt één keer per bezoek en bij
   een herlaad (klasse .logo-intro, gezet in header.php) en bij hover.
   ============================================================ */
.logo-stapel {
    position: relative;
    display: block;
    line-height: 0;
}

.logo-blokjes {
    position: absolute;
    left: 28.745%;
    top: 53.497%;
    width: 9.988%;
    height: 44.755%;
}

.logo .logo-blokjes img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: none;
}

.logo-blokjes img:nth-child(1) { clip-path: inset(0 40.5% 62.5% 0); --van: translate(-2px, -16px); }
.logo-blokjes img:nth-child(2) { clip-path: inset(39.5% 0 35% 59.5%); --van: translate(16px, -2px); }
.logo-blokjes img:nth-child(3) { clip-path: inset(65% 40.5% 0 0); --van: translate(-2px, 16px); }

.logo-intro .logo-blokjes img {
    animation: logo-blokje 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
}

/* Hover gebruikt een eigen animatienaam: anders herstart de browser de
   animatie niet op de pagina waar de intro al gespeeld heeft. */
.logo:hover .logo-blokjes img {
    animation: logo-blokje-hover 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
}

.logo-intro .logo-blokjes img:nth-child(1) { animation-delay: 0.35s; }
.logo-intro .logo-blokjes img:nth-child(2) { animation-delay: 0.5s; }
.logo-intro .logo-blokjes img:nth-child(3) { animation-delay: 0.65s; }
.logo:hover .logo-blokjes img:nth-child(1) { animation-delay: 0s; }
.logo:hover .logo-blokjes img:nth-child(2) { animation-delay: 0.1s; }
.logo:hover .logo-blokjes img:nth-child(3) { animation-delay: 0.2s; }

@keyframes logo-blokje {
    from { transform: var(--van); opacity: 0; }
}

@keyframes logo-blokje-hover {
    from { transform: var(--van); opacity: 0; }
}

/* ============================================================
   TIJDLIJN "Zo werken we samen" — de lijn tekent zich bij het scrollen
   --tijdlijn (0 tot 1) en de klasse .bereikt worden gezet door effects.js.
   ============================================================ */
.timeline.tijdlijn-actief::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--accent) 0%, var(--accent-2) 100%);
    transform: scaleY(var(--tijdlijn, 0));
    transform-origin: top;
    will-change: transform;
}

.timeline-step .number-badge {
    z-index: 1;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.3s ease;
}

.timeline-step.bereikt .number-badge {
    background: var(--accent);
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(63, 127, 214, 0.14);
}

@media (max-width: 640px) {
    .timeline.tijdlijn-actief::after {
        left: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-blokjes img {
        animation: none !important;
    }
}


/* ============================================================
   PROJECTEN — de kaart scrolt door een lange opname van de website
   De opname (images/opname-<id>) wordt pas geladen bij de eerste hover.
   Afstand en duur worden gezet door effects.js.
   ============================================================ */
.case-image.has-opname img.case-scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: fill;
    opacity: 0;
    transform: translateY(0);
    will-change: transform;
}

/* De donkere waas bedekt anders de helft van de opname */
.case-image.has-opname .case-overlay {
    background: linear-gradient(180deg, rgba(13, 21, 38, 0) 68%, rgba(13, 21, 38, 0.6) 100%);
    z-index: 2;
}