/* صفحه‌ی ورود با تم صنعتی (templates/auth/login_art.html) — الگو: صفحه‌ی ورود کارحامی کارتن.
   سمت راست = کارحامی (لوگو، فرم، تماس پشتیبانی)؛ سمت چپ = مشتری (لوگو، رنگ برند، خط تولید).
   همه‌ی حرکت‌ها فقط transform/opacity/stroke-dashoffset تا روی سیستم ضعیف هم روان باشد. */
* { box-sizing: border-box; font-family: 'Vazir', sans-serif; }
html, body { margin: 0; min-height: 100%; }
body { background: #f5f7fa; color: #0f1729; }

.la-wrap { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 2.25fr minmax(380px, 1fr); direction: ltr; }
.la-wrap > * { direction: rtl; }

/* ---------- فرم کارحامی (راست) ---------- */
.la-form { grid-column: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 32px 24px; }
.la-box { width: 100%; max-width: 360px; animation: laUp .7s cubic-bezier(.2,.8,.2,1) both; }
.la-head { text-align: center; margin-bottom: 28px; }
.la-logo { width: 60px; height: 70px; animation: laFloat 5s ease-in-out infinite; }
.la-head h1 { font-size: 1.4rem; font-weight: 800; margin: 14px 0 4px; letter-spacing: -.2px; }
.la-head p { margin: 0; color: #64748b; font-size: .86rem; }
.la-head p b { color: #0f1729; }
.la-label { display: block; font-size: .82rem; font-weight: 700; color: #334155; margin: 0 0 6px; }
.la-field { position: relative; display: flex; align-items: center; margin-bottom: 16px; background: #fff;
            border: 1px solid #e2e8f0; border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.la-field:focus-within { border-color: #2f7de1; box-shadow: 0 0 0 4px rgba(47,125,225,.12); }
.la-field > i { width: 44px; text-align: center; color: #a0abbb; font-size: .88rem; }
.la-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 12px 4px 12px 12px; font-size: .95rem; color: #0f1729; }
.la-eye { border: 0; background: none; color: #a0abbb; width: 42px; height: 42px; cursor: pointer; }
.la-eye:hover { color: #475569; }
.la-submit { width: 100%; margin-top: 8px; border: 0; border-radius: 12px; padding: 13px; font-size: .96rem; font-weight: 800; color: #fff;
             cursor: pointer; background: linear-gradient(135deg, #2f7de1 0%, #1c5fa8 100%);
             box-shadow: 0 10px 24px rgba(28,95,168,.25); transition: transform .15s, box-shadow .15s; }
.la-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(28,95,168,.3); }
.la-submit:active { transform: none; }
.la-submit i { margin-left: 6px; }
.la-hint { text-align: center; margin-top: 14px; font-size: .76rem; color: #94a3b8; }
.la-flash { border-radius: 10px; padding: 10px 14px; font-size: .84rem; margin-bottom: 16px; text-align: center; }
.la-flash.danger { background: #fee2e2; color: #991b1b; }
.la-flash.warning { background: #fef3c7; color: #92400e; }
.la-flash.success { background: #dcfce7; color: #166534; }
.la-flash.info { background: #dbeafe; color: #1e40af; }
.la-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; margin-top: 30px;
           padding-top: 16px; border-top: 1px solid #e8edf3; width: 100%; max-width: 360px; font-size: .76rem; }
.la-foot a { color: #8592a6; text-decoration: none; transition: color .2s; }
.la-foot a + a { border-right: 1px solid #e2e8f0; padding-right: 12px; margin-right: 12px; }
.la-foot a:hover { color: #2f7de1; }
.la-foot i { margin-left: 5px; font-size: .7rem; }

/* ---------- کارت مشتری (چپ) ---------- */
.la-art { grid-column: 1; grid-row: 1;
          --fg: #f3f5f8; --tx: #c9d0da; --mu: #8a94a3; --line: rgba(255,255,255,.08); --chip: rgba(255,255,255,.045);
          position: relative; overflow: hidden; color: var(--fg); margin: 14px 12px 14px 14px; border-radius: 22px;
          padding: 22px 32px 20px; display: flex; flex-direction: column; gap: 14px; min-height: calc(100vh - 28px);
          background: radial-gradient(70% 55% at 100% 0%, rgba(var(--kh-primary-rgb), .16), transparent 65%),
                      radial-gradient(60% 50% at 0% 100%, rgba(60,120,200,.10), transparent 70%),
                      linear-gradient(170deg, #22272f 0%, #181c22 55%, #111418 100%);
          box-shadow: 0 24px 60px rgba(10,12,18,.25); }
/* هدر مشتری: لوگو با ورود نرم، درخشش و حلقه‌ی رنگ برند؛ نام و شعار با آشکار شدن از راست و خط زیر دست‌کشیده */
.la-brand { display: flex; align-items: center; justify-content: center; gap: 18px; }
.la-mark { position: relative; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; height: 68px; padding: 8px 14px;
           background: #fff; border-radius: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.35);
           animation: laMarkIn .9s cubic-bezier(.2,.8,.2,1) both, laRing 5s 1.4s ease-out infinite; }
.la-mark img { height: 52px; display: block; }
.la-mark b { font-size: 1.8rem; color: var(--kh-primary); padding: 0 6px; }
.la-mark .shine { position: absolute; top: -40%; left: -50%; width: 34%; height: 180%; pointer-events: none;
                  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
                  transform: translateX(-120%) rotate(18deg); animation: laShine 7s 1.6s ease-in-out infinite; }
.la-brand-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.la-name { font-size: 1.45rem; font-weight: 800; line-height: 1.4; animation: laUp .8s .15s cubic-bezier(.2,.8,.2,1) both; }
.la-slogan { position: relative; align-self: flex-start; font-size: 1.08rem; font-weight: 300; color: #e4e9ef; line-height: 1.6; padding-bottom: 6px;
             animation: laReveal 1.1s .55s cubic-bezier(.65,0,.35,1) both; }
.la-slogan svg { position: absolute; right: 0; bottom: -2px; width: 100%; height: 9px; overflow: visible; }
.la-slogan path { fill: none; stroke: var(--kh-primary); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke;
                  stroke-dasharray: 210; stroke-dashoffset: 210; animation: laDraw 1s 1.4s cubic-bezier(.65,0,.35,1) forwards; }
.la-sub { font-size: .8rem; color: var(--mu); }

.la-stage { flex: 1 1 auto; min-height: 260px; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 12px;
            border-radius: 16px; background: rgba(0,0,0,.18); border: 1px solid var(--line); }
.la-hud { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.la-job { min-width: 0; display: flex; flex-direction: column; }
.la-job span { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-job em { font-style: normal; font-size: .72rem; color: var(--mu); }
.la-job span, .la-job em { transition: opacity .25s; }
.la-meter { text-align: left; flex-shrink: 0; }
.la-meter .lbl { display: block; font-size: .66rem; color: var(--mu); }
.la-meter .val b { font-size: 1.2rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.la-meter .val small { font-size: .7rem; color: var(--mu); }
.la-svg { flex: 1 1 auto; width: 100%; min-height: 150px; display: block; }

/* خط زمانی مراحل */
.la-tl { list-style: none; display: flex; margin: 4px 0 0; padding: 0; position: relative; }
.la-tl li { flex: 1; position: relative; text-align: center; padding-top: 18px; font-size: .7rem; color: var(--mu);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .4s; }
.la-tl li::before { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: var(--line); transition: background .4s; }
.la-tl li:first-child::before { display: none; }
.la-tl li::after { content: ""; position: absolute; top: 1px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
                   background: #2a3038; border: 2px solid #3a424d; transition: background .4s, border-color .4s, box-shadow .4s; }
.la-tl li.done { color: var(--tx); }
.la-tl li.done::before, .la-tl li.on::before { background: rgba(var(--kh-primary-rgb), .7); }
.la-tl li.done::after { background: var(--kh-primary); border-color: var(--kh-primary); }
.la-tl li.on { color: #fff; font-weight: 700; }
.la-tl li.on::after { background: #fff; border-color: var(--kh-primary); box-shadow: 0 0 0 5px rgba(var(--kh-primary-rgb), .22); }
.la-scene-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.la-scene-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); transition: width .4s, background .4s; }
.la-scene-dots i.on { width: 18px; background: rgba(255,255,255,.55); }

.la-copy { text-align: center; }
.la-copy h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; line-height: 1.6; }
.la-accent { color: var(--kh-primary); }
.la-ticker { position: relative; height: 26px; }
.la-ticker .f { position: absolute; inset: 0; display: flex; gap: 10px; align-items: center; justify-content: center; font-size: .88rem; color: var(--tx);
                opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
.la-ticker .f.on { opacity: 1; transform: none; }
.la-ticker .f i { color: var(--kh-primary); width: 18px; text-align: center; }

/* ---------- صحنه‌های SVG ---------- */
.la-scene { opacity: 0; transition: opacity 1s ease; }
.la-scene.on { opacity: 1; }
.la-scene:not(.on) * { animation-play-state: paused !important; }
.la-svg .heat { animation: laHeat 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
.la-svg .grains { animation: laGrain 1.6s linear infinite; }
.la-svg .led { animation: laLed 2.4s steps(1) infinite; }
.la-svg .hmi-line { stroke-dasharray: 3 2; animation: laDash 2s linear infinite; }
.la-svg .spin { transform-box: fill-box; transform-origin: center; animation: laSpin 1.6s linear infinite; }
.la-svg .spin.fast { animation-duration: .45s; }
.la-svg .spin.slow { animation-duration: 14s; }
.la-svg .roll { animation: laRoll 7s linear infinite; }
.la-svg .wave { animation: laWave 3s linear infinite; }
.la-svg .bub { animation: laBub 3.4s ease-in infinite; animation-delay: calc(var(--i) * -.7s); }
.la-svg .tread { animation: laDash 1s linear infinite reverse; }
.la-svg .tread.rev { animation-direction: normal; }
.la-svg .saw { animation: laSaw 6s cubic-bezier(.45,0,.25,1) infinite; }
.la-svg .dust circle { opacity: 0; animation: laDust 6s ease-out infinite; animation-delay: calc(var(--i) * .06s); }
.la-svg .spin.slow2 { animation-duration: 4s; }
.la-svg .vortex { animation-duration: .9s; }
.la-svg .flow { animation: laDash 1.1s linear infinite; }
.la-svg .pour { animation: laDash .5s linear infinite; }
.la-svg .puff { transform-box: fill-box; transform-origin: center; animation: laPuff 2.2s ease-out infinite; animation-delay: calc(var(--i) * -.7s); }
.la-svg .drop { opacity: 0; animation: laDash .6s linear infinite, laBatch 9s ease-in-out infinite; }
.la-svg .level { transform-box: fill-box; transform-origin: bottom; animation: laLevel 12s ease-in-out infinite alternate; }
/* op:begin — ساخته‌ی scripts/gen_login_operator.py؛ دستی ویرایش نشود */
.la-svg .op-lean{animation:opLean 12s linear infinite}
.la-svg .op-head{animation:opHead 12s linear infinite}
.la-svg .op-sh-n{animation:opShN 12s linear infinite}
.la-svg .op-el-n{animation:opElN 12s linear infinite}
.la-svg .op-sh-f{animation:opShF 12s linear infinite}
.la-svg .op-el-f{animation:opElF 12s linear infinite}
.la-svg .op-hip-n{animation:opHipN 12s linear infinite}
.la-svg .op-kn-n{animation:opKnN 12s linear infinite}
.la-svg .op-an-n{animation:opAnN 12s linear infinite}
.la-svg .op-hip-f{animation:opHipF 12s linear infinite}
.la-svg .op-kn-f{animation:opKnF 12s linear infinite}
.la-svg .op-an-f{animation:opAnF 12s linear infinite}
.la-svg .op-root{animation:opRoot 12s linear infinite}
.la-svg .gate{animation:laGate 12s cubic-bezier(.45,0,.25,1) infinite}
.la-svg .mold{animation:laMold 12s cubic-bezier(.45,0,.25,1) infinite}
.la-svg .inmold{animation:laInMold 12s linear infinite}
.la-svg .carried-n{animation:laCar 12s linear infinite}
.la-svg .placed{animation:laPlaced 12s linear infinite}
.la-svg .op-btn{animation:laBtn 12s linear infinite}
@keyframes opLean{0%{transform:rotate(-2deg)}6%{transform:rotate(-1deg)}13%{transform:rotate(-2deg)}18%{transform:rotate(-5deg)}43%{transform:rotate(-3deg)}44.5%{transform:rotate(-4.9deg)}47.5%{transform:rotate(-13.1deg)}49%{transform:rotate(-15deg)}52.5%{transform:rotate(-14.3deg)}57.5%{transform:rotate(-4.2deg)}66%{transform:rotate(-3deg)}67%{transform:rotate(-4.5deg)}68%{transform:rotate(-8.4deg)}71.5%{transform:rotate(-26.8deg)}73%{transform:rotate(-30deg)}77%{transform:rotate(-29.1deg)}78%{transform:rotate(-23.5deg)}80%{transform:rotate(-8.2deg)}81%{transform:rotate(-5deg)}93.5%{transform:rotate(-2deg)}100%{transform:rotate(-2deg)}}
@keyframes opHead{0%{transform:rotate(2deg)}6%{transform:rotate(-2deg)}12%{transform:rotate(1.8deg)}20.5%{transform:rotate(3deg)}23.5%{transform:rotate(0.8deg)}26.5%{transform:rotate(-3.8deg)}29.5%{transform:rotate(-4deg)}33%{transform:rotate(-1deg)}43.5%{transform:rotate(-1.8deg)}48%{transform:rotate(5.4deg)}51.5%{transform:rotate(6deg)}53%{transform:rotate(4.6deg)}57.5%{transform:rotate(-3.8deg)}62%{transform:rotate(-2deg)}66%{transform:rotate(-7deg)}67.5%{transform:rotate(-4.5deg)}71.5%{transform:rotate(11.5deg)}73%{transform:rotate(14deg)}77%{transform:rotate(13.5deg)}80.5%{transform:rotate(-0.5deg)}83.5%{transform:rotate(-3.8deg)}86%{transform:rotate(-4deg)}88%{transform:rotate(-0.4deg)}90.5%{transform:rotate(0.9deg)}100%{transform:rotate(2deg)}}
@keyframes opShN{0%{transform:rotate(-10.2deg)}6%{transform:rotate(-11.2deg)}13%{transform:rotate(-10.2deg)}15%{transform:rotate(-16.8deg)}18%{transform:rotate(-21.6deg)}18.5%{transform:rotate(-20.3deg)}19%{transform:rotate(-16.4deg)}20%{transform:rotate(-4.7deg)}20.5%{transform:rotate(-1.9deg)}23%{transform:rotate(-8.6deg)}23.5%{transform:rotate(-17deg)}24%{transform:rotate(-30deg)}24.5%{transform:rotate(-38.2deg)}25%{transform:rotate(-27.3deg)}25.5%{transform:rotate(23.9deg)}26%{transform:rotate(66.9deg)}26.5%{transform:rotate(88.9deg)}27%{transform:rotate(96.4deg)}29.5%{transform:rotate(96.4deg)}30%{transform:rotate(86.8deg)}30.5%{transform:rotate(58.5deg)}31%{transform:rotate(4.9deg)}31.5%{transform:rotate(-31.6deg)}32%{transform:rotate(-30.7deg)}32.5%{transform:rotate(-19.1deg)}33%{transform:rotate(-11.3deg)}43%{transform:rotate(-11.3deg)}44.5%{transform:rotate(-17.8deg)}45%{transform:rotate(-14.8deg)}45.5%{transform:rotate(-5deg)}46%{transform:rotate(12.6deg)}47%{transform:rotate(56.7deg)}47.5%{transform:rotate(76.1deg)}48%{transform:rotate(92.2deg)}48.5%{transform:rotate(104.1deg)}49%{transform:rotate(108.9deg)}51.5%{transform:rotate(108.9deg)}52%{transform:rotate(107.7deg)}53%{transform:rotate(100.1deg)}56%{transform:rotate(68.3deg)}57%{transform:rotate(61.1deg)}57.5%{transform:rotate(59deg)}58.5%{transform:rotate(58.5deg)}62%{transform:rotate(64.3deg)}63%{transform:rotate(62.6deg)}65%{transform:rotate(54.8deg)}66.5%{transform:rotate(51.5deg)}67%{transform:rotate(47.5deg)}67.5%{transform:rotate(41.1deg)}69%{transform:rotate(15.7deg)}69.5%{transform:rotate(9.5deg)}70%{transform:rotate(6.3deg)}70.5%{transform:rotate(5.8deg)}71%{transform:rotate(7.4deg)}72.5%{transform:rotate(15.7deg)}73%{transform:rotate(16.6deg)}76.5%{transform:rotate(16.6deg)}77%{transform:rotate(15.5deg)}77.5%{transform:rotate(12.5deg)}79.5%{transform:rotate(-4.2deg)}80.5%{transform:rotate(-8.7deg)}81%{transform:rotate(-9.3deg)}81.5%{transform:rotate(-19.3deg)}82%{transform:rotate(-31.5deg)}82.5%{transform:rotate(-19.1deg)}83%{transform:rotate(44deg)}83.5%{transform:rotate(83.6deg)}84%{transform:rotate(96.4deg)}86%{transform:rotate(96.4deg)}86.5%{transform:rotate(77.5deg)}87%{transform:rotate(11.9deg)}87.5%{transform:rotate(-39deg)}88%{transform:rotate(-25.9deg)}88.5%{transform:rotate(-9.6deg)}90.5%{transform:rotate(-4.5deg)}91%{transform:rotate(-3.9deg)}91.5%{transform:rotate(-5.9deg)}92.5%{transform:rotate(-14.5deg)}93%{transform:rotate(-17.5deg)}93.5%{transform:rotate(-18.6deg)}96%{transform:rotate(-19.4deg)}96.5%{transform:rotate(-18.6deg)}98%{transform:rotate(-11.4deg)}98.5%{transform:rotate(-10.2deg)}100%{transform:rotate(-10.2deg)}}
@keyframes opElN{0%{transform:rotate(33.5deg)}13%{transform:rotate(33.5deg)}16%{transform:rotate(35.4deg)}19%{transform:rotate(40.8deg)}20.5%{transform:rotate(34.2deg)}23%{transform:rotate(38deg)}23.5%{transform:rotate(55.8deg)}24.5%{transform:rotate(118.9deg)}25%{transform:rotate(143.8deg)}25.5%{transform:rotate(145.6deg)}26.5%{transform:rotate(106.8deg)}27%{transform:rotate(98.3deg)}29.5%{transform:rotate(98.3deg)}30%{transform:rotate(108.6deg)}30.5%{transform:rotate(130.6deg)}31%{transform:rotate(146deg)}31.5%{transform:rotate(131.2deg)}32.5%{transform:rotate(66.9deg)}33%{transform:rotate(49.1deg)}43%{transform:rotate(49.1deg)}43.5%{transform:rotate(55deg)}44%{transform:rotate(68.6deg)}45%{transform:rotate(98.9deg)}45.5%{transform:rotate(109.3deg)}46%{transform:rotate(112.9deg)}46.5%{transform:rotate(108.4deg)}47%{transform:rotate(97.2deg)}48.5%{transform:rotate(50.8deg)}49%{transform:rotate(44.2deg)}51.5%{transform:rotate(44.2deg)}52%{transform:rotate(46.1deg)}52.5%{transform:rotate(51deg)}55%{transform:rotate(88.5deg)}56%{transform:rotate(101.2deg)}57%{transform:rotate(110deg)}57.5%{transform:rotate(112.5deg)}58.5%{transform:rotate(113deg)}61.5%{transform:rotate(105.1deg)}62.5%{transform:rotate(105.3deg)}65%{transform:rotate(113.9deg)}66.5%{transform:rotate(116.5deg)}68%{transform:rotate(124.7deg)}68.5%{transform:rotate(126deg)}69%{transform:rotate(125deg)}69.5%{transform:rotate(121.4deg)}70%{transform:rotate(115.4deg)}72%{transform:rotate(83deg)}72.5%{transform:rotate(77.6deg)}73%{transform:rotate(75.5deg)}76.5%{transform:rotate(75.5deg)}77.5%{transform:rotate(73.3deg)}78.5%{transform:rotate(67.2deg)}80%{transform:rotate(53.9deg)}80.5%{transform:rotate(50.4deg)}81%{transform:rotate(49.1deg)}81.5%{transform:rotate(72deg)}82%{transform:rotate(110.9deg)}82.5%{transform:rotate(142.3deg)}83%{transform:rotate(137.8deg)}83.5%{transform:rotate(111.8deg)}84%{transform:rotate(98.3deg)}86%{transform:rotate(98.3deg)}86.5%{transform:rotate(117.9deg)}87%{transform:rotate(147.7deg)}87.5%{transform:rotate(124.7deg)}88%{transform:rotate(74.3deg)}88.5%{transform:rotate(38deg)}91%{transform:rotate(34.2deg)}92.5%{transform:rotate(36.9deg)}93.5%{transform:rotate(35.1deg)}97%{transform:rotate(35.3deg)}100%{transform:rotate(33.5deg)}}
@keyframes opShF{0%{transform:rotate(-14.8deg)}6%{transform:rotate(-15.8deg)}13%{transform:rotate(-14.8deg)}13.5%{transform:rotate(-13.8deg)}15%{transform:rotate(-4.4deg)}15.5%{transform:rotate(-2.9deg)}18%{transform:rotate(-1.6deg)}18.5%{transform:rotate(-3.9deg)}19.5%{transform:rotate(-13.6deg)}20%{transform:rotate(-16.3deg)}20.5%{transform:rotate(-17.1deg)}23%{transform:rotate(-12.8deg)}43%{transform:rotate(-13.8deg)}44.5%{transform:rotate(-11.4deg)}48%{transform:rotate(1.1deg)}49%{transform:rotate(2.4deg)}51.5%{transform:rotate(2.4deg)}52%{transform:rotate(-0.3deg)}53.5%{transform:rotate(-19deg)}54%{transform:rotate(-23.1deg)}54.5%{transform:rotate(-24.1deg)}55%{transform:rotate(-20.8deg)}55.5%{transform:rotate(-11.8deg)}56.5%{transform:rotate(16.4deg)}57%{transform:rotate(28.4deg)}57.5%{transform:rotate(36.1deg)}58%{transform:rotate(38.8deg)}62%{transform:rotate(45.5deg)}63%{transform:rotate(43.6deg)}65%{transform:rotate(35deg)}66.5%{transform:rotate(30.9deg)}67%{transform:rotate(24.9deg)}67.5%{transform:rotate(15.5deg)}68.5%{transform:rotate(-8.2deg)}69%{transform:rotate(-16.8deg)}69.5%{transform:rotate(-20.7deg)}70%{transform:rotate(-20.2deg)}70.5%{transform:rotate(-16.5deg)}72.5%{transform:rotate(7.7deg)}73%{transform:rotate(9.9deg)}77%{transform:rotate(9.1deg)}78%{transform:rotate(4.1deg)}80%{transform:rotate(-9.2deg)}81%{transform:rotate(-11.8deg)}88.5%{transform:rotate(-13.8deg)}91%{transform:rotate(-19.1deg)}92%{transform:rotate(-17deg)}93%{transform:rotate(-11.9deg)}93.5%{transform:rotate(-10.6deg)}96%{transform:rotate(-7.9deg)}98%{transform:rotate(-14.2deg)}100%{transform:rotate(-14.8deg)}}
@keyframes opElF{0%{transform:rotate(35.1deg)}14%{transform:rotate(35.9deg)}15.5%{transform:rotate(34.2deg)}19%{transform:rotate(39.8deg)}19.5%{transform:rotate(39deg)}20.5%{transform:rotate(34.5deg)}43%{transform:rotate(35.1deg)}47.5%{transform:rotate(37.8deg)}51.5%{transform:rotate(38deg)}52%{transform:rotate(43.6deg)}52.5%{transform:rotate(56.3deg)}54%{transform:rotate(102.1deg)}54.5%{transform:rotate(115.4deg)}55%{transform:rotate(126.1deg)}55.5%{transform:rotate(133.1deg)}56%{transform:rotate(135.7deg)}56.5%{transform:rotate(134.5deg)}57.5%{transform:rotate(128.4deg)}58%{transform:rotate(127.2deg)}62%{transform:rotate(121.8deg)}66.5%{transform:rotate(129.5deg)}68%{transform:rotate(136.6deg)}68.5%{transform:rotate(135.5deg)}69%{transform:rotate(130.7deg)}69.5%{transform:rotate(122.5deg)}70.5%{transform:rotate(99.2deg)}72%{transform:rotate(59.2deg)}72.5%{transform:rotate(49.2deg)}73%{transform:rotate(45.1deg)}77%{transform:rotate(44.8deg)}80%{transform:rotate(36.5deg)}81%{transform:rotate(35.1deg)}91%{transform:rotate(34.5deg)}92.5%{transform:rotate(38.3deg)}100%{transform:rotate(35.1deg)}}
@keyframes opHipN{0%{transform:rotate(15.3deg)}6%{transform:rotate(12.8deg)}13%{transform:rotate(15.3deg)}13.5%{transform:rotate(18.7deg)}14.5%{transform:rotate(31.4deg)}15%{transform:rotate(36deg)}15.5%{transform:rotate(37.9deg)}16.5%{transform:rotate(34.9deg)}18%{transform:rotate(22deg)}21%{transform:rotate(19.4deg)}23%{transform:rotate(15.7deg)}34%{transform:rotate(15.6deg)}43%{transform:rotate(12.7deg)}48.5%{transform:rotate(15.6deg)}66%{transform:rotate(15.7deg)}67.5%{transform:rotate(18.1deg)}71%{transform:rotate(28deg)}73%{transform:rotate(30.4deg)}77%{transform:rotate(30deg)}78%{transform:rotate(27.3deg)}80.5%{transform:rotate(16.4deg)}81%{transform:rotate(15.7deg)}88.5%{transform:rotate(15.7deg)}90.5%{transform:rotate(19.4deg)}93.5%{transform:rotate(22deg)}95%{transform:rotate(34.9deg)}96%{transform:rotate(37.9deg)}96.5%{transform:rotate(36deg)}97%{transform:rotate(31.4deg)}98%{transform:rotate(18.7deg)}98.5%{transform:rotate(15.3deg)}100%{transform:rotate(15.3deg)}}
@keyframes opKnN{0%{transform:rotate(-19.1deg)}6%{transform:rotate(-14.1deg)}13%{transform:rotate(-19.1deg)}13.5%{transform:rotate(-24.5deg)}14.5%{transform:rotate(-41.9deg)}15%{transform:rotate(-47.4deg)}15.5%{transform:rotate(-49.4deg)}16%{transform:rotate(-46.9deg)}16.5%{transform:rotate(-40.2deg)}17%{transform:rotate(-30.2deg)}17.5%{transform:rotate(-17.8deg)}18%{transform:rotate(-8.3deg)}19.5%{transform:rotate(-13.5deg)}22.5%{transform:rotate(-17deg)}34%{transform:rotate(-16.8deg)}43%{transform:rotate(-10.9deg)}48.5%{transform:rotate(-16.8deg)}66%{transform:rotate(-16.9deg)}67%{transform:rotate(-19deg)}71%{transform:rotate(-36.5deg)}73%{transform:rotate(-39.8deg)}77%{transform:rotate(-39.2deg)}78%{transform:rotate(-35.4deg)}80.5%{transform:rotate(-18.2deg)}81%{transform:rotate(-16.9deg)}89.5%{transform:rotate(-16.8deg)}92%{transform:rotate(-13.5deg)}93.5%{transform:rotate(-8.3deg)}94%{transform:rotate(-17.8deg)}94.5%{transform:rotate(-30.2deg)}95%{transform:rotate(-40.2deg)}95.5%{transform:rotate(-46.9deg)}96%{transform:rotate(-49.4deg)}96.5%{transform:rotate(-47.4deg)}97%{transform:rotate(-41.9deg)}98%{transform:rotate(-24.5deg)}98.5%{transform:rotate(-19.1deg)}100%{transform:rotate(-19.1deg)}}
@keyframes opAnN{0%{transform:rotate(3.8deg)}6%{transform:rotate(1.3deg)}14%{transform:rotate(5.1deg)}16.5%{transform:rotate(-1.6deg)}18%{transform:rotate(-13.7deg)}20%{transform:rotate(-6deg)}21%{transform:rotate(-4.5deg)}22%{transform:rotate(-0.7deg)}23%{transform:rotate(1.2deg)}34%{transform:rotate(1.2deg)}43%{transform:rotate(-1.8deg)}48.5%{transform:rotate(1.2deg)}66%{transform:rotate(1.2deg)}70.5%{transform:rotate(7.9deg)}73%{transform:rotate(9.4deg)}77.5%{transform:rotate(8.8deg)}81%{transform:rotate(1.2deg)}89%{transform:rotate(0.7deg)}90.5%{transform:rotate(-4.5deg)}91.5%{transform:rotate(-6deg)}93.5%{transform:rotate(-13.7deg)}94.5%{transform:rotate(-4.8deg)}95.5%{transform:rotate(0.3deg)}97.5%{transform:rotate(5.1deg)}100%{transform:rotate(3.8deg)}}
@keyframes opHipF{0%{transform:rotate(3.3deg)}6%{transform:rotate(0.9deg)}13.5%{transform:rotate(3deg)}16%{transform:rotate(-1deg)}18%{transform:rotate(-8.6deg)}18.5%{transform:rotate(-5.2deg)}19.5%{transform:rotate(6.2deg)}20%{transform:rotate(10.2deg)}20.5%{transform:rotate(11.8deg)}21.5%{transform:rotate(9.7deg)}23%{transform:rotate(0.8deg)}34%{transform:rotate(0.7deg)}43%{transform:rotate(-2.1deg)}48.5%{transform:rotate(0.8deg)}66%{transform:rotate(0.8deg)}67%{transform:rotate(2.2deg)}71%{transform:rotate(14.3deg)}73%{transform:rotate(16.8deg)}77%{transform:rotate(16.4deg)}78%{transform:rotate(13.5deg)}80.5%{transform:rotate(1.7deg)}81%{transform:rotate(0.8deg)}88.5%{transform:rotate(0.8deg)}90%{transform:rotate(9.7deg)}91%{transform:rotate(11.8deg)}91.5%{transform:rotate(10.2deg)}92%{transform:rotate(6.2deg)}93%{transform:rotate(-5.2deg)}93.5%{transform:rotate(-8.6deg)}95.5%{transform:rotate(-1deg)}98%{transform:rotate(3deg)}100%{transform:rotate(3.3deg)}}
@keyframes opKnF{0%{transform:rotate(-19.1deg)}6%{transform:rotate(-14.1deg)}14%{transform:rotate(-19.5deg)}16.5%{transform:rotate(-19.4deg)}18%{transform:rotate(-16.4deg)}18.5%{transform:rotate(-22.7deg)}19.5%{transform:rotate(-42.4deg)}20%{transform:rotate(-48.8deg)}20.5%{transform:rotate(-51.2deg)}21%{transform:rotate(-48.9deg)}21.5%{transform:rotate(-42.7deg)}22.5%{transform:rotate(-23.2deg)}23%{transform:rotate(-16.9deg)}34%{transform:rotate(-16.8deg)}43%{transform:rotate(-10.9deg)}48.5%{transform:rotate(-16.8deg)}66%{transform:rotate(-16.9deg)}67%{transform:rotate(-19.5deg)}69.5%{transform:rotate(-33.6deg)}71%{transform:rotate(-40.4deg)}73%{transform:rotate(-44.3deg)}77%{transform:rotate(-43.6deg)}78%{transform:rotate(-39.1deg)}80.5%{transform:rotate(-18.6deg)}81%{transform:rotate(-16.9deg)}88.5%{transform:rotate(-16.9deg)}89%{transform:rotate(-23.2deg)}90%{transform:rotate(-42.7deg)}90.5%{transform:rotate(-48.9deg)}91%{transform:rotate(-51.2deg)}91.5%{transform:rotate(-48.8deg)}92%{transform:rotate(-42.4deg)}93%{transform:rotate(-22.7deg)}93.5%{transform:rotate(-16.4deg)}95%{transform:rotate(-19.4deg)}100%{transform:rotate(-19.1deg)}}
@keyframes opAnF{0%{transform:rotate(15.8deg)}6%{transform:rotate(13.1deg)}13%{transform:rotate(15.8deg)}16%{transform:rotate(20.4deg)}19.5%{transform:rotate(29.4deg)}21%{transform:rotate(28.2deg)}21.5%{transform:rotate(26.1deg)}23%{transform:rotate(16.1deg)}34%{transform:rotate(16.1deg)}43%{transform:rotate(13deg)}48.5%{transform:rotate(16.1deg)}66%{transform:rotate(16.1deg)}70.5%{transform:rotate(25.3deg)}73%{transform:rotate(27.5deg)}77.5%{transform:rotate(26.6deg)}81%{transform:rotate(16.1deg)}88.5%{transform:rotate(16.1deg)}90%{transform:rotate(26.1deg)}90.5%{transform:rotate(28.2deg)}92%{transform:rotate(29.4deg)}95.5%{transform:rotate(20.4deg)}98%{transform:rotate(16.2deg)}100%{transform:rotate(15.8deg)}}
@keyframes opRoot{0%{transform:translate(544px,213.5px)}6%{transform:translate(544px,213px)}13%{transform:translate(544px,213.5px)}13.5%{transform:translate(543.5px,213.6px)}15%{transform:translate(539.5px,214.1px)}16%{transform:translate(538.1px,214.4px)}17.5%{transform:translate(530.9px,215.8px)}18%{transform:translate(530px,216px)}18.5%{transform:translate(529.3px,215.8px)}20%{transform:translate(523.7px,214.7px)}21%{transform:translate(522.3px,214.4px)}22.5%{transform:translate(516.7px,213.6px)}23%{transform:translate(516px,213.5px)}34%{transform:translate(516px,213.5px)}43%{transform:translate(516px,213px)}48.5%{transform:translate(516px,213.5px)}66%{transform:translate(516px,213.5px)}67.5%{transform:translate(516.5px,214px)}71%{transform:translate(519.2px,217.1px)}73%{transform:translate(520px,218px)}77%{transform:translate(519.9px,217.8px)}78%{transform:translate(519px,216.8px)}80%{transform:translate(516.5px,214.1px)}81%{transform:translate(516px,213.5px)}88.5%{transform:translate(516px,213.5px)}89%{transform:translate(516.7px,213.6px)}90.5%{transform:translate(522.3px,214.4px)}91.5%{transform:translate(523.7px,214.7px)}93%{transform:translate(529.3px,215.8px)}93.5%{transform:translate(530px,216px)}94%{transform:translate(530.9px,215.8px)}95.5%{transform:translate(538.1px,214.4px)}96.5%{transform:translate(539.5px,214.1px)}98%{transform:translate(543.5px,213.6px)}98.5%{transform:translate(544px,213.5px)}100%{transform:translate(544px,213.5px)}}
@keyframes laGate{0%,30%{transform:translateX(0);opacity:1}38%,86%{transform:translateX(112px);opacity:.45}92%,100%{transform:translateX(0);opacity:1}}
@keyframes laMold{0%,34%{transform:translateX(0)}44%,88%{transform:translateX(60px)}94%,100%{transform:translateX(0)}}
@keyframes laInMold{0%,43%{opacity:0}44%,51%{opacity:1}51.5%,100%{opacity:0}}
@keyframes laCar{0%,51%{opacity:0}51.5%,76%{opacity:1}76.5%,100%{opacity:0}}
@keyframes laPlaced{0%,76%{opacity:0}76.5%,97%{opacity:1}98%,100%{opacity:0}}
@keyframes laBtn{0%,27%{opacity:.25}28%,31%{opacity:1}33%,84%{opacity:.25}85%,88%{opacity:1}90%,100%{opacity:.25}}
/* op:end */
.la-svg .traverse { animation: laTraverse 5s ease-in-out infinite; }

@keyframes laUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes laFloat { 50% { transform: translateY(-5px); } }
@keyframes laPulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(61,220,132,0); } }
@keyframes laHeat { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes laGrain { from { transform: translateY(0); } to { transform: translateY(10px); } }
@keyframes laLed { 0%, 85% { opacity: 1; } 86%, 100% { opacity: .25; } }
@keyframes laSpin { to { transform: rotate(360deg); } }
@keyframes laDash { to { stroke-dashoffset: -18; } }
@keyframes laRoll { from { transform: translateX(0); } to { transform: translateX(240px); } }
@keyframes laWave { from { transform: translateX(0); } to { transform: translateX(40px); } }
@keyframes laBub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-50px); opacity: 0; } }
@keyframes laSaw { 0%, 55% { transform: translateY(0); } 70%, 78% { transform: translateY(42px); } 92%, 100% { transform: translateY(0); } }
@keyframes laDust { 0%, 66% { opacity: 0; transform: translateY(0); } 70% { opacity: .9; } 88% { opacity: 0; transform: translateY(30px); } 100% { opacity: 0; } }
@keyframes laMarkIn { from { opacity: 0; transform: scale(.86) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes laRing { 0% { box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 0 rgba(var(--kh-primary-rgb), .5); }
                    40%, 100% { box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 14px rgba(var(--kh-primary-rgb), 0); } }
@keyframes laShine { 0% { transform: translateX(-120%) rotate(18deg); } 22%, 100% { transform: translateX(520%) rotate(18deg); } }
@keyframes laReveal { from { clip-path: inset(0 0 0 100%); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes laDraw { to { stroke-dashoffset: 0; } }
@keyframes laPuff { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: .9; } 100% { transform: scale(2.2) translateY(-6px); opacity: 0; } }
@keyframes laBatch { 0%, 8% { opacity: 0; } 12%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes laLevel { from { transform: scaleY(.35); } to { transform: scaleY(.9); } }
@keyframes laTraverse { 0%, 100% { transform: translateX(-22px); } 50% { transform: translateX(22px); } }

/* ---------- واکنش‌گرا ---------- */
@media (max-height: 720px) { .la-art { gap: 10px; padding-top: 16px; } .la-copy h2 { font-size: 1.1rem; margin-bottom: 2px; } }
@media (max-width: 1200px) { .la-tl li { font-size: .62rem; } }
@media (max-width: 1100px) and (min-width: 861px) { .la-wrap { grid-template-columns: 1.35fr minmax(340px, 1fr); } .la-art { padding: 18px 20px 16px; } }
@media (max-width: 860px) {
    .la-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .la-form, .la-art { grid-column: 1; }
    .la-art { grid-row: 1; min-height: 0; margin: 0; border-radius: 0 0 20px 20px; padding: 12px 14px 10px; gap: 8px; }
    .la-form { grid-row: 2; padding: 22px 16px 28px; justify-content: flex-start; }
    .la-copy, .la-meter, .la-tl, .la-scene-dots, .la-slogan svg, .la-sub { display: none; }
    .la-mark { height: 48px; padding: 5px 10px; border-radius: 12px; } .la-mark img { height: 38px; }
    .la-name { font-size: 1.05rem; } .la-slogan { font-size: .85rem; padding-bottom: 0; }
    .la-stage { min-height: 0; padding: 8px 10px; }
    .la-svg { height: 160px; min-height: 0; flex: 0 0 auto; }
    .la-head { margin-bottom: 18px; }
    .la-logo { width: 46px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
    .la-svg *, .la-logo, .la-box, .la-mark, .la-mark .shine, .la-name, .la-slogan { animation: none !important; }
    .la-slogan path { stroke-dashoffset: 0; }
}
.la-art.paused * { animation-play-state: paused !important; }