/* ======================================================================
   HARTVAST HOME · BANNER 2 · SMOOTH CENTERED REVEAL · 2026-08-22

   Doel:
   - banner 2 op desktop visueel in het midden houden;
   - de eerdere zware 3D/clip-path/blur animaties volledig uitschakelen;
   - uitsluitend compositor-vriendelijke transform + opacity gebruiken;
   - de drie routes rustig links/rechts/links laten binnenkomen;
   - bestaande content, links, foto's en responsive indeling behouden.
   ====================================================================== */

.page-home #home-audience.audience-smooth-v4 {
    --audience-smooth-ease: cubic-bezier(.22, 1, .36, 1);
    --audience-smooth-duration: 760ms;
    --audience-smooth-step: 115ms;
    isolation: isolate;
}

/* De algemene homepage-CSS positioneerde banner 2 op desktop vanaf boven.
   Hier wordt alleen banner 2 terug naar het visuele midden gebracht. */
@media (min-width: 841px) {
    .page-home #home-audience.audience-smooth-v4 > [data-home-banner-content] {
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) scale(var(--home-content-scale)) !important;
        transform-origin: center center !important;
    }
}

/* Schakel zowel de oudere pages.css-sequence als de voormalige kinetic
   keyframes uit. Dit voorkomt dat twee animaties tegelijk om dezelfde
   transform/filter/clip-path vechten. */
.page-home #home-audience.audience-smooth-v4 .section-heading,
.page-home #home-audience.audience-smooth-v4 .audience-card,
.page-home #home-audience.audience-smooth-v4 .audience-card::before,
.page-home #home-audience.audience-smooth-v4 .audience-card::after,
.page-home #home-audience.audience-smooth-v4 .audience-card__accent,
.page-home #home-audience.audience-smooth-v4 .audience-card__glow,
.page-home #home-audience.audience-smooth-v4 .audience-card__number,
.page-home #home-audience.audience-smooth-v4 .audience-card h3,
.page-home #home-audience.audience-smooth-v4 .audience-card p,
.page-home #home-audience.audience-smooth-v4 .card-arrow,
.page-home #home-audience.audience-smooth-v4::before,
.page-home #home-audience.audience-smooth-v4::after {
    animation: none !important;
}

.page-home #home-audience.audience-smooth-v4 .section-heading,
.page-home #home-audience.audience-smooth-v4 .audience-card,
.page-home #home-audience.audience-smooth-v4 .audience-card::before,
.page-home #home-audience.audience-smooth-v4 .audience-card__accent,
.page-home #home-audience.audience-smooth-v4 .audience-card__number,
.page-home #home-audience.audience-smooth-v4 .audience-card h3,
.page-home #home-audience.audience-smooth-v4 .audience-card p,
.page-home #home-audience.audience-smooth-v4 .card-arrow {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------
   KAARTEN — links / rechts / links, maar met kleine reisafstand.
   Geen blur, perspective of clip-path: daardoor blijft de beweging stabiel.
   -------------------------------------------------------------- */
.page-home #home-audience.audience-smooth-v4 .audience-card {
    --audience-enter-x: -46px;
    --audience-enter-delay: 0ms;
    transform-origin: center center;
    transition:
        transform var(--audience-smooth-duration) var(--audience-smooth-ease) var(--audience-enter-delay),
        opacity 500ms ease-out var(--audience-enter-delay),
        border-color 220ms ease,
        box-shadow 220ms ease;
    will-change: transform, opacity;
}

.page-home #home-audience.audience-smooth-v4 .audience-card--1 {
    --audience-enter-x: -46px;
    --audience-enter-delay: 0ms;
}

.page-home #home-audience.audience-smooth-v4 .audience-card--2 {
    --audience-enter-x: 46px;
    --audience-enter-delay: var(--audience-smooth-step);
}

.page-home #home-audience.audience-smooth-v4 .audience-card--3 {
    --audience-enter-x: -46px;
    --audience-enter-delay: calc(var(--audience-smooth-step) * 2);
}

.page-home #home-audience.audience-smooth-v4.has-card-motion:not(.is-active) .audience-card {
    opacity: 0;
    transform: translate3d(var(--audience-enter-x), 10px, 0) scale(.988);
    filter: none !important;
    clip-path: none !important;
}

.page-home #home-audience.audience-smooth-v4.is-active .audience-card {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none !important;
    clip-path: none !important;
}

.page-home #home-audience.audience-smooth-v4.is-active .audience-card:hover {
    transform: translate3d(0, -4px, 0) scale(1);
}

/* De foto maakt alleen een zachte settle-beweging; geen filteranimatie. */
.page-home #home-audience.audience-smooth-v4 .audience-card::before {
    transition: transform 900ms var(--audience-smooth-ease);
    will-change: transform;
}

.page-home #home-audience.audience-smooth-v4.has-card-motion:not(.is-active) .audience-card::before {
    transform: scale(1.055) translate3d(0, 0, 0);
    filter: none !important;
}

.page-home #home-audience.audience-smooth-v4.is-active .audience-card::before {
    transform: scale(1.02) translate3d(0, 0, 0);
    filter: none !important;
}

.page-home #home-audience.audience-smooth-v4.is-active .audience-card:hover::before {
    transform: scale(1.045) translate3d(0, 0, 0);
}

/* --------------------------------------------------------------
   INHOUD — blijft als één stabiele laag aan de kaart gekoppeld.
   Kleine verticale resolve geeft finesse zonder afzonderlijke zware effecten.
   -------------------------------------------------------------- */
.page-home #home-audience.audience-smooth-v4 .audience-card__number,
.page-home #home-audience.audience-smooth-v4 .audience-card h3,
.page-home #home-audience.audience-smooth-v4 .audience-card p,
.page-home #home-audience.audience-smooth-v4 .card-arrow {
    transition:
        transform 560ms var(--audience-smooth-ease),
        opacity 420ms ease-out;
}

.page-home #home-audience.audience-smooth-v4.has-card-motion:not(.is-active) .audience-card__number,
.page-home #home-audience.audience-smooth-v4.has-card-motion:not(.is-active) .audience-card h3,
.page-home #home-audience.audience-smooth-v4.has-card-motion:not(.is-active) .audience-card p,
.page-home #home-audience.audience-smooth-v4.has-card-motion:not(.is-active) .card-arrow {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    filter: none !important;
}

.page-home #home-audience.audience-smooth-v4.is-active .audience-card__number,
.page-home #home-audience.audience-smooth-v4.is-active .audience-card h3,
.page-home #home-audience.audience-smooth-v4.is-active .audience-card p,
.page-home #home-audience.audience-smooth-v4.is-active .card-arrow {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none !important;
}

/* Inhoud begint pas als de eigen kaart al duidelijk onderweg is. */
.page-home #home-audience.audience-smooth-v4 .audience-card--1 .audience-card__number,
.page-home #home-audience.audience-smooth-v4 .audience-card--1 h3,
.page-home #home-audience.audience-smooth-v4 .audience-card--1 p,
.page-home #home-audience.audience-smooth-v4 .audience-card--1 .card-arrow {
    transition-delay: 170ms;
}

.page-home #home-audience.audience-smooth-v4 .audience-card--2 .audience-card__number,
.page-home #home-audience.audience-smooth-v4 .audience-card--2 h3,
.page-home #home-audience.audience-smooth-v4 .audience-card--2 p,
.page-home #home-audience.audience-smooth-v4 .audience-card--2 .card-arrow {
    transition-delay: 285ms;
}

.page-home #home-audience.audience-smooth-v4 .audience-card--3 .audience-card__number,
.page-home #home-audience.audience-smooth-v4 .audience-card--3 h3,
.page-home #home-audience.audience-smooth-v4 .audience-card--3 p,
.page-home #home-audience.audience-smooth-v4 .audience-card--3 .card-arrow {
    transition-delay: 400ms;
}

/* Accentlijn wordt rustig uitgetekend. De brede glow-sweep is uitgeschakeld;
   die gaf op sommige GPU's extra compositing-pieken tijdens scroll-snap. */
.page-home #home-audience.audience-smooth-v4 .audience-card__accent {
    opacity: .94;
    transform-origin: left center;
    transition:
        transform 620ms var(--audience-smooth-ease),
        opacity 360ms ease-out;
}

[dir="rtl"] .page-home #home-audience.audience-smooth-v4 .audience-card__accent {
    transform-origin: right center;
}

.page-home #home-audience.audience-smooth-v4.has-card-motion:not(.is-active) .audience-card__accent {
    opacity: 0;
    transform: scaleX(.08);
}

.page-home #home-audience.audience-smooth-v4.is-active .audience-card__accent {
    opacity: .94;
    transform: scaleX(1);
}

.page-home #home-audience.audience-smooth-v4 .audience-card--1 .audience-card__accent {
    transition-delay: 150ms;
}
.page-home #home-audience.audience-smooth-v4 .audience-card--2 .audience-card__accent {
    transition-delay: 265ms;
}
.page-home #home-audience.audience-smooth-v4 .audience-card--3 .audience-card__accent {
    transition-delay: 380ms;
}

.page-home #home-audience.audience-smooth-v4 .audience-card__glow {
    display: none !important;
}

/* --------------------------------------------------------------
   LINKER INFOBOX — volgt als laatste en blijft exact op zijn eindpositie.
   -------------------------------------------------------------- */
.page-home #home-audience.audience-smooth-v4 .section-heading {
    transition:
        transform 700ms var(--audience-smooth-ease) 455ms,
        opacity 480ms ease-out 455ms;
    will-change: transform, opacity;
}

.page-home #home-audience.audience-smooth-v4.has-card-motion:not(.is-active) .section-heading {
    opacity: 0;
    transform: translate3d(-28px, 0, 0);
    filter: none !important;
    clip-path: none !important;
}

.page-home #home-audience.audience-smooth-v4.is-active .section-heading {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none !important;
    clip-path: none !important;
}

[dir="rtl"] .page-home #home-audience.audience-smooth-v4.has-card-motion:not(.is-active) .section-heading {
    transform: translate3d(28px, 0, 0);
}

/* Achtergronddecoratie blijft statisch tijdens de reveal. Hiermee wordt de
   beschikbare GPU-tijd volledig aan de kaarten gegeven. */
.page-home #home-audience.audience-smooth-v4::before,
.page-home #home-audience.audience-smooth-v4::after {
    transform: none !important;
}

/* Op kleinere schermen is een kortere reisafstand prettiger en voorkomt deze
   dat de kaart dicht langs de viewportrand hoeft te compositen. */
@media (max-width: 840px) {
    .page-home #home-audience.audience-smooth-v4 {
        --audience-smooth-duration: 650ms;
        --audience-smooth-step: 90ms;
    }

    .page-home #home-audience.audience-smooth-v4 .audience-card--1,
    .page-home #home-audience.audience-smooth-v4 .audience-card--3 {
        --audience-enter-x: -24px;
    }

    .page-home #home-audience.audience-smooth-v4 .audience-card--2 {
        --audience-enter-x: 24px;
    }

    .page-home #home-audience.audience-smooth-v4 .section-heading {
        transition-delay: 360ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-home #home-audience.audience-smooth-v4 .section-heading,
    .page-home #home-audience.audience-smooth-v4 .audience-card,
    .page-home #home-audience.audience-smooth-v4 .audience-card::before,
    .page-home #home-audience.audience-smooth-v4 .audience-card__accent,
    .page-home #home-audience.audience-smooth-v4 .audience-card__number,
    .page-home #home-audience.audience-smooth-v4 .audience-card h3,
    .page-home #home-audience.audience-smooth-v4 .audience-card p,
    .page-home #home-audience.audience-smooth-v4 .card-arrow {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        filter: none !important;
        clip-path: none !important;
    }

    .page-home #home-audience.audience-smooth-v4 .section-heading,
    .page-home #home-audience.audience-smooth-v4 .audience-card,
    .page-home #home-audience.audience-smooth-v4 .audience-card__number,
    .page-home #home-audience.audience-smooth-v4 .audience-card h3,
    .page-home #home-audience.audience-smooth-v4 .audience-card p,
    .page-home #home-audience.audience-smooth-v4 .card-arrow {
        transform: none !important;
    }

    .page-home #home-audience.audience-smooth-v4 .audience-card::before {
        transform: scale(1.02) !important;
    }

    .page-home #home-audience.audience-smooth-v4 .audience-card__accent {
        transform: scaleX(1) !important;
    }
}