/* animations.css — быстрые, заметные */
.btn{transition:transform .12s,box-shadow .12s,border-color .12s}
.btn:hover{transform:translateY(-1px);border-color:#3a4659;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.btn:active{transform:translateY(0)}

.slot.dragover{outline:2px dashed rgba(120,212,255,.45);outline-offset:-4px}

@keyframes slotAdd{0%{transform:scale(.92);box-shadow:0 0 0 0 rgba(120,212,255,.0)}60%{transform:scale(1.03);box-shadow:0 0 0 6px rgba(120,212,255,.12)}100%{transform:scale(1);box-shadow:none}}
@keyframes slotRemove{0%{transform:scale(1);opacity:1}100%{transform:scale(.92);opacity:.6}}
.slot-add{animation:slotAdd .22s ease}
.slot-remove{animation:slotRemove .18s ease}

dialog::backdrop{animation:fadeBackdrop .12s ease} @keyframes fadeBackdrop{from{opacity:0}to{opacity:1}}
.modal{animation:popIn .15s ease} @keyframes popIn{from{transform:translateY(8px);opacity:.9}to{transform:translateY(0);opacity:1}}

#enchDropdown.open{animation:fadeIn .12s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

#toast.show{animation:toastIn .15s ease} @keyframes toastIn{from{opacity:0;transform:translate(-50%, 14px)}to{opacity:1;transform:translate(-50%, 0)}}