/* ═══════════════════════════════════════════════════════════════════════════
   motion.css — ProcureToPayTracker custom transitions and animations
   §1 principle: "Motion is optional garnish."
   §11 rule: every custom motion in this file MUST have a prefers-reduced-motion
   fallback immediately after it — no exceptions.
   MudBlazor's own transitions already honour prefers-reduced-motion; the burden
   here is only for project-specific motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Reconnection overlay fade-in ─────────────────────────────────────────
   Used by ReconnectionOverlay.razor when it becomes visible.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes ptpt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ptpt-fade-in {
    animation: ptpt-fade-in 200ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .ptpt-fade-in {
        animation: none;
        opacity: 1;
    }
}

/* ── 2. Drawer slide-in (custom mini→full expand animation) ──────────────────
   Only fires when the drawer transitions from mini to open; MudBlazor's own
   drawer animation already covers the standard toggle.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes ptpt-slide-in-left {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* Applied programmatically via CSS class on the drawer wrapper when needed */
.ptpt-drawer-enter {
    animation: ptpt-slide-in-left 150ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .ptpt-drawer-enter {
        animation: none;
        transform: none;
        opacity: 1;
    }
}

/* ── 3. Snackbar slide-up ─────────────────────────────────────────────────────
   MudSnackbar has its own animation; this is for any custom toast/notification.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes ptpt-slide-up {
    from { transform: translateY(1rem); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

.ptpt-slide-up {
    animation: ptpt-slide-up 180ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .ptpt-slide-up {
        animation: none;
        transform: none;
        opacity: 1;
    }
}

/* ── 4. Page-level progress bar pulse ────────────────────────────────────────
   The MudProgressLinear under the app bar uses indeterminate mode during
   navigation. No custom animation needed — MudBlazor handles it. This class
   is available if we ever swap to a custom bar.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 5. Skeleton pulse (loading state) ───────────────────────────────────────
   MudSkeleton has its own shimmer; this is a fallback for custom skeleton shapes.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes ptpt-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.ptpt-skeleton {
    animation: ptpt-skeleton-pulse 1.5s ease-in-out infinite;
    background-color: var(--mud-palette-lines-default);
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .ptpt-skeleton {
        animation: none;
        opacity: 0.6;
    }
}

/* ── 6. Row highlight (audit/diff view) ──────────────────────────────────────
   Changed-field rows in the update confirmation dialog and audit viewer
   flash briefly on mount to draw the eye.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes ptpt-highlight-flash {
    0%   { background-color: color-mix(in srgb, var(--mud-palette-warning) 30%, transparent); }
    100% { background-color: transparent; }
}

.ptpt-highlight-new {
    animation: ptpt-highlight-flash 800ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .ptpt-highlight-new {
        /* Static background instead of animation — still visible, not distracting */
        background-color: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent);
        animation: none;
    }
}