/* ============================================================
   CMS Design System — Animations & Micro-interactions
   Fichier : wwwroot/css/animations.css
   ============================================================ */

/* ─── Page Transition ────────────────────────────────────── */
@keyframes cmsPageFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cms-page-enter {
    animation: cmsPageFadeIn 200ms var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1)) both;
}

/* ─── Skeleton Loading ────────────────────────────────────── */
@keyframes cmsSkeletonPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.cms-skeleton {
    background-color: var(--color-neutral-200, #E2E7F0);
    border-radius: var(--radius-md, 8px);
    animation: cmsSkeletonPulse 1.5s ease-in-out infinite;
}

.cms-skeleton--text {
    height: 1em;
    border-radius: var(--radius-sm, 4px);
}

.cms-skeleton--circle {
    border-radius: 50%;
}

/* ─── Toast / Snackbar Animation ─────────────────────────── */
@keyframes cmsSlideUp {
    from {
        transform: translateY(16px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes cmsFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.cms-toast-enter {
    animation: cmsSlideUp 200ms var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1)) both;
}

.cms-toast-exit {
    animation: cmsFadeOut 200ms var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1)) both;
}

/* ─── Hover Transitions ───────────────────────────────────── */
/* Rows de tables */
.mud-table-row,
.mud-table-body tr {
    transition: background-color var(--duration-fast, 100ms) var(--easing-default) !important;
}

/* Boutons MudBlazor */
.mud-button-root {
    transition: background-color var(--duration-fast, 100ms) var(--easing-default),
                box-shadow var(--duration-fast, 100ms) var(--easing-default) !important;
}

/* Items sidebar */
.mud-nav-item .mud-nav-link {
    transition: background-color var(--duration-fast, 100ms) var(--easing-default) !important;
}

/* ─── Focus visible (DS.14, WCAG 2.4.7) ───────────────────── */
/* Anneau uniquement au clavier ; couleur = début du dégradé accent (3:1 sur fonds clairs). */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--color-focus-ring, #CB2424);
    outline-offset: 2px;
}

/* Cible du FocusOnNavigate (titre de page) et zone principale : focus programmatique sans anneau. */
h1:focus,
h1:focus-visible,
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible {
    outline: none;
}

/* Éléments sur fond accent : anneau clair */
.cms-nav__link.is-active:focus-visible,
.cms-login__submit:focus-visible,
.mud-button-filled-primary:focus-visible {
    outline-color: var(--color-primary-contrast, #FFFFFF);
    box-shadow: 0 0 0 4px var(--color-focus-ring, #CB2424);
}

/* ─── Snackbar v2 (bas-droite, DS.14) ─────────────────────── */
.mud-snackbar-location-bottom-right {
    bottom: 24px !important;
    right: 24px !important;
}

.mud-snackbar {
    min-width: 280px;
    max-width: min(440px, calc(100vw - 32px));
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: var(--shadow-lg, 0 8px 16px -4px rgba(0,0,0,.25)) !important;
    font-family: var(--font-family-sans, 'Poppins', sans-serif) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    animation: cmsSlideUp 200ms var(--easing-default) both !important;
}

.mud-snackbar.mud-alert-filled-success { background-color: var(--color-success) !important; }
.mud-snackbar.mud-alert-filled-error   { background-color: var(--color-danger) !important; }
.mud-snackbar.mud-alert-filled-warning { background-color: var(--color-warning) !important; }
.mud-snackbar.mud-alert-filled-info    { background-color: var(--color-info) !important; }

@media (max-width: 767.98px) {
    .mud-snackbar-location-bottom-right {
        right: 16px !important;
        bottom: 16px !important;
        left: 16px !important;
    }

    .mud-snackbar {
        min-width: 0;
        width: 100%;
    }
}

/* ─── Transition entrée composants ───────────────────────── */
@keyframes cmsFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cms-fade-in {
    animation: cmsFadeIn var(--duration-base, 200ms) var(--easing-default) both;
}

/* ─── Bounce (modales, drawers) ──────────────────────────── */
@keyframes cmsBounceIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.cms-bounce-in {
    animation: cmsBounceIn var(--duration-slow, 300ms) var(--easing-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}