/* ==========================================================================
   jdb-luxe-motion.css: luxe-ronde okt 2026 (laadt na jdb-luxe-media.css)
   Eén motion-taal voor alle jdb-/jdbp-widgets.

   - Tokens hieronder; alle reveals, beeldovergangen en hovers gebruiken ze.
   - Verborgen beginstanden staan alleen onder html.jdb-anim (gezet door
     jdb-home.js bij JS én zonder reduced motion). Beeld-reveals (clip-path,
     schaal) staan daarnaast onder html.jdb-motion (gezet door jdb-motion.js),
     zodat de screenshot-modus (?jdbshot) en een falende motion-JS nooit
     half-geknipte beelden achterlaten.
   - Alleen transform/opacity/clip-path (en `translate`) worden geanimeerd.
   - Elk hover-effect heeft een :focus-visible/:focus-within-tegenhanger;
     hover-zoom alleen op apparaten met een echte muis.
   - Stagger-vertragingen zet jdb-motion.js per zichtbaarheidsbatch.
   ========================================================================== */

/* Alleen custom properties: geen effect op niet-jdb-onderdelen. */
:root {
    --jdb-m-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --jdb-m-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --jdb-m-dur-ui: 240ms;      /* hover, focus, kleine statuswissels */
    --jdb-m-dur: 700ms;         /* tekst- en kaart-reveals */
    --jdb-m-dur-media: 1000ms;  /* beeld-reveals en hover-zoom */
    --jdb-m-dist: 18px;         /* reveal-afstand */
    --jdb-m-lift: -3px;         /* kaart-lift bij hover/focus */
    --jdb-m-zoom: 1.035;        /* hover-zoom kaartbeelden (max 1.04) */
    --jdb-m-media-from: 1.06;   /* beginschaal beeld bij reveal */
    --jdb-m-clip-from: inset(6% 5% 6% 5%);
    --jdb-m-clip-to: inset(-4rem -4rem -4rem -4rem); /* ruim: schaduwen blijven zichtbaar */
}

/* --------------------------------------------------------------------------
   1. Reveals: één consistente overgang voor alle [data-jdb-reveal]
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .jdb-anim [data-jdb-reveal] {
        opacity: 0;
        transform: translate3d(0, var(--jdb-m-dist), 0);
        transition:
            opacity var(--jdb-m-dur) var(--jdb-m-ease-out),
            transform var(--jdb-m-dur) var(--jdb-m-ease-out),
            translate var(--jdb-m-dur-ui) var(--jdb-m-ease-out),
            box-shadow var(--jdb-m-dur-ui) ease,
            border-color var(--jdb-m-dur-ui) ease,
            background-color var(--jdb-m-dur-ui) ease;
    }

    .jdb-anim [data-jdb-reveal].jdb-revealed {
        opacity: 1;
        transform: none;
    }

    /* Grote beeldvlakken: geen verschuiving maar een rustige clip-reveal. */
    .jdb-anim.jdb-motion :is(
        .jdb-psplit__media,
        .jdb-psteps__media,
        .jdb-pquote__media,
        .jdb-pstyles__media,
        .jdb-why__img-main,
        .jdb-about__intro-media
    )[data-jdb-reveal] {
        transform: none;
        clip-path: var(--jdb-m-clip-from);
        transition:
            opacity var(--jdb-m-dur) var(--jdb-m-ease-out),
            clip-path var(--jdb-m-dur-media) var(--jdb-m-ease-out);
    }

    .jdb-anim.jdb-motion :is(
        .jdb-psplit__media,
        .jdb-psteps__media,
        .jdb-pquote__media,
        .jdb-pstyles__media,
        .jdb-why__img-main,
        .jdb-about__intro-media
    )[data-jdb-reveal].jdb-revealed {
        clip-path: var(--jdb-m-clip-to);
    }

    /* Het beeld zelf zakt van een lichte vergroting naar 1. */
    .jdb-anim.jdb-motion [data-jdb-reveal]:not(.jdb-revealed) :is(
        .jdb-psplit__img,
        .jdb-psteps__img,
        .jdb-pquote__img,
        .jdb-pstyles__img,
        .jdb-pgal__img,
        .jdb-pteam__img,
        .jdb-why__img,
        .jdb-about__team-img,
        .jdb-inspiration__img,
        .jdb-style-card__img
    ) {
        transform: scale(var(--jdb-m-media-from));
    }

    /* FAQ: antwoord komt zacht binnen bij openklappen. */
    .jdb-anim .jdb-faq__item[open] .jdb-faq__answer {
        animation: jdb-m-fade-up 420ms var(--jdb-m-ease-out) both;
    }
}

@keyframes jdb-m-fade-up {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to { opacity: 1; transform: none; }
}

/* Eén tijdlijn voor alle kaartbeelden: reveal-schaal en hover-zoom. */
:is(
    .jdb-psplit__img,
    .jdb-psteps__img,
    .jdb-pquote__img,
    .jdb-pstyles__img,
    .jdb-pgal__img,
    .jdb-pteam__img,
    .jdb-why__img,
    .jdb-about__team-img,
    .jdb-inspiration__img
) {
    transition: transform var(--jdb-m-dur-media) var(--jdb-m-ease-out);
}

/* --------------------------------------------------------------------------
   2. Hover-zoom op kaartbeelden (max 1.04, alleen met muis)
   Selectors volgen de originele regels, zodat de specificiteit gelijk is.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .jdb-psplit__media:hover .jdb-psplit__img,
    .jdb-pgal__item:hover .jdb-pgal__img,
    .jdb-pteam__card:hover .jdb-pteam__img,
    .jdb-pstyles__media:hover .jdb-pstyles__img,
    .jdb-inspiration__item:hover .jdb-inspiration__img,
    .jdb-guarantees__swatch:hover img.jdb-guarantees__swatch-img,
    .jdb-stylestrip__link:hover .jdb-stylestrip__img,
    .jdb-style-card:hover .jdb-style-card img.jdb-style-card__img {
        transform: scale(var(--jdb-m-zoom));
    }
}

/* Touch: geen "plakkende" hover-zoom na een tik. */
@media (hover: none), (pointer: coarse) {
    .jdb-psplit__media:hover .jdb-psplit__img,
    .jdb-pgal__item:hover .jdb-pgal__img,
    .jdb-pteam__card:hover .jdb-pteam__img,
    .jdb-pstyles__media:hover .jdb-pstyles__img,
    .jdb-inspiration__item:hover .jdb-inspiration__img,
    .jdb-guarantees__swatch:hover img.jdb-guarantees__swatch-img,
    .jdb-stylestrip__link:hover .jdb-stylestrip__img,
    .jdb-style-card:hover .jdb-style-card img.jdb-style-card__img {
        transform: none;
    }
}

/* Toetsenbord: dezelfde zoom op kaarten die een link bevatten. */
.jdb-style-card:focus-visible .jdb-style-card img.jdb-style-card__img,
.jdb-stylestrip__link:focus-visible .jdb-stylestrip__img {
    transform: scale(var(--jdb-m-zoom));
}

/* --------------------------------------------------------------------------
   3. Kaarten: lift via `translate`, zodat hij niet botst met de
   reveal-transform. Hover (muis) en focus-within (toetsenbord/tik) gelijk.
   -------------------------------------------------------------------------- */

.jdb-pfeat__card:hover,
.jdb-guarantees__card:hover {
    transform: none; /* oude transform-lift vervangen door translate hieronder */
}

.jdb-pfeat__card,
.jdb-guarantees__card,
.jdb-pwall__card,
.jdb-review-card {
    transition:
        translate var(--jdb-m-dur-ui) var(--jdb-m-ease-out),
        box-shadow var(--jdb-m-dur-ui) ease,
        border-color var(--jdb-m-dur-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
    .jdb-pfeat__card:hover,
    .jdb-guarantees__card:hover,
    .jdb-pwall__card:hover {
        translate: 0 var(--jdb-m-lift);
    }
}

.jdb-pfeat__card:focus-within,
.jdb-guarantees__card:focus-within,
.jdb-pwall__card:focus-within {
    translate: 0 var(--jdb-m-lift);
    box-shadow: var(--jdb-shadow-soft);
    border-color: var(--jdb-line-gold);
}

.jdb-review-card:focus-within {
    border-color: var(--jdb-line-gold);
    box-shadow: var(--jdb-shadow);
    z-index: 5;
}

.jdb-why__usp:focus-within .jdb-why__usp-icon {
    background: var(--mdb-ink);
    color: var(--mdb-paper);
}

.jdb-why__usp-icon {
    transition: background-color var(--jdb-m-dur-ui) ease, color var(--jdb-m-dur-ui) ease;
}

/* Info die bij hover verschijnt, ook bij focus tonen. */
.jdb-inspiration__item:focus-within .jdb-inspiration__img { transform: scale(var(--jdb-m-zoom)); }
.jdb-style-card:focus-visible::before { border-color: rgba(203, 169, 106, 0.55); }

/* Tekstlinks met pijl: pijl schuift iets op bij hover/focus. */
.jdb-pintro__link a .jdb-icon,
.jdb-pstyles__cta .jdb-icon {
    transition: transform var(--jdb-m-dur-ui) var(--jdb-m-ease-out);
}

.jdb-pintro__link a:is(:hover, :focus-visible) .jdb-icon,
.jdb-pstyles__cta:is(:hover, :focus-visible) .jdb-icon {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4. Trust-marquee: pauze bij focus en buiten beeld, statisch bij reduced motion
   -------------------------------------------------------------------------- */

.jdb-trust:focus-within .jdb-trust__track,
.jdb-trust.is-offscreen .jdb-trust__track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .jdb-trust__track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .jdb-trust__group { flex-wrap: wrap; justify-content: center; }
    .jdb-trust__group[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------------
   5. Beeld meer ruimte, lange tekst compacter (alleen desktop-grids;
   de 1100px-breakpoints in jdb-pages/jdb-home blijven leidend)
   -------------------------------------------------------------------------- */

@media (min-width: 1101px) {
    /* Split: beeld en tekst gelijkwaardig, beeld iets hoger. */
    .jdb-psplit__inner {
        max-width: 88rem;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2.5rem, 5vw, 5rem);
    }

    .jdb-psplit__img { aspect-ratio: 4 / 4.3; }

    /* Stappen: beeldkolom even breed als de lijst; nooit hoger dan het scherm. */
    .jdb-psteps--media .jdb-psteps__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .jdb-psteps__img { max-height: calc(100vh - var(--jdbh-main-h-scrolled, 4.5rem) - 4rem); }

    /* Quote: grotere foto naast een korte quote. */
    .jdb-pquote__inner {
        max-width: 80rem;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* Waarom ons (home): beeldstapel iets breder. */
    .jdb-why__grid { grid-template-columns: minmax(0, 50%) minmax(0, 1fr); }
}

/* Lange lopende tekst: prettige leesbreedte en iets strakkere ritmiek. */
.jdb-psplit__body { max-width: 38rem; line-height: 1.72; }
.jdb-psplit__content { gap: 1.35rem; }
.jdb-psplit__items { gap: 0.85rem; }

.jdb-pintro__inner { gap: clamp(1.75rem, 3.5vw, 3rem); }
.jdb-pintro__body { line-height: 1.75; }
.jdb-pintro__body p + p { margin-top: 0.9em; }
.jdb-pintro__body--cols { gap: clamp(1.5rem, 3.5vw, 3rem); }

.jdb-psteps__step-text { max-width: 34rem; }