/*
 * Replaces the Webflow runtime's behaviour with plain Vue/CSS.
 *
 * The front-end is a Vue SPA, so page content is replaced client-side on every
 * navigation. Webflow's runtime binds to the DOM once per document and its
 * interaction engine (IX3) cannot be re-initialised safely, so the handful of
 * behaviours it provided are reproduced here and in the Vue components.
 *
 * Every value below is taken from the interaction definitions in the original
 * bundles (see reference/live/ix3-config.json):
 *   - .card-diensten  hover -> .card-dientsen-bg-image  scale 1 -> 1.12, 0.4s
 *   - .video-trigger  hover -> .portfolioitem-bg-image  scale 1 -> 1.12, 0.4s
 *   - .play-icon      hover -> .play-icon               scale 1 -> 1.2
 *   - .logoslider-wrap      -> x 0 -> -100%, 50s linear, infinite
 *   - .accordion-header click -> .accordion_content height 0 <-> auto, 0.4s
 */

/* ------------------------------------------------------------- hover scale */
.card-dientsen-bg-image,
.portfolioitem-bg-image,
.play-icon {
    transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: transform;
}

.card-diensten:hover .card-dientsen-bg-image,
.video-trigger:hover .portfolioitem-bg-image {
    transform: scale(1.12);
}

.play-icon:hover {
    transform: scale(1.2);
}

/* ----------------------------------------------------------- logo marquee */
@keyframes nv-logo-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-100%, 0, 0);
    }
}

.section-customers .logoslider-wrap {
    animation: nv-logo-marquee 50s linear infinite;
}

/* --------------------------------------------------------------- dropdown */
.dropdown-navbar .dropdown-list {
    display: none;
}

.dropdown-navbar.is-open .dropdown-list {
    display: block;
}

.dropdown-navbar.is-open .dropdown-toggle {
    color: var(--_variable-collection---green--700);
}

/* -------------------------------------------------------- mobile nav menu */
@media screen and (max-width: 991px) {
    /* The menu is moved out of the header row and pinned under it. Webflow did
       this by relocating the element into an absolutely positioned overlay;
       positioning the menu itself reaches the same result without touching
       Vue's DOM. */
    .nav-menu[data-nav-menu-open] {
        position: absolute;
        top: 100%;
        /* The ported rule uses `inset: 100% 0% 0%`, whose bottom:0 pins the
           panel to the bottom of the fixed navbar and collapses it. */
        bottom: auto;
        left: 0;
        right: 0;
        display: block !important;
        background-color: var(--_variable-collection---white);
        border-radius: 12px;
        /* The ported rule sets height:100%, which resolves against the fixed
           navbar and collapses the panel. Webflow's own version lived in an
           absolutely positioned overlay and ended up one viewport tall, so
           that is reproduced here. */
        height: 100svh;
        max-height: 100svh;
        padding: 4px 8px 0;
        overflow: visible;
    }

    .nav-menu[data-nav-menu-open] .nav-menu-list {
        height: 100%;
        max-height: 85svh;
        overflow: auto;
    }

    /* Keep the page from scrolling behind the open menu. */
    body.is-nav-open {
        overflow: hidden;
    }
}

/* ---------------------------------------------------------------- tabs ---- */
.tabs-portfolio .w-tab-pane {
    display: none;
}

.tabs-portfolio .w-tab-pane.w--tab-active {
    display: block;
}

/* ------------------------------------------------------------ accordion --- */
.accordion_content {
    overflow: hidden;
}

/* Motion is skipped entirely for visitors who ask for less of it. */
@media (prefers-reduced-motion: reduce) {
    .card-dientsen-bg-image,
    .portfolioitem-bg-image,
    .play-icon,
    .accordion_content {
        transition: none;
    }

    .section-customers .logoslider-wrap {
        animation: none;
    }
}