/*
 * Profiman Deck služieb
 *
 * Rotujúci stoh kariet („ticket deck“), prevzatý 1:1 z hero sekcie stránky
 * Pre remeselníkov. Čisté CSS, bez JS. Stoh podporuje 2 až 6 kariet cez
 * triedu .pmdd-count-N; 4 karty sú referencia pôvodného webu
 * (cyklus 14.4s, 3.6s na krok, posun 0.75s).
 *
 * Skladba karty a hodnoty sú presne z pôvodnej stránky:
 *   karta: max 550px, padding 30px, radius 10px, okraj #BAB7C7,
 *          fotografia ako pozadie + prechod 155deg #2C2644 > #4A22B0 na 50 %
 *   odznak/obec: Martian Mono 10/12, 500, ls 2.2px, veľké písmená, biela
 *   nadpis: Inter 20/24, 800, ls -0.5px, biela
 *   text: Inter 16/24, 400, biela
 *   cena: Archivo 35/35 (mobil 30/30), 900, ls -0.5px, biela
 */

/* ── Kontajner decku ────────────────────────────────────── */

.pmdd-deck {
    /* Všetky nastaviteľné hodnoty ako CSS premenné, aby ich ovládacie prvky
       Elementor (a atribúty shortcodu) mohli prepísať bez nového vykreslenia.
       Predvolené hodnoty = pôvodný 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;
}

/* Priestor pod prednou kartou pre viditeľný stoh za ňou. */
.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); }

/* ── Karta ──────────────────────────────────────────────── */

.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);
}

/* Fialový prechod cez fotografiu, rovnaký uhol a krytie ako pôvodne.
   Farby, uhol a krytie sa nastavujú premennými na .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;
}

/* Obsah držať nad prekrytím. */
.pmdd-card > * {
    position: relative;
}

/* ── Typografia ─────────────────────────────────────────── */

.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;
}

/* Rastie v kratších kartách, aby päta karty končila na všetkých
   kartách stohu v rovnakej výške. */
.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;
}

/* ── Animácia podľa počtu kariet ────────────────────────── */

.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; }

/* Záporné oneskorenia postavia karty hneď na ich vlastnú pozíciu,
   bez preblesknutia pri štarte. Menia sa spolu s dĺžkou kroku
   (predvolene 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); }

/* Voľba: pozastaviť otáčanie, kým je myš nad stohom. */
.pmdd-hoverpause:hover > .pmdd-card {
    animation-play-state: paused;
}

/* Voľba: animácia vypnutá, stoh sa zobrazí staticky. */
.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);
}

/*
 * Každá karta prechádza: predná pozícia, potom úplne dozadu,
 * potom zakaždým o 1 pozíciu dopredu. Zadné pozície:
 *   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; }
}

/* Referencia pôvodného webu: 4 karty, 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; }
}

/* ── Responzívne ────────────────────────────────────────── */

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

/* ── Statická verzia pri vypnutých animáciách ───────────── */

@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);
    }
}

/* ── Klikateľný stoh (aktuálne dopyty) ─────────────────── */

.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;
}
/* Jedna karta (pri jednom dopyte bez doplnenia): bez stohu, bez animácie. */
.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; }