/*
 * Premium motion layer.
 * Keep this global file small: it is loaded on every route and the matching JS
 * only activates these classes when the page contains the relevant dashboard UI.
 */

[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.55s ease-out,
        transform 0.55s ease-out;
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
    will-change: opacity, transform;
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

.spotlight-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.spotlight-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(
            220px circle at var(--mx, 50%) var(--my, 50%),
            rgba(20, 145, 74, 0.1),
            rgba(20, 145, 74, 0) 45%
        );
    transition: opacity 0.25s ease;
}

.spotlight-card:hover::before {
    opacity: 1;
}

.spotlight-card:hover {
    border-color: rgba(20, 145, 74, 0.35) !important;
}

.spotlight-card > * {
    position: relative;
    z-index: 1;
}

.datatable-sticky-sentinel {
    width: 100%;
    height: 1px;
    pointer-events: none;
}