/* ========================================
   Focus Manager Styles
   ======================================== */

/* Backdrop element with blur effect */
.focus-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 9998; /* Below focused element (9999) but above everything else */
    pointer-events: auto;

    /* Smooth transitions for blur and background */
    transition: backdrop-filter 400ms cubic-bezier(0.4, 0.0, 0.2, 1),
                -webkit-backdrop-filter 400ms cubic-bezier(0.4, 0.0, 0.2, 1),
                background 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Active state - darker background for more visible blur */
.focus-backdrop.active {
    background: rgba(0, 0, 0, 0.4);
}

/* Focused elements should be above backdrop */
[data-focus-mode="true"] {
    z-index: 9999;

    /* Smooth opacity transition when mouse enters/leaves */
    transition: opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Only set position if element doesn't already have positioning */
[data-focus-mode="true"]:not([style*="position"]) {
    position: relative;
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .focus-backdrop {
        transition: none;
    }

    [data-focus-mode="true"] {
        transition: none;
    }
}