/*
 * Profiman Diensten Deck
 *
 * Roterende kaartenstapel ("ticket deck"), 1:1 overgenomen van de hero op
 * landing-vakman. Pure CSS, geen JS. De stapel ondersteunt 2 t/m 6 kaarten
 * via de klasse .pmdd-count-N; 4 kaarten is de referentie van de live site
 * (14.4s cyclus, 3.6s per stap, verplaatsing 0.75s).
 *
 * Kaartopbouw en waarden komen exact van de live pagina:
 *   kaart: max 550px, padding 30px, radius 10px, rand #BAB7C7,
 *          foto als achtergrond + gradient overlay 155deg #2C2644 > #4A22B0 op 50%
 *   badge/stad: Martian Mono 10/12, 500, ls 2.2px, uppercase, wit
 *   titel: Inter 20/24, 800, ls -0.5px, wit
 *   tekst: Inter 16/24, 400, wit
 *   prijs: Archivo 35/35 (mobiel 30/30), 900, ls -0.5px, wit
 */

/* ── Deck container ─────────────────────────────────────── */

.pmdd-deck {
    /* Alle instelbare waarden als CSS vars, zodat de Elementor controls
       (en shortcode-attributen) ze kunnen overschrijven zonder re-render.
       Standaardwaarden = de live hero. */
    --pmdd-step: 3.6s;
    --pmdd-duration: calc(var(--pmdd-step) * 4);
    --pmdd-offset: var(--pmdd-offset-custom, 52px);
    --pmdd-ease: cubic-bezier(.2, .7, .2, 1);
    --pmdd-card-width: 550px;
    --pmdd-spacer: 30px;
    --pmdd-footer-gap: 15px;
    --pmdd-ov-angle: 155deg;
    --pmdd-ov-start: #2C2644;
    --pmdd-ov-end: #4A22B0;
    --pmdd-ov-opacity: .5;

    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    overflow: visible;
}

/* Ruimte onder de voorste kaart voor de zichtbare stapel erachter. */
.pmdd-count-2 { --pmdd-duration: calc(var(--pmdd-step) * 2); padding-block-end: calc(var(--pmdd-offset) * 1); }
.pmdd-count-3 { --pmdd-duration: calc(var(--pmdd-step) * 3); padding-block-end: calc(var(--pmdd-offset) * 2); }
.pmdd-count-4 { --pmdd-duration: calc(var(--pmdd-step) * 4); padding-block-end: calc(var(--pmdd-offset) * 3); }
.pmdd-count-5 { --pmdd-duration: calc(var(--pmdd-step) * 5); padding-block-end: calc(var(--pmdd-offset) * 4); }
.pmdd-count-6 { --pmdd-duration: calc(var(--pmdd-step) * 6); padding-block-end: calc(var(--pmdd-offset) * 5); }

/* ── Kaart ──────────────────────────────────────────────── */

.pmdd-deck > .pmdd-card {
    grid-area: 1 / 1;
    position: relative;
    inset: auto;

    width: 100%;
    max-width: var(--pmdd-card-width);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 30px;

    border: 1px solid #BAB7C7;
    border-radius: 10px;
    background-color: #2C2644;
    background-size: cover;
    background-position: center;

    transform-origin: 50% 0;
    backface-visibility: hidden;
    will-change: transform, filter;

    animation-duration: var(--pmdd-duration), var(--pmdd-duration);
    animation-timing-function: linear, linear;
    animation-iteration-count: infinite, infinite;
    animation-fill-mode: both, both;
    animation-delay: var(--pmdd-delay, 0s), var(--pmdd-delay, 0s);
}

/* Paarse gradient over de foto, zelfde hoek en dekking als live.
   Kleuren, hoek en dekking zijn instelbaar via de vars op .pmdd-deck. */
.pmdd-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 10px;
    background: linear-gradient(var(--pmdd-ov-angle, 155deg), var(--pmdd-ov-start, #2C2644) 0%, var(--pmdd-ov-end, #4A22B0) 100%);
    opacity: var(--pmdd-ov-opacity, .5);
    pointer-events: none;
}

/* Inhoud boven de overlay houden. */
.pmdd-card > * {
    position: relative;
}

/* ── Typografie ─────────────────────────────────────────── */

.pmdd-badge,
.pmdd-city {
    width: fit-content;
    margin: 8px 0 7px;
    padding: 0;
    font-family: "Martian Mono", "Courier New", monospace;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #fff;
}

.pmdd-title {
    margin: 8px 0 7px;
    padding: 0;
    font-family: Inter, "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
    letter-spacing: -0.5px;
    color: #fff;
}

.pmdd-desc {
    margin: 0;
    padding: 0;
    font-family: Inter, "Plus Jakarta Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: normal;
    color: #fff;
}

/* Groeit mee in kortere kaarten zodat de voetregel op alle
   kaarten van de stapel op gelijke hoogte eindigt. */
.pmdd-spacer {
    height: var(--pmdd-spacer, 30px);
    flex: 1 0 var(--pmdd-spacer, 30px);
}

.pmdd-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: var(--pmdd-footer-gap, 15px);
}

.pmdd-price {
    margin: 0;
    padding: 0;
    font-family: Archivo, "Arial Black", Arial, sans-serif;
    font-size: 35px;
    font-weight: 900;
    line-height: 35px;
    letter-spacing: -0.5px;
    color: #fff;
}

/* ── Animatie per aantal kaarten ────────────────────────── */

.pmdd-count-2 > .pmdd-card { animation-name: pmdd-pos-2, pmdd-layer-2; }
.pmdd-count-3 > .pmdd-card { animation-name: pmdd-pos-3, pmdd-layer-3; }
.pmdd-count-4 > .pmdd-card { animation-name: pmdd-pos-4, pmdd-layer-4; }
.pmdd-count-5 > .pmdd-card { animation-name: pmdd-pos-5, pmdd-layer-5; }
.pmdd-count-6 > .pmdd-card { animation-name: pmdd-pos-6, pmdd-layer-6; }

/* Negatieve delays zetten de kaarten direct op hun eigen positie,
   zonder opstart-flits. Ze schalen mee met de staptijd (standaard 3.6s). */
.pmdd-count-2 > .pmdd-card:nth-child(2) { --pmdd-delay: calc(var(--pmdd-step) * -1); }

.pmdd-count-3 > .pmdd-card:nth-child(2) { --pmdd-delay: calc(var(--pmdd-step) * -2); }
.pmdd-count-3 > .pmdd-card:nth-child(3) { --pmdd-delay: calc(var(--pmdd-step) * -1); }

.pmdd-count-4 > .pmdd-card:nth-child(2) { --pmdd-delay: calc(var(--pmdd-step) * -3); }
.pmdd-count-4 > .pmdd-card:nth-child(3) { --pmdd-delay: calc(var(--pmdd-step) * -2); }
.pmdd-count-4 > .pmdd-card:nth-child(4) { --pmdd-delay: calc(var(--pmdd-step) * -1); }

.pmdd-count-5 > .pmdd-card:nth-child(2) { --pmdd-delay: calc(var(--pmdd-step) * -4); }
.pmdd-count-5 > .pmdd-card:nth-child(3) { --pmdd-delay: calc(var(--pmdd-step) * -3); }
.pmdd-count-5 > .pmdd-card:nth-child(4) { --pmdd-delay: calc(var(--pmdd-step) * -2); }
.pmdd-count-5 > .pmdd-card:nth-child(5) { --pmdd-delay: calc(var(--pmdd-step) * -1); }

.pmdd-count-6 > .pmdd-card:nth-child(2) { --pmdd-delay: calc(var(--pmdd-step) * -5); }
.pmdd-count-6 > .pmdd-card:nth-child(3) { --pmdd-delay: calc(var(--pmdd-step) * -4); }
.pmdd-count-6 > .pmdd-card:nth-child(4) { --pmdd-delay: calc(var(--pmdd-step) * -3); }
.pmdd-count-6 > .pmdd-card:nth-child(5) { --pmdd-delay: calc(var(--pmdd-step) * -2); }
.pmdd-count-6 > .pmdd-card:nth-child(6) { --pmdd-delay: calc(var(--pmdd-step) * -1); }

/* Optie: pauzeer de rotatie zolang de muis op de stapel staat. */
.pmdd-hoverpause:hover > .pmdd-card {
    animation-play-state: paused;
}

/* Optie: animatie uitgeschakeld, toon de stapel statisch. */
.pmdd-static > .pmdd-card {
    animation: none !important;
}
.pmdd-static > .pmdd-card:nth-child(1) {
    z-index: 6;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
}
.pmdd-static > .pmdd-card:nth-child(2) {
    z-index: 5;
    transform: translate3d(0, var(--pmdd-offset), 0) scale(.955);
    filter: brightness(.68);
}
.pmdd-static > .pmdd-card:nth-child(3) {
    z-index: 4;
    transform: translate3d(0, calc(var(--pmdd-offset) * 2), 0) scale(.91);
    filter: brightness(.46);
}
.pmdd-static > .pmdd-card:nth-child(4) {
    z-index: 3;
    transform: translate3d(0, calc(var(--pmdd-offset) * 3), 0) scale(.865);
    filter: brightness(.3);
}
.pmdd-static > .pmdd-card:nth-child(5) {
    z-index: 2;
    transform: translate3d(0, calc(var(--pmdd-offset) * 4), 0) scale(.82);
    filter: brightness(.21);
}
.pmdd-static > .pmdd-card:nth-child(6) {
    z-index: 1;
    transform: translate3d(0, calc(var(--pmdd-offset) * 5), 0) scale(.775);
    filter: brightness(.15);
}

/*
 * Elke kaart doorloopt: voorste positie, dan helemaal achteraan,
 * daarna telkens 1 positie naar voren. Achterposities:
 *   k1: y 1x offset, scale .955, brightness .68
 *   k2: y 2x offset, scale .91,  brightness .46
 *   k3: y 3x offset, scale .865, brightness .3
 *   k4: y 4x offset, scale .82,  brightness .21
 *   k5: y 5x offset, scale .775, brightness .15
 */

@keyframes pmdd-pos-2 {
    0%, 39.5833% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
        animation-timing-function: var(--pmdd-ease);
    }
    50%, 89.5833% {
        transform: translate3d(0, var(--pmdd-offset), 0) scale(.955);
        filter: brightness(.68);
        animation-timing-function: var(--pmdd-ease);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
    }
}

@keyframes pmdd-layer-2 {
    0%, 39.58%        { z-index: 2; }
    39.5833%, 89.58%  { z-index: 1; }
    89.5833%, 100%    { z-index: 2; }
}

@keyframes pmdd-pos-3 {
    0%, 26.3889% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
        animation-timing-function: var(--pmdd-ease);
    }
    33.3333%, 59.7222% {
        transform: translate3d(0, calc(var(--pmdd-offset) * 2), 0) scale(.91);
        filter: brightness(.46);
        animation-timing-function: var(--pmdd-ease);
    }
    66.6667%, 93.0556% {
        transform: translate3d(0, var(--pmdd-offset), 0) scale(.955);
        filter: brightness(.68);
        animation-timing-function: var(--pmdd-ease);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
    }
}

@keyframes pmdd-layer-3 {
    0%, 26.38%        { z-index: 3; }
    26.3889%, 59.72%  { z-index: 1; }
    59.7222%, 93.05%  { z-index: 2; }
    93.0556%, 100%    { z-index: 3; }
}

/* Referentie van de live site: 4 kaarten, 14.4s. */
@keyframes pmdd-pos-4 {
    0%, 19.7917% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
        animation-timing-function: var(--pmdd-ease);
    }
    25%, 44.7917% {
        transform: translate3d(0, calc(var(--pmdd-offset) * 3), 0) scale(.865);
        filter: brightness(.3);
        animation-timing-function: var(--pmdd-ease);
    }
    50%, 69.7917% {
        transform: translate3d(0, calc(var(--pmdd-offset) * 2), 0) scale(.91);
        filter: brightness(.46);
        animation-timing-function: var(--pmdd-ease);
    }
    75%, 94.7917% {
        transform: translate3d(0, var(--pmdd-offset), 0) scale(.955);
        filter: brightness(.68);
        animation-timing-function: var(--pmdd-ease);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
    }
}

@keyframes pmdd-layer-4 {
    0%, 19.79%        { z-index: 4; }
    19.7917%, 44.79%  { z-index: 1; }
    44.7917%, 69.79%  { z-index: 2; }
    69.7917%, 94.79%  { z-index: 3; }
    94.7917%, 100%    { z-index: 4; }
}

@keyframes pmdd-pos-5 {
    0%, 15.8333% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
        animation-timing-function: var(--pmdd-ease);
    }
    20%, 35.8333% {
        transform: translate3d(0, calc(var(--pmdd-offset) * 4), 0) scale(.82);
        filter: brightness(.21);
        animation-timing-function: var(--pmdd-ease);
    }
    40%, 55.8333% {
        transform: translate3d(0, calc(var(--pmdd-offset) * 3), 0) scale(.865);
        filter: brightness(.3);
        animation-timing-function: var(--pmdd-ease);
    }
    60%, 75.8333% {
        transform: translate3d(0, calc(var(--pmdd-offset) * 2), 0) scale(.91);
        filter: brightness(.46);
        animation-timing-function: var(--pmdd-ease);
    }
    80%, 95.8333% {
        transform: translate3d(0, var(--pmdd-offset), 0) scale(.955);
        filter: brightness(.68);
        animation-timing-function: var(--pmdd-ease);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
    }
}

@keyframes pmdd-layer-5 {
    0%, 15.83%        { z-index: 5; }
    15.8333%, 35.83%  { z-index: 1; }
    35.8333%, 55.83%  { z-index: 2; }
    55.8333%, 75.83%  { z-index: 3; }
    75.8333%, 95.83%  { z-index: 4; }
    95.8333%, 100%    { z-index: 5; }
}

@keyframes pmdd-pos-6 {
    0%, 13.1944% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
        animation-timing-function: var(--pmdd-ease);
    }
    16.6667%, 29.8611% {
        transform: translate3d(0, calc(var(--pmdd-offset) * 5), 0) scale(.775);
        filter: brightness(.15);
        animation-timing-function: var(--pmdd-ease);
    }
    33.3333%, 46.5278% {
        transform: translate3d(0, calc(var(--pmdd-offset) * 4), 0) scale(.82);
        filter: brightness(.21);
        animation-timing-function: var(--pmdd-ease);
    }
    50%, 63.1944% {
        transform: translate3d(0, calc(var(--pmdd-offset) * 3), 0) scale(.865);
        filter: brightness(.3);
        animation-timing-function: var(--pmdd-ease);
    }
    66.6667%, 79.8611% {
        transform: translate3d(0, calc(var(--pmdd-offset) * 2), 0) scale(.91);
        filter: brightness(.46);
        animation-timing-function: var(--pmdd-ease);
    }
    83.3333%, 96.5278% {
        transform: translate3d(0, var(--pmdd-offset), 0) scale(.955);
        filter: brightness(.68);
        animation-timing-function: var(--pmdd-ease);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
    }
}

@keyframes pmdd-layer-6 {
    0%, 13.19%        { z-index: 6; }
    13.1944%, 29.86%  { z-index: 1; }
    29.8611%, 46.52%  { z-index: 2; }
    46.5278%, 63.19%  { z-index: 3; }
    63.1944%, 79.86%  { z-index: 4; }
    79.8611%, 96.52%  { z-index: 5; }
    96.5278%, 100%    { z-index: 6; }
}

/* ── Responsief ─────────────────────────────────────────── */

@media (max-width: 767px) {
    .pmdd-deck {
        --pmdd-offset: var(--pmdd-offset-custom, 40px);
    }
    .pmdd-price {
        font-size: 30px;
        line-height: 30px;
    }
}

/* ── Statische versie bij uitgeschakelde animaties ──────── */

@media (prefers-reduced-motion: reduce) {
    .pmdd-deck > .pmdd-card {
        animation: none !important;
    }
    .pmdd-deck > .pmdd-card:nth-child(1) {
        z-index: 6;
        transform: translate3d(0, 0, 0) scale(1);
        filter: brightness(1);
    }
    .pmdd-deck > .pmdd-card:nth-child(2) {
        z-index: 5;
        transform: translate3d(0, var(--pmdd-offset), 0) scale(.955);
        filter: brightness(.68);
    }
    .pmdd-deck > .pmdd-card:nth-child(3) {
        z-index: 4;
        transform: translate3d(0, calc(var(--pmdd-offset) * 2), 0) scale(.91);
        filter: brightness(.46);
    }
    .pmdd-deck > .pmdd-card:nth-child(4) {
        z-index: 3;
        transform: translate3d(0, calc(var(--pmdd-offset) * 3), 0) scale(.865);
        filter: brightness(.3);
    }
    .pmdd-deck > .pmdd-card:nth-child(5) {
        z-index: 2;
        transform: translate3d(0, calc(var(--pmdd-offset) * 4), 0) scale(.82);
        filter: brightness(.21);
    }
    .pmdd-deck > .pmdd-card:nth-child(6) {
        z-index: 1;
        transform: translate3d(0, calc(var(--pmdd-offset) * 5), 0) scale(.775);
        filter: brightness(.15);
    }
}

/* ── Klikbare stapel (actuele aanvragen) ───────────────── */

.pmdd-deck.pmdd-clickable,
.pmdd-deck.pmdd-clickable > .pmdd-card { cursor: pointer; }
.pmdd-deck.pmdd-clickable { border-radius: 10px; }
.pmdd-deck.pmdd-clickable:focus { outline: none; }
.pmdd-deck.pmdd-clickable:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}
/* Eén kaart (kan bij een enkele aanvraag zonder aanvullen): geen stapel, geen animatie. */
.pmdd-count-1 { padding-block-end: 0; }
.pmdd-count-1 > .pmdd-card { animation: none; }

.pmdd-cta {
    margin-top: 12px;
    font-family: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #ffffff;
    opacity: .85;
}
.pmdd-deck.pmdd-clickable:hover .pmdd-cta { opacity: 1; }