/**
 * mindset.css — a „mindset réteg” (2026-10-07): finom vonalrajz-motívumok, oldalanként egy gondolat.
 *   oneDashboard = iránytű  (body[data-focus="dashboard"], learning-modern.php)
 *   oneLoop      = körforgás (body[data-mindset="loop"], one-loop.php — sötét lap)
 *   oneStart     = robogó    (body[data-mindset="start"], one-start.php + espresso)
 * Rajzok: pages/partials/mindset-motif.php · nézet-belépés: js/mindset.js (.mm-in).
 *
 * KÖZÖS NYELVTAN: 1,25 px-es lekerekített vonal, csak körvonal, a lap akcentszínében, halkan.
 * Négy szint: hero-háttér · elválasztó · 12 px-es mikro-ikon a címkék előtt · egy halk hover.
 * Mozgás: a belépő mozdulat EGYSZER fut, utána legfeljebb egy alig látható „levegővétel” (6–12 mp).
 * Mobil: csak részlet, kisebb, utazó mozgás nélkül. Csökkentett mozgás: minden a végállapotában áll.
 * HANGERŐ: az egész réteg egyetlen szorzóval halkítható/erősíthető: --mm-ink (1 = alap).
 */
:root { --mm-ink: 1; }
body[data-focus="dashboard"] { --mm-color: var(--accent-current, #14b8a6); }
body[data-mindset="loop"] { --mm-color: var(--accent, #5E6AD2); }
body[data-mindset="start"] { --mm-color: var(--accent-current, #5E6AD2); }

/* ---------- közös ---------- */
.mm-hero, .mm-div, .mm-arc { color: var(--mm-color); pointer-events: none; }
.mm-hero svg *, .mm-arc svg * { vector-effect: non-scaling-stroke; }

/* elválasztó: 0 magasságú burok, a rajz a szekcióhatárra ül — nincs elrendezés-ugrás (CLS) */
.mm-div { position: relative; height: 0; z-index: 1; }
.mm-div svg { position: absolute; left: 50%; top: 0; width: 240px; height: 24px; transform: translate(-50%, -50%); opacity: calc(.34 * var(--mm-ink)); overflow: visible; }

/* mikro-ikon a címkék előtt (12 px, a címke színében) */
.mm-eyebrow-icon,
body[data-focus="dashboard"] :is(.dlead-eyebrow, .dcp-eyebrow, .dgate-eyebrow, .olt-eyebrow)::before,
body[data-mindset="loop"] .ol-eyebrow::before,
body[data-mindset="start"] :is(.os-eyebrow, .ose-eyebrow)::before {
    content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px;
    background: currentColor; opacity: .75;
    -webkit-mask: var(--mm-icon) center / contain no-repeat; mask: var(--mm-icon) center / contain no-repeat;
}
body[data-focus="dashboard"] {
    --mm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='5.2'/%3E%3Cpath d='M6 7.6V2.6M4.6 4.1 6 2.4l1.4 1.7'/%3E%3C/svg%3E");
}
body[data-mindset="loop"] {
    --mm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.4 4.2A4.8 4.8 0 1 0 10.8 7.3'/%3E%3Cpath d='M10.8 1.6v2.9H7.9'/%3E%3C/svg%3E");
}
body[data-mindset="start"] {
    --mm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 2.8 9.6 6l-3.2 3.2'/%3E%3Cpath d='M.8 4.4h3.4M1.8 7.6h2.6'/%3E%3C/svg%3E");
}
/* a mikro-ikon egyszer „ráfordul”, amikor a címke a képbe ér */
body[data-focus="dashboard"] .mm-in:is(.dlead-eyebrow, .dcp-eyebrow, .dgate-eyebrow, .olt-eyebrow)::before { animation: mmNeedleIn 1.4s cubic-bezier(.3, 1.4, .5, 1) both; }
body[data-mindset="loop"] .ol-eyebrow.mm-in::before { animation: mmSpinIn 1.6s cubic-bezier(.4, 0, .2, 1) both; }
body[data-mindset="start"] .mm-in:is(.os-eyebrow, .ose-eyebrow)::before { animation: mmGoIn .9s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes mmNeedleIn { from { transform: rotate(-80deg); } to { transform: rotate(0); } }
@keyframes mmSpinIn { from { transform: rotate(-360deg); } to { transform: rotate(0); } }
@keyframes mmGoIn { from { transform: translateX(-5px); opacity: 0; } to { transform: none; opacity: .75; } }

/* ---------- oneDashboard — iránytű ---------- */
.mm-compass { position: absolute; right: -130px; bottom: -170px; width: 540px; height: 540px; opacity: calc(.14 * var(--mm-ink)); }
.mm-compass svg { width: 100%; height: 100%; overflow: visible; }
.mm-compass .mm-needle { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(38deg);
    animation: mmSettle 2.8s cubic-bezier(.3, .7, .3, 1) .4s both, mmMicro 10s ease-in-out 3.2s infinite; }
@keyframes mmSettle { 0% { transform: rotate(-55deg); opacity: 0; } 20% { opacity: 1; } 62% { transform: rotate(47deg); } 82% { transform: rotate(34deg); } 100% { transform: rotate(38deg); } }
@keyframes mmMicro { 0%, 100% { transform: rotate(38deg); } 42% { transform: rotate(40deg); } 70% { transform: rotate(36.5deg); } }
.mm-div .mm-tick { transform-box: view-box; transform-origin: 120px 12px; transform: rotate(32deg); }
.mm-div.mm-in .mm-tick { animation: mmTickIn 2.2s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes mmTickIn { from { transform: rotate(-60deg); } to { transform: rotate(32deg); } }
/* hover: a kérdés-kártyák sarkában egy kis mutató 10°-ot fordul */
body[data-focus="dashboard"] .dq-body { position: relative; }
body[data-focus="dashboard"] .dq-body::after {
    content: ''; position: absolute; right: 14px; bottom: 14px; width: 14px; height: 14px; background: var(--mm-color);
    opacity: .28; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), opacity .3s;
    -webkit-mask: var(--mm-icon) center / contain no-repeat; mask: var(--mm-icon) center / contain no-repeat;
}
body[data-focus="dashboard"] .dq-card:hover .dq-body::after,
body[data-focus="dashboard"] .dq-card:focus-visible .dq-body::after { transform: rotate(10deg); opacity: .6; }
@media (max-width: 640px) {
    /* mobil: csak a kör negyede a sarokban, mozgás nélkül */
    .mm-compass { width: 260px; height: 260px; right: -80px; bottom: -80px; }
    .mm-compass .mm-needle { animation: none; }
}

/* ---------- oneLoop — körforgás (sötét lap) ---------- */
body[data-mindset="loop"] .ol-stage { position: relative; }
.mm-arc { position: absolute; top: 50%; width: 70px; height: 380px; transform: translateY(-50%); }
.mm-arc--right { left: 100%; margin-left: 26px; }
.mm-arc--left { right: 100%; margin-right: 26px; }
.mm-arc--left svg { transform: scaleX(-1); }
.mm-arc svg { width: 100%; height: 100%; overflow: visible; }
.mm-arc-line { opacity: calc(.2 * var(--mm-ink)); }
/* az ív saját pontja: egy nagyon rövid, kerek végű szakasz — a képbe érve lassan végigmegy az íven, és a végén marad */
.mm-arc-dot { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: calc(.45 * var(--mm-ink)); }
.mm-js .mm-arc:not(.mm-in) .mm-arc-dot { opacity: 0; }
.mm-arc.mm-in .mm-arc-dot { animation: mmTravel 7s cubic-bezier(.45, 0, .35, 1) .3s both; }
@keyframes mmTravel { from { stroke-dashoffset: 0; opacity: 0; } 8% { opacity: calc(.6 * var(--mm-ink)); } to { stroke-dashoffset: -100; opacity: calc(.45 * var(--mm-ink)); } }
body[data-mindset="loop"] .mm-div svg { opacity: calc(.4 * var(--mm-ink)); }
body[data-mindset="loop"] .ol-stages + .mm-div, body[data-mindset="loop"] .mm-div { margin: 0 auto; }
/* hover: halk, egyszeri fényudvar a lépés-szám körül */
body[data-mindset="loop"] .ol-stage-no { position: relative; }
body[data-mindset="loop"] .ol-stage-no::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
    border: 1.25px solid var(--mm-color); opacity: 0; transform: scale(.55); pointer-events: none;
}
body[data-mindset="loop"] .ol-stage:hover .ol-stage-no::after { animation: mmHalo 1.3s ease-out 1 both; }
@keyframes mmHalo { 0% { opacity: .55; transform: scale(.55); box-shadow: 0 0 0 0 rgba(94, 106, 210, .35); } 100% { opacity: 0; transform: scale(1.35); box-shadow: 0 0 18px 4px rgba(94, 106, 210, 0); } }
@media (max-width: 1000px) { .mm-arc { display: none; } }

/* ---------- oneStart — robogó ---------- */
/* a robogó mérete a font-size-ból jön (1em = a rajz szélessége): széles képernyőn arányosan nő, így nem vész el */
.mm-road { position: absolute; left: 7%; right: 7%; bottom: 72px; height: 0; font-size: clamp(88px, 6.2vw, 116px); }
.mm-road-line { position: absolute; left: 0; right: 0; top: 0; height: 0; border-top: 1.25px solid var(--mm-color); opacity: calc(.16 * var(--mm-ink));
    -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mm-cp { position: absolute; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; border: 1.25px solid var(--mm-color); background: var(--bg-primary, #fff); opacity: calc(.3 * var(--mm-ink)); box-sizing: border-box; }
/* az első útszakasz és az első ellenőrzőpont hangsúlyosabb (2. kör): ide „érkezik” a robogó */
.mm-road-lead { position: absolute; left: 0; width: var(--mmCp); top: 0; height: 0; border-top: 1.5px solid var(--mm-color); opacity: calc(.26 * var(--mm-ink)); transform-origin: left;
    -webkit-mask: linear-gradient(90deg, transparent, #000 35%); mask: linear-gradient(90deg, transparent, #000 35%); }
.mm-road .mm-cp1 { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-width: 1.5px; opacity: calc(.45 * var(--mm-ink)); }
.mm-cp1::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.25px solid var(--mm-color); opacity: 0; }
.mm-ride { position: absolute; left: 0; top: 0; width: 100%; height: 0; transform: translateX(var(--mmE)); }
.mm-road .mm-cp1 { left: var(--mmCp); } .mm-road .mm-cp2 { left: 65%; } .mm-road .mm-cp3 { left: 92%; }
.mm-scooter { position: absolute; left: 0; bottom: -1px; width: 1em; height: auto; overflow: visible; opacity: calc(.29 * var(--mm-ink)); }
.mm-streaks { opacity: 0; }
/*
 * „Felkapjuk, ami kell, és már indul is.” (2026-10-07, 4–7. kör) — néma, egyszer fut, ~5,2 mp (dolce vita), utána FREEZE:
 *   .55–1.0 mp erős beröffenés · 1.0 rövid ágaskodás
 *   1.0–4.0    komótosan gurul a bal szélen kívülről az első pontig (≈ a képernyő 40%-a): felkapja az Excelt (1,5) és a
 *              PDF-et (2,05) — tárgyak, megpöccennek; a három user-piktogram MAGA huppan fel hátulra (2,5 · 3,0 · 3,6);
 *              minden felrakodásnál a robogó egy fél pillanatra megrogy; az első útszakasz a robogó mögött rajzolódik ki
 *   3.95       orrabukós fék
 *   4.15–5.15  CSÚCSPONT: a „dühös robogós” 1 mp-ig vadul gesztikulál két kézzel („na tessék, megvan minden, mehetünk?”)
 *   4.3        az első pont beér (kitelik + fénygyűrű) · 4.45 egy halk impulzus fut tovább az úton
 * A CSS ALAPÁLLAPOTA A VÉGÁLLAPOT (csomag + három utas fent, az úton semmi, egyik kéz kint, a másik a kormányon) —
 * csökkentett mozgásnál ez látszik. Nincs loop, nincs hang.
 * Út: S = −.7em → E = --mmCp − .977em (em = a robogó szélessége), D = E − S. Tárgy: S + D·p + .86em (az első kerék ér
 * oda); utas: S + D·p + .31em (a hátsó ülés ér oda). Időzítés: p → az mmRoll kulcskockái (1.0 + 3.0 s × hányad).
 */
/* az indulás kicsit a bal szélen kívülről jön (S), és az első pont előtt áll meg (E) — így a felkapások elférnek az úton */
/* az első pont helye (--mmCp): az út 38%-a ≈ a képernyő 40%-a (az út 7%-tól 93%-ig fut) — oda ér el a robogó */
.mm-road { --mmCp: 38%; --mmS: -.7em; --mmE: calc(var(--mmCp) - .977em); --mmD: calc(var(--mmE) - var(--mmS)); }
.mm-road .mm-ride { animation: mmRoll 3s linear 1s both; }
@keyframes mmRoll {
    0% { transform: translateX(var(--mmS)); animation-timing-function: ease-in; }
    20% { transform: translateX(calc(var(--mmS) + var(--mmD) * .12)); }
    45% { transform: translateX(calc(var(--mmS) + var(--mmD) * .42)); }
    70% { transform: translateX(calc(var(--mmS) + var(--mmD) * .78)); }
    88% { transform: translateX(calc(var(--mmS) + var(--mmD) * .97)); animation-timing-function: ease-out; }
    100% { transform: translateX(var(--mmE)); }
}
.mm-road .mm-road-lead { animation: mmLead 3s linear 1s both; }
@keyframes mmLead { 0% { transform: scaleX(.1); } 20% { transform: scaleX(.2); } 45% { transform: scaleX(.48); } 70% { transform: scaleX(.8); } 88% { transform: scaleX(.97); } 100% { transform: none; } }
.mm-road .mm-body { animation: mmRev .45s linear .55s 1 both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes mmRev { 0%, 100% { transform: none; } 12% { transform: translate(1px, -1.4px) rotate(-1.2deg); } 26% { transform: translate(-.8px, .6px) rotate(.6deg); } 40% { transform: translate(1px, -1.2px) rotate(-1deg); } 55% { transform: translate(-.7px, .4px) rotate(.8deg); } 70% { transform: translate(.8px, -1px) rotate(-.8deg); } 85% { transform: translate(-.4px, .3px); } }
/* induláskor rövid ágaskodás: az eleje egy pillanatra felemelkedik a hátsó kerék körül */
.mm-launch { transform-box: fill-box; transform-origin: 18% 100%; }
.mm-road .mm-launch { animation: mmLaunch .5s cubic-bezier(.3, .8, .4, 1) 1s 1; }
@keyframes mmLaunch { 0%, 100% { transform: none; } 30% { transform: rotate(-5deg); } 65% { transform: rotate(.8deg); } }
.mm-road .mm-streaks { animation: mmStreak 3.1s ease-out 1s both; }
@keyframes mmStreak { 0% { opacity: 0; transform: translateX(6px); } 20% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: 0; transform: translateX(-4px); } }
/* puha fék: az egész gép (sofőrrel, utasokkal) kicsit előrebiccen az első kerék körül, aztán visszaáll */
.mm-bike { transform-box: fill-box; transform-origin: 90% 100%; }
.mm-road .mm-bike { animation: mmBrake .45s cubic-bezier(.3, .6, .4, 1) 3.95s both; }
@keyframes mmBrake { 0%, 100% { transform: none; } 30% { transform: rotate(5.5deg); } 62% { transform: rotate(-1.2deg); } 82% { transform: rotate(.5deg); } }
/* tárgyak az úton: az első kerék odaér → felugranak és eltűnnek; a csomag a hátsó idomon „beesik” */
.mm-item, .mm-hop { position: absolute; bottom: 1px; height: auto; color: var(--mm-color); opacity: 0; }
/* 7. kör: a tárgyak és az utasok ~2× nagyobbak — vizuális magyarázat, első pillantásra felismerhető (táblázat, PDF, ember) */
.mm-item, .mm-hop { width: .2em; margin-left: -.1em; }
.mm-item1 { left: calc(var(--mmS) + var(--mmD) * .1 + .86em); }
.mm-item2 { left: calc(var(--mmS) + var(--mmD) * .3 + .86em); }
.mm-road .mm-item1 { animation: mmPick .32s ease-in 1.5s both; }
.mm-road .mm-item2 { animation: mmPick .32s ease-in 2.05s both; }
@keyframes mmPick { 0% { opacity: calc(.45 * var(--mm-ink)); transform: none; } 35% { opacity: calc(.45 * var(--mm-ink)); transform: translate(-.04em, -.12em) rotate(-12deg); } 100% { opacity: 0; transform: translate(-.3em, -.34em) scale(.6) rotate(-28deg); } }
.mm-cargo, .mm-pill { transform-box: fill-box; transform-origin: 50% 100%; }
/* a tárgy „megpöccen”: beesik, kicsit oldalra csúszik és visszaáll */
.mm-road .mm-cargo1 { animation: mmLoad .42s cubic-bezier(.3, 1.4, .5, 1) 1.67s both; }
.mm-road .mm-cargo2 { animation: mmLoad .42s cubic-bezier(.3, 1.4, .5, 1) 2.22s both; }
@keyframes mmLoad { 0% { opacity: 0; transform: translate(4px, -10px) rotate(14deg) scale(.6); } 55% { opacity: 1; transform: translate(-1.5px, 1px) rotate(-5deg); } 80% { transform: translate(.5px, 0) rotate(2deg); } 100% { opacity: 1; transform: none; } }
/* az utasok az út szélén várnak; amikor a hátsó ülés odaér, felpattannak, és fent „ráhuppannak” (lapulás, visszarugózás) */
.mm-hop1 { left: calc(var(--mmS) + var(--mmD) * .55 + .31em); }
.mm-hop2 { left: calc(var(--mmS) + var(--mmD) * .78 + .31em); }
.mm-hop3 { left: calc(var(--mmS) + var(--mmD) * .97 + .31em); }
.mm-road .mm-hop1 { animation: mmHop .32s cubic-bezier(.3, 0, .6, 1) 2.54s both; }
.mm-road .mm-hop2 { animation: mmHop .32s cubic-bezier(.3, 0, .6, 1) 3.02s both; }
.mm-road .mm-hop3 { animation: mmHop .32s cubic-bezier(.3, 0, .6, 1) 3.56s both; }
@keyframes mmHop { 0% { opacity: calc(.45 * var(--mm-ink)); transform: none; } 25% { opacity: calc(.45 * var(--mm-ink)); transform: scale(1.08, .86); } 55% { opacity: calc(.4 * var(--mm-ink)); transform: translate(.02em, -.24em) rotate(10deg); } 100% { opacity: 0; transform: translate(.06em, -.34em) scale(.7) rotate(16deg); } }
.mm-road .mm-pill1 { animation: mmPlop .42s ease-out 2.76s both, mmJoy .45s ease-out 4.4s 1; }
.mm-road .mm-pill2 { animation: mmPlop .42s ease-out 3.24s both, mmJoy .45s ease-out 4.6s 1; }
.mm-road .mm-pill3 { animation: mmPlop .42s ease-out 3.78s both, mmJoy .45s ease-out 4.75s 1; }
@keyframes mmPlop { 0% { opacity: 0; transform: translateY(-12px); } 45% { opacity: 1; transform: translateY(0) scale(1.15, .8); } 72% { transform: translateY(-2px) scale(.95, 1.06); } 100% { opacity: 1; transform: none; } }
/* minden felrakodásnál a robogó egy fél pillanatra megrogy a súlytól — csak utána gurul tovább lendületesen */
.mm-sag { transform-box: fill-box; transform-origin: 50% 100%; }
.mm-road .mm-sag { animation: mmSag .3s ease-out 1.72s 1, mmSag .3s ease-out 2.27s 1, mmSag .3s ease-out 2.84s 1, mmSag .3s ease-out 3.32s 1, mmSag .3s ease-out 3.86s 1; }
@keyframes mmSag { 0%, 100% { transform: none; } 35% { transform: translateY(1.6px) scaleY(.965); } 70% { transform: translateY(-.4px); } }
@keyframes mmJoy { 0%, 100% { transform: none; } 40% { transform: translateY(-2.5px); } }
/* a csúcspont: a „dühös robogós” 1 mp-ig vadul gesztikulál két kézzel (+ pár „!” vonal a sisak fölött), aztán FREEZE —
   végállapot: egyik keze kint („na tessék”), a másik a kormányon; ez a tiszta végkép (csökkentett mozgásnál is ez) */
.mm-arm { transform-box: fill-box; transform-origin: 0 0; }
.mm-arm1 { transform: rotate(-50deg); }
.mm-road .mm-arm1 { animation: mmWave1 1s ease-in-out 4.15s both; }
.mm-road .mm-arm2 { animation: mmWave2 1s ease-in-out 4.15s both; }
@keyframes mmWave1 { 0% { transform: none; } 14% { transform: rotate(-86deg); } 28% { transform: rotate(-28deg); } 43% { transform: rotate(-96deg); } 58% { transform: rotate(-32deg); } 74% { transform: rotate(-90deg); } 100% { transform: rotate(-50deg); } }
@keyframes mmWave2 { 0% { transform: none; } 12% { transform: rotate(-128deg); } 27% { transform: rotate(-60deg); } 42% { transform: rotate(-136deg); } 57% { transform: rotate(-55deg); } 72% { transform: rotate(-122deg); } 100% { transform: none; } }
.mm-gest { opacity: 0; }
.mm-road .mm-gest { animation: mmGest 1s ease-out 4.15s both; }
@keyframes mmGest { 0% { opacity: 0; } 12%, 75% { opacity: 1; } 100% { opacity: 0; } }
/* a rider törzse a gesztus alatt kicsit rázkódik — „vadul”, de csak 1 mp */
.mm-rider { transform-box: fill-box; transform-origin: 30% 100%; }
.mm-road .mm-rider { animation: mmFume 1s linear 4.15s 1; }
@keyframes mmFume { 0%, 100% { transform: none; } 20% { transform: rotate(-2deg); } 40% { transform: rotate(1.5deg); } 60% { transform: rotate(-1.8deg); } 80% { transform: rotate(1deg); } }
/* az első ellenőrzőpont beér, és egy halk impulzus fut tovább az úton a második felé — az első működő rendszer elindult */
.mm-road .mm-cp1 { animation: mmCpOn .5s ease-out 4.3s both; }
.mm-road .mm-cp1::after { animation: mmCpHalo 1.6s ease-out 4.3s both; }
@keyframes mmCpOn { to { background: var(--mm-color); opacity: calc(.55 * var(--mm-ink)); } }
@keyframes mmCpHalo { 0% { opacity: .7; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.5); } }
.mm-pulse { position: absolute; top: -1px; left: var(--mmCp); width: 9%; height: 2px; border-radius: 2px; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--mm-color) 70%, transparent); }
.mm-road .mm-pulse { animation: mmPulse 1.1s cubic-bezier(.3, 0, .4, 1) 4.45s both; }
@keyframes mmPulse { 0% { opacity: 0; transform: translateX(-30%); } 25% { opacity: calc(.6 * var(--mm-ink)); } 100% { opacity: 0; transform: translateX(150%); } }
/* elválasztó: szaggatott vonal, a pontok sorban kigyulladnak */
body[data-mindset="start"] .mm-div circle { fill: currentColor; transition: fill-opacity .5s, opacity .5s; }
.mm-js body[data-mindset="start"] .mm-div:not(.mm-in) circle { fill-opacity: 0; }
body[data-mindset="start"] .mm-div.mm-in .mm-cp2 { transition-delay: .5s; }
body[data-mindset="start"] .mm-div.mm-in .mm-cp3 { transition-delay: 1s; }
/* hover: a gombok nyila/ikonja 3 px-t „ráindul” */
body[data-mindset="start"] .btn svg { transition: transform .35s cubic-bezier(.2, .9, .3, 1.4); }
body[data-mindset="start"] .btn:hover svg, body[data-mindset="start"] .btn:focus-visible svg { transform: translateX(3px); }
@media (max-width: 640px) {
    /* mobil: kisebb, a robogó áll az út elején, a csíkok statikusak */
    .mm-road { left: 20px; right: 20px; bottom: 64px; }
    .mm-road { font-size: 62px; --mmCp: 18%; }
    /* a robogó az út elején áll — a 62 px-es rajz eleje épp az első pont elé ér, a pont már „beért” */
    /* mobilon rövidebb és egyszerűbb: nincs gurulás és tárgy-felkapás (a csomag fent van, a pont kitelt) — a két utas felpattan, utána egy rövid gesztus */
    .mm-road .mm-ride, .mm-road .mm-body, .mm-road .mm-cp1, .mm-road .mm-road-lead, .mm-road .mm-cp1::after,
    .mm-road .mm-bike, .mm-road .mm-launch, .mm-road .mm-sag, .mm-road .mm-cargo, .mm-road .mm-item, .mm-road .mm-hop, .mm-road .mm-pulse { animation: none; }
    .mm-road .mm-arm1, .mm-road .mm-arm2, .mm-road .mm-gest, .mm-road .mm-rider { animation-delay: 1.8s; animation-duration: .75s; }
    .mm-road .mm-pill1 { animation: mmPlop .42s ease-out .8s both; }
    .mm-road .mm-pill2 { animation: mmPlop .42s ease-out 1.05s both; }
    .mm-road .mm-pill3 { animation: mmPlop .42s ease-out 1.3s both; }
    .mm-ride { transform: none; }
    .mm-road .mm-cp1 { background: var(--mm-color); opacity: calc(.55 * var(--mm-ink)); }
    .mm-road .mm-streaks { animation: none; opacity: .7; }
}
@media (max-height: 620px) { .mm-road { display: none; } }

/* ---------- csökkentett mozgás: minden a végállapotában ---------- */
@media (prefers-reduced-motion: reduce) {
    .mm-hero *, .mm-road *, .mm-div *, .mm-arc *, .mm-in::before, [class*="eyebrow"]::before, .ol-stage-no::after, .dq-body::after, .mm-cp1::after { animation: none !important; transition: none !important; }
    .mm-js .mm-arc:not(.mm-in) .mm-arc-dot { opacity: calc(.45 * var(--mm-ink)); }
    .mm-js body[data-mindset="start"] .mm-div:not(.mm-in) circle { fill-opacity: 1; }
    .mm-road .mm-cp1 { background: var(--mm-color); opacity: calc(.55 * var(--mm-ink)); }
    body[data-mindset="start"] .btn:hover svg { transform: none; }
}