@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

@layer base {
    * {
        @apply border-slate-200 dark:border-slate-800;
    }

    body {
        @apply bg-slate-50 dark:bg-slate-950;
    }
}

@layer components {
    .vt-card-motion {
        @apply transition duration-300 ease-out hover:-translate-y-1 hover:shadow-lg hover:shadow-blue-950/10 dark:hover:shadow-black/30;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}