/**
 * Portal-wide Lucide Animated motion layer.
 * Icons move only on user intent; durations stay readable even when global
 * reduced-motion shorthands compress other UI motion.
 */

:root {
    --pemm-lucide-motion-lift: 420ms;
    --pemm-lucide-motion-nudge: 420ms;
    --pemm-lucide-motion-spin: 520ms;
    --pemm-lucide-motion-pulse: 440ms;
    --pemm-lucide-motion-ring: 520ms;
    --pemm-lucide-motion-draw: 560ms;
    --pemm-lucide-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.lucide-animated-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    min-width: 1em;
    overflow: visible;
    vertical-align: -0.125em;
    transform-box: fill-box;
    transform-origin: center;
    pointer-events: none;
}

.lucide-animated-icon[data-lucide-motion="spin"] {
    transform-origin: center;
}

:where(a, button, [role="button"], [tabindex], .nav-item, .menu-item, .dropdown-item, .card, .btn, .admin-nav-item, .admin-nav-group__toggle, .classic-file-icon, .classic-file-row, .classic-chat-btn, .new-op-btn, .new-action-btn, .cs-wizard-step):is(:hover, :focus-visible, :focus-within)
    .lucide-animated-icon[data-lucide-motion="lift"],
.lucide-animated-icon[data-lucide-motion="lift"]:hover {
    animation: pemm-lucide-lift var(--pemm-lucide-motion-lift) var(--pemm-lucide-motion-ease) !important;
}

:where(a, button, [role="button"], [tabindex], .nav-item, .menu-item, .dropdown-item, .card, .btn, .admin-nav-item, .admin-nav-group__toggle, .classic-file-icon, .classic-file-row, .classic-chat-btn, .new-op-btn, .new-action-btn, .cs-wizard-step):is(:hover, :focus-visible, :focus-within)
    .lucide-animated-icon[data-lucide-motion="nudge"],
.lucide-animated-icon[data-lucide-motion="nudge"]:hover {
    animation: pemm-lucide-nudge var(--pemm-lucide-motion-nudge) var(--pemm-lucide-motion-ease) !important;
}

:where(a, button, [role="button"], [tabindex], .nav-item, .menu-item, .dropdown-item, .card, .btn, .admin-nav-item, .admin-nav-group__toggle, .classic-file-icon, .classic-file-row, .classic-chat-btn, .new-op-btn, .new-action-btn, .cs-wizard-step):is(:hover, :focus-visible, :focus-within)
    .lucide-animated-icon[data-lucide-motion="spin"],
.lucide-animated-icon[data-lucide-motion="spin"]:hover {
    animation: pemm-lucide-spin var(--pemm-lucide-motion-spin) var(--pemm-lucide-motion-ease) !important;
}

:where(a, button, [role="button"], [tabindex], .nav-item, .menu-item, .dropdown-item, .card, .btn, .admin-nav-item, .admin-nav-group__toggle, .classic-file-icon, .classic-file-row, .classic-chat-btn, .new-op-btn, .new-action-btn, .cs-wizard-step):is(:hover, :focus-visible, :focus-within)
    .lucide-animated-icon[data-lucide-motion="pulse"],
.lucide-animated-icon[data-lucide-motion="pulse"]:hover {
    animation: pemm-lucide-pulse var(--pemm-lucide-motion-pulse) var(--pemm-lucide-motion-ease) !important;
}

:where(a, button, [role="button"], [tabindex], .nav-item, .menu-item, .dropdown-item, .card, .btn, .admin-nav-item, .admin-nav-group__toggle, .classic-file-icon, .classic-file-row, .classic-chat-btn, .new-op-btn, .new-action-btn, .cs-wizard-step):is(:hover, :focus-visible, :focus-within)
    .lucide-animated-icon[data-lucide-motion="ring"],
.lucide-animated-icon[data-lucide-motion="ring"]:hover {
    animation: pemm-lucide-ring var(--pemm-lucide-motion-ring) var(--pemm-lucide-motion-ease) !important;
}

:where(a, button, [role="button"], [tabindex], .nav-item, .menu-item, .dropdown-item, .card, .btn, .admin-nav-item, .admin-nav-group__toggle, .classic-file-icon, .classic-file-row, .classic-chat-btn, .new-op-btn, .new-action-btn, .cs-wizard-step):is(:hover, :focus-visible, :focus-within)
    .lucide-animated-icon[data-lucide-motion="draw"] > *,
.lucide-animated-icon[data-lucide-motion="draw"]:hover > * {
    animation: pemm-lucide-draw var(--pemm-lucide-motion-draw) ease-out !important;
}

@keyframes pemm-lucide-lift {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-2px); }
}

@keyframes pemm-lucide-nudge {
    0%, 100% { transform: translateX(0); }
    45% { transform: translateX(2px); }
}

@keyframes pemm-lucide-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(180deg); }
}

@keyframes pemm-lucide-pulse {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.12); }
}

@keyframes pemm-lucide-ring {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(8deg); }
    55% { transform: rotate(-8deg); }
    75% { transform: rotate(4deg); }
}

@keyframes pemm-lucide-draw {
    0% { stroke-dasharray: 1 48; stroke-dashoffset: 24; opacity: .45; }
    100% { stroke-dasharray: 48 0; stroke-dashoffset: 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .lucide-animated-icon {
        transition:
            color 140ms ease-out,
            opacity 140ms ease-out,
            stroke 140ms ease-out;
    }
}