/* صحنه‌های کوچک کنار عنوان هر بخش (templates/_scenes.html). آرام و تکرارشونده با مکث؛ کلیک روی صحنه = سورپرایز (.egg، kp.js).
   همه‌ی رنگ‌ها از توکن‌ها؛ با «کاهش حرکت» فقط تصویر ثابت. اعداد translate به واحد viewBox (۱۲۰×۴۸) هستند. */
.kp-scene{display:none}
h1 .kp-scene{display:inline-block;vertical-align:middle;margin-inline-start:var(--sp3);line-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.kp-scene svg{display:block;width:120px;height:48px;overflow:hidden}
.kp-scene *{transform-box:fill-box;transform-origin:center}
@media (max-width:640px){h1 .kp-scene svg{width:90px;height:36px}}

/* رنگ‌ها */
.kp-scene .p{fill:var(--paper);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.kp-scene .o{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kp-scene .thick{stroke-width:3}
.kp-scene .mutl{fill:none;stroke:var(--field);stroke-width:1.4;stroke-linecap:round}
.kp-scene .k{fill:var(--kraft);stroke:var(--kraft-ink);stroke-width:1.2;stroke-linejoin:round}
.kp-scene .tp{fill:none;stroke:var(--kraft-ink);stroke-width:1.2;stroke-dasharray:2 2}
.kp-scene .ink{fill:var(--ink)}
.kp-scene .r{fill:var(--stamp)}
.kp-scene .rr{fill:var(--stamp);opacity:.8}
.kp-scene .cy{fill:var(--cyan);opacity:.85}
.kp-scene .rs{fill:color-mix(in srgb,var(--paper) 70%,transparent);stroke:var(--stamp);stroke-width:2}
.kp-scene .rt{fill:var(--stamp);font:800 7px var(--font);text-anchor:middle}
.kp-scene .et{fill:var(--cyan);font:700 8px var(--font);text-anchor:middle}
.kp-scene .chk{fill:none;stroke:var(--stamp);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* سورپرایز عمومی: صحنه می‌پرد و عنصر .eg ظاهر می‌شود */
.kp-scene .eg{opacity:0}
.kp-scene.egg svg{animation:sc-hop .5s var(--ease-out)}
.kp-scene.egg .eg{animation:sc-eg 2.2s var(--ease-out) both}
.s-inbox.egg .eg,.s-proforma.egg .eg,.s-managers.egg .eg{animation:sc-stamp 2.2s var(--ease-out) both}
@keyframes sc-hop{30%{transform:translateY(-4px) rotate(-2deg)}60%{transform:translateY(1px)}}
@keyframes sc-eg{0%{opacity:0;transform:scale(.2)}15%{opacity:1;transform:scale(1.2)}25%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
@keyframes sc-stamp{0%{opacity:0;transform:scale(2.4) rotate(-22deg)}18%{opacity:1;transform:scale(1) rotate(-10deg)}22%{transform:scale(1.06) rotate(-10deg)}85%{opacity:1;transform:rotate(-10deg)}100%{opacity:0;transform:rotate(-10deg)}}
@keyframes sc-spin{to{transform:rotate(360deg)}}

/* خانه: سه پاکت روی هم چیده می‌شوند؛ بالایی گاهی تکان می‌خورد */
.s-home .c{animation:sc-drop .6s var(--ease-out) both}
.s-home .c2{animation-delay:.12s}
.s-home .c3{transform-origin:50% 100%;animation:sc-drop .6s var(--ease-out) .28s both,sc-wob 7s ease-in-out 2s infinite}
@keyframes sc-drop{from{transform:translateY(-40px);opacity:0}60%{transform:translateY(2px);opacity:1}}
@keyframes sc-wob{0%,86%,100%{transform:none}90%{transform:translateY(-6px) rotate(-8deg)}94%{transform:rotate(3deg)}97%{transform:rotate(-1deg)}}
.s-home.egg .c{animation:sc-jump .7s var(--ease-out) both}
.s-home.egg .c2{animation-delay:.08s}.s-home.egg .c3{animation-delay:.16s}
@keyframes sc-jump{40%{transform:translateY(-9px)}}

/* کارتابل: نامه‌ها یکی‌یکی داخل سینی می‌افتند */
.s-inbox .lt{animation:sc-mail 6s var(--ease) infinite both}
.s-inbox .l2{animation-delay:2s}.s-inbox .l3{animation-delay:4s}
@keyframes sc-mail{0%{transform:translateY(-34px) rotate(-10deg);opacity:0}8%{opacity:1}22%{transform:translateY(2px) rotate(0)}30%,100%{transform:translateY(20px);opacity:1}}

/* جستجو: ذره‌بین روی خطوط برگه می‌گردد */
.s-search .glass{fill:color-mix(in srgb,var(--cyan) 14%,transparent);stroke:var(--ink);stroke-width:2.2}
.s-search .hl{fill:color-mix(in srgb,var(--cyan) 35%,transparent)}
.s-search .mag{animation:sc-scan 7s ease-in-out infinite}
@keyframes sc-scan{0%,100%{transform:translate(4px,-6px)}20%{transform:translate(-14px,-2px)}40%{transform:translate(6px,6px)}60%{transform:translate(-12px,10px)}80%{transform:translate(2px,16px)}}
.s-search.egg .mag{animation:sc-found 2.2s var(--ease-out) both}
@keyframes sc-found{0%{transform:translate(4px,-6px)}30%,85%{transform:translate(-4px,6px) scale(1.15)}100%{transform:none}}

/* پیگیری: بسته از ایستگاهی به ایستگاه دیگر می‌رود */
.s-tracking .route{fill:none;stroke:var(--field);stroke-width:1.6;stroke-dasharray:3 3;animation:sc-march 1.2s linear infinite}
@keyframes sc-march{to{stroke-dashoffset:-12}}
.s-tracking .st{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.s-tracking .sa{fill:var(--kraft)}
.s-tracking .sb{animation:sc-st1 6s step-end infinite}.s-tracking .sc{animation:sc-st2 6s step-end infinite}.s-tracking .sd{animation:sc-st3 6s step-end infinite}
@keyframes sc-st1{0%{fill:var(--paper)}28%{fill:var(--kraft)}96%{fill:var(--paper)}}
@keyframes sc-st2{0%{fill:var(--paper)}52%{fill:var(--kraft)}96%{fill:var(--paper)}}
@keyframes sc-st3{0%{fill:var(--paper)}76%{fill:var(--kraft)}96%{fill:var(--paper)}}
.s-tracking .pk{animation:sc-route 6s var(--ease) infinite}
@keyframes sc-route{0%{transform:translate(0,0);opacity:0}5%{opacity:1}28%{transform:translate(-28px,-20px)}52%{transform:translate(-60px,0)}76%,90%{transform:translate(-90px,-20px);opacity:1}96%,100%{transform:translate(-90px,-20px);opacity:0}}
.s-tracking .eg{transform-origin:50% 100%}

/* گزارش: میله‌ها بالا می‌آیند و خط روند کشیده می‌شود */
.s-reports .bar{fill:var(--ink);transform-origin:50% 100%;animation:sc-grow .7s var(--ease-out) both,sc-breathe 8s ease-in-out 2s infinite}
.s-reports .b4{fill:var(--kraft)}
.s-reports .b2{animation-delay:.1s,2.1s}.s-reports .b3{animation-delay:.2s,2.2s}.s-reports .b4{animation-delay:.3s,2.3s}
@keyframes sc-grow{from{transform:scaleY(0)}}
@keyframes sc-breathe{0%,80%,100%{transform:scaleY(1)}88%{transform:scaleY(.82)}94%{transform:scaleY(1.06)}}
.s-reports .trend{fill:none;stroke:var(--stamp);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation:sc-dash 1s var(--ease-out) .6s both}
@keyframes sc-dash{from{stroke-dashoffset:100}}
.s-reports .b1{--to:2}.s-reports .b2{--to:.6}.s-reports .b3{--to:1.8}.s-reports .b4{--to:1.25}
.s-reports.egg .bar{animation:sc-shuffle 2s var(--ease) both}
.s-reports.egg .trend{opacity:0;transition:opacity .2s}
@keyframes sc-shuffle{40%,75%{transform:scaleY(var(--to))}}

/* اعلان‌ها: زنگ تکان می‌خورد و موج صدا */
.s-notifications .bell{transform-origin:50% 0;animation:sc-ring 5s ease-in-out infinite}
@keyframes sc-ring{0%,30%,100%{transform:rotate(0)}5%{transform:rotate(14deg)}10%{transform:rotate(-12deg)}15%{transform:rotate(8deg)}20%{transform:rotate(-5deg)}25%{transform:rotate(2deg)}}
.s-notifications .wave{fill:none;stroke:var(--kraft);stroke-width:1.8;stroke-linecap:round;opacity:0;animation:sc-wave 5s ease-out infinite}
.s-notifications .w2{animation-delay:.15s}
@keyframes sc-wave{0%{opacity:0}6%{opacity:1}26%,100%{opacity:0}}
.s-notifications.egg .plane{animation:sc-fly 2.2s var(--ease) both}
@keyframes sc-fly{0%{opacity:0;transform:translate(10px,10px)}10%{opacity:1}100%{opacity:1;transform:translate(-110px,-14px) rotate(-6deg)}}

/* پیش‌فاکتور: برگه از چاپگر بیرون می‌آید */
.s-proforma .slot{stroke:var(--kraft);stroke-width:2;stroke-linecap:round}
.s-proforma .led{fill:var(--ok);animation:sc-blink 1s steps(2,jump-none) infinite}
@keyframes sc-blink{50%{opacity:.25}}
.s-proforma .kr{stroke:var(--kraft-ink);stroke-width:2.2}
.s-proforma .rc{animation:sc-print 6s infinite}
@keyframes sc-print{0%{transform:translateY(-26px);animation-timing-function:steps(9,end)}40%{transform:translateY(0);animation-timing-function:ease}85%{transform:translateY(0);opacity:1}95%{transform:translateY(6px);opacity:0}100%{transform:translateY(-26px);opacity:0}}

/* ادیت طرح: قلم روی پاکت طرح می‌کشد و رنگ‌ها ظاهر می‌شوند */
.s-design_edit .draw{fill:none;stroke:var(--cyan);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:100;animation:sc-draw 7s var(--ease) infinite}
@keyframes sc-draw{0%{stroke-dashoffset:100}35%,85%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
.s-design_edit .pen{animation:sc-pen 7s var(--ease) infinite}
@keyframes sc-pen{0%,100%{transform:translate(-17px,9px)}12%{transform:translate(-12px,4px)}24%{transform:translate(-6px,6px)}35%{transform:translate(-2px,-1px)}45%,85%{transform:translate(6px,-6px)}}
.s-design_edit .sw{animation:sc-sw 7s var(--ease-out) infinite}
.s-design_edit .s2{animation-delay:.25s}.s-design_edit .s3{animation-delay:.5s}
@keyframes sc-sw{0%,38%{transform:scale(0)}44%{transform:scale(1.25)}48%,90%{transform:scale(1)}96%,100%{transform:scale(0)}}
.s-design_edit.egg .pkt{animation:sc-colors 2s steps(1,end) both}
@keyframes sc-colors{0%{fill:var(--kraft)}25%{fill:var(--cyan)}50%{fill:var(--stamp)}75%{fill:var(--kraft)}100%{fill:var(--paper)}}

/* کلیشه: غلتک جوهر رد می‌شود و کات‌های رنگی چاپ می‌شوند */
.s-cliche .cut{transform-origin:100% 50%;opacity:.9;animation:sc-cut 6s linear infinite}
.s-cliche .u1{animation-delay:.3s}.s-cliche .u2{animation-delay:1s}.s-cliche .u3{animation-delay:1.7s}.s-cliche .u4{animation-delay:2.4s}.s-cliche .u5{animation-delay:3.1s}
@keyframes sc-cut{0%{transform:scaleX(0)}8%{transform:scaleX(1)}85%{transform:scaleX(1);opacity:.9}95%,100%{transform:scaleX(1);opacity:0}}
.s-cliche .rl{animation:sc-roll 6s var(--ease) infinite}
@keyframes sc-roll{0%{transform:translateX(0);opacity:1}60%,68%{transform:translateX(-80px);opacity:1}78%{transform:translateX(-80px);opacity:0}88%{transform:translateX(0);opacity:0}100%{opacity:1}}
.s-cliche .rs2{animation:sc-spin 1.2s linear infinite reverse}
.s-cliche .spk{stroke:var(--paper);stroke-width:1.6}
.s-cliche.egg .rs2{animation-duration:.3s}

/* حواله خروج: کامیون به در کارخانه می‌رسد، راهبند بالا می‌رود و می‌رود */
.s-exit_voucher .road{stroke:var(--field);stroke-width:1.5;stroke-dasharray:6 4}
.s-exit_voucher .truck{animation:sc-truck 8s var(--ease) infinite}
@keyframes sc-truck{0%{transform:translateX(70px)}30%,48%{transform:translateX(0)}80%{transform:translateX(-110px)}81%,100%{transform:translateX(70px)}}
.s-exit_voucher .win{fill:var(--paper)}
.s-exit_voucher .wh{fill:var(--ink);stroke:var(--paper);stroke-width:1.5;stroke-dasharray:2 2.4;animation:sc-spin .7s linear infinite reverse}
.s-exit_voucher .armr{fill:var(--stamp)}
.s-exit_voucher .arm{transform-origin:100% 50%;animation:sc-arm 8s var(--ease) infinite}
@keyframes sc-arm{0%,32%{transform:rotate(0)}40%,74%{transform:rotate(80deg)}84%,100%{transform:rotate(0)}}
.s-exit_voucher .wave{fill:none;stroke:var(--stamp);stroke-width:1.6;stroke-linecap:round}
.s-exit_voucher.egg .truck{animation:sc-honk .5s ease 3}
@keyframes sc-honk{50%{transform:translateY(-2px)}}

/* سفارش: پاکت‌ها روی نوار نقاله می‌آیند و پرس رویشان پایین می‌آید */
.s-order .cb{animation:sc-conv 6s linear infinite}
.s-order .cb:nth-of-type(2){animation-delay:-2s}.s-order .cb:nth-of-type(3){animation-delay:-4s}
@keyframes sc-conv{from{transform:translateX(0)}to{transform:translateX(-130px)}}
.s-order .press{animation:sc-press 2s ease-in-out infinite}
@keyframes sc-press{0%,25%,45%,100%{transform:translateY(0)}35%{transform:translateY(9px)}}
.s-order .beltl{stroke:var(--ink);stroke-width:2;stroke-dasharray:4 3;animation:sc-beltm .32s linear infinite}
@keyframes sc-beltm{to{stroke-dashoffset:7}}
.s-order .gearc{fill:var(--paper);stroke:var(--ink);stroke-width:2.4;stroke-dasharray:2 2;animation:sc-spin 1s linear infinite reverse}

/* تنظیمات: دو چرخ‌دنده درگیر */
.s-settings .teeth{fill:none;stroke:var(--ink);stroke-width:5;stroke-dasharray:3.4 3}
.s-settings .teeth.sm{stroke-width:4;stroke-dasharray:3 2.6}
.s-settings .gA{animation:sc-spin 10s linear infinite}
.s-settings .gB{animation:sc-spin 6.9s linear infinite reverse}
.s-settings.egg .gA{animation-duration:1.2s}.s-settings.egg .gB{animation-duration:.83s}

/* گردش کار: نقطه از مرحله‌ای به مرحله‌ی بعد می‌رود */
.s-workflow .n1{fill:var(--kraft)}
.s-workflow .n2{animation:sc-n2 6s step-end infinite}.s-workflow .n3{animation:sc-n3 6s step-end infinite}
@keyframes sc-n2{0%{fill:var(--paper)}40%{fill:var(--kraft)}96%{fill:var(--paper)}}
@keyframes sc-n3{0%{fill:var(--paper)}80%{fill:var(--kraft)}96%{fill:var(--paper)}}
.s-workflow .dot{fill:var(--cyan);animation:sc-flow 6s var(--ease) infinite}
@keyframes sc-flow{0%,15%{transform:translateX(0);opacity:1}40%,55%{transform:translateX(-41px)}80%,92%{transform:translateX(-82px);opacity:1}100%{transform:translateX(-82px);opacity:0}}
.s-workflow.egg .dot{fill:var(--stamp);animation:sc-back 2s var(--ease) both}
@keyframes sc-back{from{transform:translateX(-82px)}to{transform:translateX(0)}}

/* مدیران فروش: امضا روی خط کشیده می‌شود */
.s-managers .sig{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation:sc-sign 8s var(--ease) infinite}
@keyframes sc-sign{0%{stroke-dashoffset:100}40%,88%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}

/* مشتری‌ها: چراغ پنجره‌های فروشگاه روشن می‌شود؛ سورپرایز: پاکت تحویل داده می‌شود */
.s-customers .aw{fill:var(--kraft);stroke:var(--kraft-ink);stroke-width:1.2;stroke-linejoin:round}
.s-customers .awl{fill:none;stroke:var(--kraft-ink);stroke-width:1}
.s-customers .wn{fill:var(--tint);stroke:var(--ink);stroke-width:1.2;animation:sc-lit 6s step-end infinite}
.s-customers .w2{animation-delay:.6s}.s-customers .w3{animation-delay:1.2s}
@keyframes sc-lit{0%{fill:var(--tint)}20%{fill:var(--kraft)}70%{fill:var(--tint)}}
.s-customers .door{fill:var(--ink);transform-origin:0 50%;transition:transform var(--t-mid) var(--ease)}
.s-customers.egg .door{transform:scaleX(.25)}
.s-customers.egg .cbx{animation:sc-deliver 2.2s var(--ease) both}
@keyframes sc-deliver{0%{opacity:0;transform:translateX(12px)}15%{opacity:1}70%{opacity:1;transform:translateX(-30px)}100%{opacity:0;transform:translateX(-30px) scale(.6)}}

@media (prefers-reduced-motion:reduce){.kp-scene svg,.kp-scene svg *{animation:none!important;transition:none!important}}