/* ============================================================================
   המדפסת שבאזור הגרירה של טופס ההוספה. CSS בלבד, בלי תמונה.

   **קובץ נפרד** מ-expense-invoice-zone.css לפי כלל 300 השורות: זו אנימציה
   אחת עם חמש תנועות, והיא היחידה שמשתמשת בהן. נעצרת ב-prefers-reduced-motion
   בסוף הקובץ.
   ============================================================================ */

/* ── המדפסת ──
   מחזור אחד של 3.8 שניות: דף נכנס, קבלה יוצאת ומודפסת, חותמת, והקבלה
   נתלשת. הכיוון הפיזי קבוע (`left`), כי זו תמונה ולא טקסט. */
.exp-inv-printer {
    position: relative;
    display: block;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    direction: ltr;
}

.exp-inv-printer i,
.exp-inv-printer span {
    position: absolute;
    display: block;
}

.exp-inv-printer-tray {
    left: 14px;
    top: 1px;
    width: 24px;
    height: 10px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    animation: expInvRcFeed 3.8s cubic-bezier(.5, 0, .3, 1) infinite;
}

.exp-inv-printer-tray i:nth-child(1) { right: 4px; top: 3px; width: 10px; height: 1.5px; background: #94a3b8; }
.exp-inv-printer-tray i:nth-child(2) { right: 4px; top: 6px; width: 14px; height: 1.5px; background: #cbd5e1; }

.exp-inv-printer-receipt {
    left: 9px;
    top: 20px;
    width: 34px;
    height: 0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, .16), 0 0 0 .5px #e2e8f0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3px), 92% 100%, 83% calc(100% - 3px), 75% 100%, 67% calc(100% - 3px), 58% 100%, 50% calc(100% - 3px), 42% 100%, 33% calc(100% - 3px), 25% 100%, 17% calc(100% - 3px), 8% 100%, 0 calc(100% - 3px));
    animation: expInvRcGrow 3.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

.exp-inv-printer-receipt i:nth-child(1) { right: 5px; top: 4px; height: 2.5px; width: 13px; background: #1e293b; transform-origin: right; animation: expInvRcLine 3.8s steps(6) .35s infinite both; }
.exp-inv-printer-receipt i:nth-child(2) { right: 5px; top: 9px; height: 1.5px; width: 22px; background: #94a3b8; transform-origin: right; animation: expInvRcLine 3.8s steps(8) .55s infinite both; }
.exp-inv-printer-receipt i:nth-child(3) { right: 5px; top: 13px; height: 1.5px; width: 16px; background: #94a3b8; transform-origin: right; animation: expInvRcLine 3.8s steps(6) .75s infinite both; }
.exp-inv-printer-receipt i.exp-inv-printer-sep { left: 5px; right: 5px; top: 18px; height: 0; width: auto; border-top: 1px dashed #cbd5e1; animation: expInvRcLine 3.8s steps(1) 1s infinite both; }
.exp-inv-printer-receipt i:nth-child(5) { left: 5px; top: 21px; height: 3px; width: 11px; background: #1e293b; transform-origin: left; animation: expInvRcLine 3.8s steps(4) 1.15s infinite both; }

.exp-inv-printer-stamp {
    left: 10px;
    top: 5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid #047857;
    color: #047857;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(236, 253, 245, .6);
    animation: expInvRcStamp 3.8s cubic-bezier(.2, 1.6, .4, 1) infinite both;
}

.exp-inv-printer-stamp svg {
    position: static;
}

.exp-inv-printer-body {
    left: 3px;
    top: 8px;
    width: 46px;
    height: 14px;
    border-radius: 5px 5px 3px 3px;
    background: linear-gradient(180deg, #475569 0%, #334155 45%, #1e293b 100%);
    box-shadow: 0 2px 3px rgba(15, 23, 42, .3), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.exp-inv-printer-body i:nth-child(1) { left: 5px; top: 4px; width: 14px; height: 2px; border-radius: 1px; background: #64748b; }
.exp-inv-printer-body i.exp-inv-printer-led { right: 5px; top: 3.5px; width: 3.5px; height: 3.5px; border-radius: 50%; animation: expInvRcLed 3.8s steps(1) infinite; }
.exp-inv-printer-body i:nth-child(3) { right: 11px; top: 3.5px; width: 3.5px; height: 3.5px; border-radius: 50%; background: #64748b; }
.exp-inv-printer-body i.exp-inv-printer-slot { left: 5px; right: 5px; bottom: 2px; height: 2px; border-radius: 1px; background: #0f172a; }

@keyframes expInvRcFeed {
    0% { transform: translateY(0); opacity: 1; }
    28% { transform: translateY(12px); opacity: 1; }
    29% { transform: translateY(12px); opacity: 0; }
    80% { transform: translateY(-8px); opacity: 0; }
    96%, 100% { transform: translateY(0); opacity: 1; }
}

@keyframes expInvRcGrow {
    0% { height: 0; transform: translateY(0); opacity: 1; }
    30% { height: 28px; }
    78% { height: 28px; transform: translateY(0) rotate(0); opacity: 1; }
    92% { height: 28px; transform: translateY(12px) rotate(-6deg); opacity: 0; }
    100% { height: 0; opacity: 0; }
}

@keyframes expInvRcLine {
    0%, 8% { transform: scaleX(0); opacity: 0; }
    9% { opacity: 1; }
    22% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 1; }
}

@keyframes expInvRcStamp {
    0%, 46% { opacity: 0; transform: scale(2.6) rotate(-30deg); }
    54% { opacity: 1; transform: scale(.92) rotate(-14deg); }
    60% { transform: scale(1) rotate(-14deg); }
    100% { opacity: 1; transform: scale(1) rotate(-14deg); }
}

@keyframes expInvRcLed {
    0%, 30% { background: #f59e0b; }
    31%, 100% { background: #10b981; }
}

/* **מחזור אחד ונעצרים** (WCAG 2.2.2, פחות מחמש שניות כולל ההשהיות). 78%
   מהמחזור הוא הרגע שבו הקבלה מודפסת והחותמת עליה, אותה תמונה כמו בלי
   תנועה. */
.exp-inv-printer,
.exp-inv-printer * {
    animation-iteration-count: .78 !important;
    animation-fill-mode: both !important;
}

/* בלי תנועה: המדפסת נעצרת על הקבלה המודפסת והחותמת, שהיא התמונה שאומרת
   "החשבונית נקראה" גם בלי אנימציה. */
@media (prefers-reduced-motion: reduce) {
    .exp-inv-printer *,
    .exp-inv-printer {
        animation: none !important;
    }

    .exp-inv-printer-receipt {
        height: 28px;
    }

    .exp-inv-printer-body i.exp-inv-printer-led {
        background: #10b981;
    }
}