/* KAGS Alive Kit — motion, toasts, celebration styling for staff pages.
   Paired with /js/kags-alive.js. All animation is gated behind
   prefers-reduced-motion so accessibility settings are respected. */

:root {
    --kags-alive-red: #5c070e;
    --kags-alive-gold: #d4a017;
}

/* ---------- Banner gloss: keeps the KAGS red, adds a light 3D sheen ---------- */
/* Base color here so the shared navbar partial works on pages that never
   defined .navbar-kags in their own styles */
.navbar-kags {
    background-color: var(--kags-alive-red) !important;
}

.navbar-kags,
.bg-kags-red {
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.20) 0%,
        rgba(255, 255, 255, 0.06) 45%,
        rgba(0, 0, 0, 0.00) 55%,
        rgba(0, 0, 0, 0.14) 100%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ---------- Toast container & styling (always styled; motion gated below) ---------- */
#kagsToastContainer {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 360px;
}

.kags-toast {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-left: 4px solid var(--kags-alive-red);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.kags-toast .toast-header {
    background: var(--kags-alive-red);
    color: #fff;
    font-weight: 600;
}

.kags-toast .toast-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.kags-toast.kags-toast-celebrate {
    border-left-color: var(--kags-alive-gold);
}

.kags-toast.kags-toast-celebrate .toast-header {
    background: linear-gradient(90deg, var(--kags-alive-red), #8a1520);
}

/* Confetti canvas overlay */
#kagsConfettiCanvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
}

/* ---------- Motion (only when the user allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {

    /* Entrance: JS adds .kags-in to candidates, then .kags-in-go to run it */
    .kags-in {
        opacity: 0;
        transform: translateY(10px);
    }

    .kags-in-go {
        animation: kagsFadeUp 0.45s ease-out forwards;
        animation-delay: calc(var(--kags-stagger, 0) * 55ms);
    }

    @keyframes kagsFadeUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Hover lift for cards / tiles */
    .card {
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    }

    /* Button press feedback */
    .btn {
        transition: transform 0.12s ease, box-shadow 0.12s ease;
    }

    .btn:active {
        transform: scale(0.96);
    }

    /* Table row hover glide */
    .table-hover > tbody > tr {
        transition: background-color 0.15s ease;
    }

    /* Badge pulse when a count changes */
    .kags-pulse {
        animation: kagsPulse 0.9s ease-in-out 3;
    }

    @keyframes kagsPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.35); }
    }

    /* Toast slide-in */
    .kags-toast {
        animation: kagsSlideIn 0.3s ease-out;
    }

    @keyframes kagsSlideIn {
        from {
            opacity: 0;
            transform: translateX(40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Flash alerts get the entrance treatment too */
    .alert {
        animation: kagsFadeUp 0.4s ease-out;
    }
}

/* Safety net: if JS tagged elements but never triggered the run class
   (e.g. an error mid-init), reveal everything after 2s */
.kags-in:not(.kags-in-go) {
    animation: kagsRevealFallback 0s linear 2s forwards;
}

@keyframes kagsRevealFallback {
    to { opacity: 1; transform: none; }
}