@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@source '../js/**/*.vue';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

/* ── animate-in / fade-in utilities (replaces tailwindcss-animate which is not installed) ── */
@keyframes --tw-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes --tw-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes --tw-slide-in-from-bottom {
    from { transform: translateY(1.25rem); opacity: 0; }
    to   { transform: translateY(0);       opacity: 1; }
}

.animate-in {
    animation-fill-mode: both;
    animation-duration: 150ms;
}
.animate-in.fade-in {
    animation-name: --tw-fade-in;
}
.animate-out {
    animation-fill-mode: both;
    animation-duration: 150ms;
}
.animate-out.fade-out {
    animation-name: --tw-fade-out;
}

/* duration overrides when combined with animate-in/out */
.animate-in.duration-200,
.animate-out.duration-200 { animation-duration: 200ms; }
.animate-in.duration-300,
.animate-out.duration-300 { animation-duration: 300ms; }
.animate-in.duration-500,
.animate-out.duration-500 { animation-duration: 500ms; }