/* Alpine.js utility classes for your base template */

/* Hide elements until Alpine initializes (you already have this) */
[x-cloak] { display: none !important; }

/* Smooth transitions for Alpine show/hide */
[x-show] {
    transition: opacity 0.2s ease-in-out;
}

/* Optional: Custom transitions for specific components */
.alpine-enter {
    opacity: 0;
    transform: scale(0.95);
}

.alpine-enter-active {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.alpine-enter-to {
    opacity: 1;
    transform: scale(1);
}

.alpine-leave {
    opacity: 1;
    transform: scale(1);
}

.alpine-leave-active {
    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
}

.alpine-leave-to {
    opacity: 0;
    transform: scale(0.95);
}

/* Loading states for Alpine components */
.alpine-loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Focus management for Alpine components */
[x-data] [x-focus] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}