/* ═══════════════════════════════════════════
   TrainControl — Animations
   ═══════════════════════════════════════════ */

/* ── Card entrance ── */
.grid-slot.filled {
    animation: cardIn var(--duration-slow) var(--ease-out) both;
}
@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
}

/* ── Sidebar item entrance ── */
.sidebar-loco {
    animation: sideIn var(--duration-med) var(--ease-out) both;
}
@keyframes sideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
}

/* Stagger helper (set via JS) */
.sidebar-loco:nth-child(1) { animation-delay: 0ms; }
.sidebar-loco:nth-child(2) { animation-delay: 50ms; }
.sidebar-loco:nth-child(3) { animation-delay: 100ms; }
.sidebar-loco:nth-child(4) { animation-delay: 150ms; }
.sidebar-loco:nth-child(5) { animation-delay: 200ms; }

/* ── Pulse for status dot when connected ── */
.status-dot.connected {
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(77,166,120,0.5); }
    50%      { box-shadow: 0 0 12px rgba(77,166,120,0.8); }
}

/* ── Speed value change ── */
.speed-value.changed {
    animation: bump 200ms var(--ease-spring);
}
@keyframes bump {
    50% { transform: scale(1.15); }
}

/* ── Function toggle flash ── */
.btn-function.flash {
    animation: fnFlash 300ms ease;
}
@keyframes fnFlash {
    50% { transform: scale(0.92); }
}

/* ── Drop zone highlight ── */
.grid-slot.drag-over {
    animation: dropPulse 600ms ease infinite alternate;
}
@keyframes dropPulse {
    from { border-color: rgba(67,89,144,0.3); }
    to   { border-color: rgba(67,89,144,0.6); }
}

/* ── Card removal ── */
.grid-slot.removing {
    animation: cardOut var(--duration-med) var(--ease-out) forwards;
}
@keyframes cardOut {
    to {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }
}