/**
 * The overlay the animation plays in.
 *
 * Written as plain CSS rather than Tailwind classes: the panel ships a compiled
 * stylesheet, and utility classes in a Blade view render unstyled unless the
 * project also builds a custom theme — which would put Node back in the deploy.
 */
#lottie-overlay {
    position: fixed;
    /* Above the panel and its modals, below nothing that matters. */
    z-index: 9999;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    /* Never in the way. A student who has moved on can click straight through. */
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease-out;
}

#lottie-overlay.is-playing {
    opacity: 1;
}

#lottie-overlay svg {
    display: block;
    /* A drop shadow so the white tick survives a light background. */
    filter: drop-shadow(0 4px 12px rgb(0 0 0 / 0.18));
}

@media (prefers-reduced-motion: reduce) {
    #lottie-overlay {
        display: none;
    }
}