@layer utilities {
    .ux-raise {
        transition: transform var(--motion-medium), box-shadow var(--motion-medium);
    }

    .ux-raise:hover {
        transform: translateY(calc(-1 * var(--motion-distance-2)));
        box-shadow: var(--elevation-card-hover);
    }

    .ux-press {
        transition: transform var(--motion-fast);
    }

    .ux-press:active {
        transform: scale(var(--motion-scale-down));
    }

    .ux-scale {
        transition: transform var(--motion-medium);
    }

    .ux-scale:hover {
        transform: scale(var(--motion-scale-up));
    }

    .fade-in {
        opacity: 0;
        transform: translateY(var(--motion-distance-1));
        transition: opacity var(--motion-medium), transform var(--motion-medium);
    }

    .fade-in.is-visible {
        opacity: 1;
        transform: none;
    }

    .slide-in-up {
        transform: translateY(var(--motion-distance-3));
        opacity: 0;
        transition: transform var(--motion-medium), opacity var(--motion-medium);
    }

    .slide-in-up.is-visible {
        transform: none;
        opacity: 1;
    }

    .slide-in-down {
        transform: translateY(calc(-1 * var(--motion-distance-3)));
        opacity: 0;
        transition: transform var(--motion-medium), opacity var(--motion-medium);
    }

    .slide-in-down.is-visible {
        transform: none;
        opacity: 1;
    }

    .focus-glow {
        transition: box-shadow var(--motion-fast);
    }

    .focus-glow:focus-visible {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-border-focus) 25%, transparent);
    }

    .stagger-children>* {
        transition: opacity var(--motion-medium), transform var(--motion-medium);
    }

    .stagger-children>*:nth-child(1) {
        transition-delay: 0ms;
    }

    .stagger-children>*:nth-child(2) {
        transition-delay: 30ms;
    }

    .stagger-children>*:nth-child(3) {
        transition-delay: 60ms;
    }

    .stagger-children>*:nth-child(4) {
        transition-delay: 90ms;
    }

    /* ============================================
       SMOOTH DRAWER/PANEL ANIMATIONS (Fern-inspired)
       ============================================ */

    /**
     * Smooth drawer/panel base class
     * Uses GPU acceleration and optimized easing for buttery-smooth animations
     */
    .smooth-drawer {
        touch-action: none;
        will-change: transform;
        transition: transform var(--transition-smooth);
    }

    /* Drawer directions */
    .smooth-drawer-bottom {
        transform: translate3d(0, 100%, 0);
    }

    .smooth-drawer-bottom[data-open="true"],
    .smooth-drawer-bottom.is-open {
        transform: translate3d(0, 0, 0);
    }

    .smooth-drawer-top {
        transform: translate3d(0, -100%, 0);
    }

    .smooth-drawer-top[data-open="true"],
    .smooth-drawer-top.is-open {
        transform: translate3d(0, 0, 0);
    }

    .smooth-drawer-left {
        transform: translate3d(-100%, 0, 0);
    }

    .smooth-drawer-left[data-open="true"],
    .smooth-drawer-left.is-open {
        transform: translate3d(0, 0, 0);
    }

    .smooth-drawer-right {
        transform: translate3d(100%, 0, 0);
    }

    .smooth-drawer-right[data-open="true"],
    .smooth-drawer-right.is-open {
        transform: translate3d(0, 0, 0);
    }

    /* Remove will-change after animation completes to avoid memory overhead */
    .smooth-drawer[data-open="true"],
    .smooth-drawer.is-open {
        will-change: auto;
    }

    /**
     * Smooth panel overlay (backdrop)
     */
    .smooth-overlay {
        will-change: opacity;
        transition: opacity var(--transition-smooth);
        opacity: 0;
    }

    .smooth-overlay[data-open="true"],
    .smooth-overlay.is-open {
        opacity: 1;
        will-change: auto;
    }

    /**
     * Smooth slide animations (GPU-accelerated)
     * Use these instead of standard slide-in classes for better performance
     */
    .smooth-slide-up {
        opacity: 0;
        transform: translate3d(0, var(--motion-distance-3), 0);
        transition: opacity var(--transition-smooth), transform var(--transition-smooth);
        will-change: transform, opacity;
    }

    .smooth-slide-up.is-visible,
    .smooth-slide-up[data-visible="true"] {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        will-change: auto;
    }

    .smooth-slide-down {
        opacity: 0;
        transform: translate3d(0, calc(-1 * var(--motion-distance-3)), 0);
        transition: opacity var(--transition-smooth), transform var(--transition-smooth);
        will-change: transform, opacity;
    }

    .smooth-slide-down.is-visible,
    .smooth-slide-down[data-visible="true"] {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        will-change: auto;
    }

    .smooth-slide-left {
        opacity: 0;
        transform: translate3d(var(--motion-distance-3), 0, 0);
        transition: opacity var(--transition-smooth), transform var(--transition-smooth);
        will-change: transform, opacity;
    }

    .smooth-slide-left.is-visible,
    .smooth-slide-left[data-visible="true"] {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        will-change: auto;
    }

    .smooth-slide-right {
        opacity: 0;
        transform: translate3d(calc(-1 * var(--motion-distance-3)), 0, 0);
        transition: opacity var(--transition-smooth), transform var(--transition-smooth);
        will-change: transform, opacity;
    }

    .smooth-slide-right.is-visible,
    .smooth-slide-right[data-visible="true"] {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        will-change: auto;
    }

    /**
     * Smooth fade with scale (for modals, popovers)
     */
    .smooth-fade-scale {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(0.95);
        transition: opacity var(--transition-smooth), transform var(--transition-smooth);
        will-change: transform, opacity;
    }

    .smooth-fade-scale.is-visible,
    .smooth-fade-scale[data-visible="true"] {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0) scale(1);
        will-change: auto;
    }

    /**
     * Smooth raise (GPU-accelerated hover effect)
     */
    .smooth-raise {
        transition: transform var(--transition-base), box-shadow var(--transition-base);
        will-change: transform;
    }

    .smooth-raise:hover {
        transform: translate3d(0, calc(-1 * var(--motion-distance-2)), 0);
        box-shadow: var(--elevation-card-hover);
    }

    .smooth-raise:hover {
        will-change: auto;
    }

    /* Disable will-change on mobile for performance */
    @media (max-width: 768px) {
        .smooth-raise {
            will-change: auto;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    @layer utilities {

        .ux-raise,
        .ux-press,
        .ux-scale,
        .fade-in,
        .slide-in-up,
        .slide-in-down,
        .stagger-children>*,
        .smooth-drawer,
        .smooth-overlay,
        .smooth-slide-up,
        .smooth-slide-down,
        .smooth-slide-left,
        .smooth-slide-right,
        .smooth-fade-scale,
        .smooth-raise {
            transition: none !important;
            animation: none !important;
            transform: none !important;
            will-change: auto !important;
        }
    }
}
