/* Mr Teacher Academy 2.3.0 — animated app phone on the homepage (see app-phone.js). */
.mta-phone-wrap[data-mtx]{flex-direction:column;align-items:center;perspective:1300px;perspective-origin:50% 40%}
.mta-phone.mtx-phone{transform-style:preserve-3d;will-change:transform;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:box-shadow .3s}
.mta-phone.mtx-phone.dragging{cursor:grabbing}
.mta-phone.mtx-phone .mta-screen{transform:translateZ(1px)}
.mtx-stage{position:relative;height:100%;overflow:hidden;border-radius:inherit}
.mtx-stage>.mtx-slide{position:absolute;inset:0;height:100%;opacity:0;transform:translateX(-28%) scale(.96);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.mtx-stage>.mtx-slide.before{transform:translateX(28%) scale(.96)}
.mtx-stage>.mtx-slide.on{opacity:1;transform:none;pointer-events:auto}
.mtx-glare{position:absolute;inset:12px;border-radius:36px;pointer-events:none;z-index:4;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);mix-blend-mode:soft-light;opacity:.12}
.mtx-ui{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:26px;text-align:center;position:relative;z-index:2}
.mtx-count{font-weight:800;font-size:13px;letter-spacing:2px;color:#94a0b8}.mtx-count b{color:#df1f2d;font-size:20px}
.mtx-title{font-weight:800;color:#14213d;font-size:15px;min-height:1.6em}
.mtx-dots{display:flex;gap:8px}
.mtx-dots button{width:10px;height:10px;padding:0;border:0;border-radius:999px;background:#cfd8ea;cursor:pointer;transition:width .3s,background .3s}
.mtx-dots button.on{width:28px;background:#2556bd}
.mtx-hint{font-size:12px;color:#7a849a;font-weight:700}
/* lesson screen */
.mtx-lesson .mb-top b{font-size:10.5px}
.mtx-bar{height:9px;border-radius:9px;background:#e6ecf6;margin:14px 0 12px;overflow:hidden}.mtx-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#1f9d5c,#3ccf7f)}
.mtx-q{margin:0 0 8px;font-size:11px;color:#56667c;font-weight:700}
.mtx-say{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5eaf2;border-radius:14px;padding:10px;margin-bottom:10px}
.mtx-say b{font-size:13px;font-family:Arial,sans-serif}.mtx-play{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;background:#3976ea;color:#fff;font-size:11px;box-shadow:0 3px 0 #2452af}
.mtx-opts{display:grid;gap:7px}
.mtx-opts span{display:block;padding:9px 11px;border-radius:11px;border:1px solid #e5eaf2;background:#fff;font-size:12px;font-family:Arial,sans-serif;text-align:left}
.mtx-opts span.ok{border-color:#3ccf7f;background:#ecfdf3;color:#067647;font-weight:700;box-shadow:0 3px 0 #b7ebcd}
.mtx-mic{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;font-weight:800;color:#14213d}
.mtx-mic>span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:#df1f2d;color:#fff;box-shadow:0 5px 0 #a5121d,0 0 0 8px rgba(223,31,45,.12);animation:mtxPulse 1.8s infinite}
.mtx-mic small{font-weight:400}
.mtx-xp{margin:8px auto 0;padding:4px 12px;border-radius:999px;background:#fff6e6;color:#8a5a00;font-size:11px;font-weight:800;width:max-content}
.mtx-lesson nav,.mtx-progress nav{margin-top:auto}
@keyframes mtxPulse{50%{box-shadow:0 5px 0 #a5121d,0 0 0 14px rgba(223,31,45,.04)}}
/* progress screen */
.mtx-level{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#2556bd,#4a7be0);color:#fff;border-radius:17px;padding:14px;margin-top:14px}
.mtx-level small{color:rgba(255,255,255,.8)!important}.mtx-level b{font-size:18px;font-family:Arial,sans-serif;direction:ltr;display:block}
.mtx-ring{width:58px;height:58px;border-radius:50%;background:conic-gradient(#ffd166 0 65%,rgba(255,255,255,.25) 65% 100%);display:grid;place-items:center}
.mtx-ring span{width:44px;height:44px;border-radius:50%;background:#2f62c9;display:grid;place-items:center;font-size:11px;font-weight:800}
.mtx-sub{margin:14px 0 6px;font-size:10.5px;color:#56667c;font-weight:700}
.mtx-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;height:110px;background:#fff;border:1px solid #e5eaf2;border-radius:14px;padding:10px 10px 6px}
.mtx-chart>div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.mtx-chart i{display:block;width:100%;max-width:18px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#4a7be0,#2556bd);height:0;transition:height .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d)}
.mtx-progress.on .mtx-chart i{height:var(--h)}
.mtx-chart>div:nth-child(6) i{background:linear-gradient(180deg,#ff6b6b,#df1f2d)}
.mtx-chart small{font-size:9px!important}
.mtx-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mtx-badges span{background:#fff;border:1px solid #e5eaf2;border-radius:999px;padding:4px 9px;font-size:10px;font-weight:700}
@media (max-width:560px){.mtx-ui{margin-top:18px}.mtx-chart{height:84px}.mtx-level{padding:10px}.mtx-mic>span{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.mtx-stage>.mtx-slide{transition:opacity .3s}.mtx-mic>span{animation:none}}
/* 2.3.3 — homepage "مسیر یادگیری تو" bars fill from empty to their value when they come into view. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
.mto-level-card .mto-level-progress{animation:mtxFill 1.5s cubic-bezier(.22,.9,.25,1) both paused}
.mto-level-card.mtx-in .mto-level-progress{animation-play-state:running}
.mto-level-card .mto-level:nth-child(2) .mto-level-progress{animation-delay:.12s}
.mto-level-card .mto-level:nth-child(3) .mto-level-progress{animation-delay:.24s}
.mto-level-card .mto-level:nth-child(4) .mto-level-progress{animation-delay:.36s}
.mto-level-card .mto-level:nth-child(5) .mto-level-progress{animation-delay:.48s}
.mto-level-card .mto-level:nth-child(6) .mto-level-progress{animation-delay:.6s}
}
@keyframes mtxFill{from{width:0}}