/* [admax_ajanlo_folyamat] — ajánló-folyamatábra sötét szekcióra + belépő és végtelen „látogató-út” animáció. */

.am-folyamat-vizual-buro {
    overflow-x: auto;
}

.am-folyamat-vizual {
    position: relative;
    width: 1080px;
    height: 400px;
    margin: 0 auto;
    font-family: 'Space Grotesk', Arial, sans-serif;
}

/* ---- Nyilak ---- */
.am-fv-nyil {
    position: absolute;
    overflow: visible;
    fill: none;
    stroke: #a7c2ba;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.am-fv-nyil--1 { left: 168px; top: 206px; width: 95px; height: 8px; }
.am-fv-nyil--2 { left: 448px; top: 206px; width: 95px; height: 8px; }
.am-fv-nyil--3 { left: 728px; top: 206px; width: 48px; height: 8px; }
.am-fv-nyil--4 { left: 772px; top: 66px; width: 8px; height: 288px; }
.am-fv-nyil--5 { left: 776px; top: 62px; width: 47px; height: 8px; }
.am-fv-nyil--6 { left: 776px; top: 206px; width: 47px; height: 8px; }
.am-fv-nyil--7 { left: 776px; top: 350px; width: 47px; height: 8px; }

/* ---- Dobozok ---- */
.am-fv-doboz {
    position: absolute;
    box-sizing: border-box;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(167, 194, 186, .35);
    border-radius: 16px;
    color: #f1f7f4;
    font-weight: 700;
    font-size: 16px;
}

.am-fv-doboz--latogato { left: 0; top: 174px; width: 168px; height: 72px; }
.am-fv-doboz--cikk { left: 264px; top: 174px; width: 184px; height: 72px; }

.am-fv-doboz-alcim {
    font-size: 12px;
    font-weight: 500;
    color: #c4dbd4;
}

.am-fv-doboz--ajanlo {
    left: 544px;
    top: 174px;
    width: 184px;
    height: 72px;
    background: #a7ebdd;
    border: 0;
    color: #16332e;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 17px;
}

.am-fv-eredmeny {
    position: absolute;
    left: 824px;
    width: 256px;
    height: 88px;
    box-sizing: border-box;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 16px;
    color: #16332e;
    font-size: 15px;
    font-weight: 700;
}

.am-fv-eredmeny--1 { top: 22px; }
.am-fv-eredmeny--2 { top: 166px; }
.am-fv-eredmeny--3 { top: 310px; }

.am-fv-eredmeny-alcim {
    font-size: 12px;
    font-weight: 600;
    color: #2c8b74;
}

/* ==== Animáció — .is-anim: a JS teszi rá (ha animálhat), .is-in: amikor az ábra a látótérbe ér. ==== */

/* ---- Belépés: dobozok és kártyák ---- */
.am-folyamat-vizual.is-anim .am-fv-doboz,
.am-folyamat-vizual.is-anim .am-fv-eredmeny {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1);
}

.am-folyamat-vizual.is-anim .am-fv-doboz--ajanlo {
    transform: scale(.88);
    transition-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(.34, 1.4, .64, 1);
}

.am-folyamat-vizual.is-in .am-fv-doboz,
.am-folyamat-vizual.is-in .am-fv-eredmeny {
    opacity: 1;
    transform: none;
}

.am-folyamat-vizual.is-in .am-fv-doboz--latogato { transition-delay: 0s; }
.am-folyamat-vizual.is-in .am-fv-doboz--cikk { transition-delay: .33s; }
.am-folyamat-vizual.is-in .am-fv-doboz--ajanlo { transition-delay: .65s; }
.am-folyamat-vizual.is-in .am-fv-eredmeny--1 { transition-delay: 1.3s; }
.am-folyamat-vizual.is-in .am-fv-eredmeny--2 { transition-delay: 1.37s; }
.am-folyamat-vizual.is-in .am-fv-eredmeny--3 { transition-delay: 1.44s; }

/* ---- Belépés: a nyilak „megrajzolódnak” (a nyílhegy a vonallal együtt ér célba) ---- */
.am-folyamat-vizual.is-anim .am-fv-nyil {
    clip-path: inset(-6px 100% -6px 0);
    transition: clip-path .32s cubic-bezier(.65, 0, .35, 1);
}

/* A függőleges elágazás középről nyílik szét. */
.am-folyamat-vizual.is-anim .am-fv-nyil--4 {
    clip-path: inset(50% -6px 50% -6px);
    transition-duration: .36s;
}

.am-folyamat-vizual.is-in .am-fv-nyil {
    clip-path: inset(-6px -6px -6px -6px);
}

.am-folyamat-vizual.is-in .am-fv-nyil--1 { transition-delay: .2s; }
.am-folyamat-vizual.is-in .am-fv-nyil--2 { transition-delay: .52s; }
.am-folyamat-vizual.is-in .am-fv-nyil--3 { transition-delay: .85s; }
.am-folyamat-vizual.is-in .am-fv-nyil--4 { transition-delay: 1s; }
.am-folyamat-vizual.is-in .am-fv-nyil--5,
.am-folyamat-vizual.is-in .am-fv-nyil--6,
.am-folyamat-vizual.is-in .am-fv-nyil--7 { transition-delay: 1.2s; }

/* ---- Végtelen „látogató-út”: a pont végigfut a nyilakon, körönként másik kimenetbe ---- */
.am-fv-pont {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #a7ebdd;
    box-shadow: 0 0 0 4px rgba(167, 235, 221, .18), 0 0 14px #a7ebdd;
    opacity: 0;
    pointer-events: none;
}

.am-folyamat-vizual.is-in .am-fv-pont {
    animation: am-fv-ut 6s linear 1.9s infinite;
}

@keyframes am-fv-ut {
    /* 1. kör → Saját következő cikk */
    0%     { transform: translate(168px, 210px); opacity: 0; }
    1.5%   { transform: translate(168px, 210px); opacity: 1; }
    18%    { transform: translate(776px, 210px); }
    25%    { transform: translate(776px, 66px); }
    29%    { transform: translate(818px, 66px); opacity: 1; }
    31%    { transform: translate(818px, 66px); opacity: 0; }
    /* 2. kör → Portfólión belüli tartalom */
    33.33% { transform: translate(168px, 210px); opacity: 0; }
    34.83% { transform: translate(168px, 210px); opacity: 1; }
    51.33% { transform: translate(776px, 210px); }
    58.33% { transform: translate(776px, 210px); }
    62.33% { transform: translate(818px, 210px); opacity: 1; }
    64.33% { transform: translate(818px, 210px); opacity: 0; }
    /* 3. kör → Szponzorált ajánlás */
    66.66% { transform: translate(168px, 210px); opacity: 0; }
    68.16% { transform: translate(168px, 210px); opacity: 1; }
    84.66% { transform: translate(776px, 210px); }
    91.66% { transform: translate(776px, 354px); }
    95.66% { transform: translate(818px, 354px); opacity: 1; }
    97.66% { transform: translate(818px, 354px); opacity: 0; }
    100%   { transform: translate(168px, 210px); opacity: 0; }
}

/* Az AD MAX ajánló felvillan, amikor a pont áthalad rajta (2 mp-enként). */
.am-folyamat-vizual.is-in .am-fv-doboz--ajanlo {
    animation: am-fv-ajanlo 2s ease-in-out 1.9s infinite;
}

@keyframes am-fv-ajanlo {
    0%, 40%, 70%, 100% { box-shadow: 0 0 0 0 rgba(167, 235, 221, 0); }
    52%                { box-shadow: 0 0 0 8px rgba(167, 235, 221, .18), 0 0 32px rgba(167, 235, 221, .45); }
}

/* A célba ért kimenet kiemelődik (a három kártya 2 mp eltolással, a ponttal szinkronban). */
.am-folyamat-vizual.is-in .am-fv-eredmeny--1 { animation: am-fv-eredmeny 6s ease-in-out 1.9s infinite; }
.am-folyamat-vizual.is-in .am-fv-eredmeny--2 { animation: am-fv-eredmeny 6s ease-in-out 3.9s infinite; }
.am-folyamat-vizual.is-in .am-fv-eredmeny--3 { animation: am-fv-eredmeny 6s ease-in-out 5.9s infinite; }

@keyframes am-fv-eredmeny {
    0%, 25%, 42%, 100% { box-shadow: 0 0 0 0 rgba(167, 235, 221, 0); transform: none; }
    29%, 34%           { box-shadow: 0 0 0 3px #a7ebdd, 0 18px 40px rgba(11, 24, 21, .35); transform: translateX(6px); }
}

/* ---- Kevesebb mozgás: minden azonnal, statikusan látszik ---- */
@media (prefers-reduced-motion: reduce) {
    .am-folyamat-vizual.is-anim .am-fv-doboz,
    .am-folyamat-vizual.is-anim .am-fv-eredmeny,
    .am-folyamat-vizual.is-anim .am-fv-nyil {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
        animation: none;
    }

    .am-fv-pont {
        display: none;
    }
}