/*
 * Motion polish for modals and row updates.
 * Pure motion only - no color/typography changes. Remove this file and its
 * include in app/Views/includes/head.php to revert everything.
 */

/* modal: soft scale-up instead of the default 50px drop */
.modal.fade .modal-dialog {
    transform: scale(.965) translateY(10px);
    transition: transform .18s cubic-bezier(.16, 1, .3, 1), opacity .15s ease-out;
}

.modal.show .modal-dialog {
    transform: none;
}

/* modal content eases in after the ajax response replaces the placeholder */
#ajaxModalContent > * {
    animation: modal-content-in .18s ease-out;
}

@keyframes modal-content-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* skeleton placeholder shown while the modal content loads */
.modal-skeleton {
    display: grid;
    gap: 14px;
    padding: 5px 0;
}

.modal-skeleton .skeleton-line,
.modal-skeleton .skeleton-block {
    border-radius: 6px;
    background: linear-gradient(100deg, rgba(127, 140, 155, .12) 40%, rgba(127, 140, 155, .22) 50%, rgba(127, 140, 155, .12) 60%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.3s linear infinite;
}

.modal-skeleton .skeleton-line {
    height: 15px;
}

.modal-skeleton .skeleton-block {
    height: 46px;
}

.modal-skeleton .w-55 {
    width: 55%;
    height: 20px;
}

.modal-skeleton .w-35 {
    width: 35%;
}

.modal-skeleton .w-90 {
    width: 90%;
}

@keyframes skeleton-shimmer {
    to {
        background-position: -200% 0;
    }
}

/* the row which has just been saved flashes softly so the eye lands on it */
tr.row-updated {
    animation: row-updated-flash 1.2s ease-out;
}

@keyframes row-updated-flash {
    from {
        background-color: rgba(255, 214, 79, .35);
    }
    to {
        background-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transform: none;
        transition: opacity .1s linear;
    }

    #ajaxModalContent > *,
    tr.row-updated,
    .modal-skeleton .skeleton-line,
    .modal-skeleton .skeleton-block {
        animation: none;
    }
}