/* F-741 (owner directive 2026-08-24): the full-screen click-feedback overlay. click-feedback-overlay.js
   toggles the `hidden` attribute on #tma-click-overlay the instant a qualifying navigation click is
   observed -- see that file for the two trigger paths and the exemption list.

   A dedicated stylesheet rather than an app.css addition: AppCssPublicSurfaceBudgetTests already keeps
   that file within a deliberately thin margin of the F-191 public-surface byte cap, and its own guidance
   is to extract a new self-contained, page-scoped block into a stylesheet of its own rather than spend
   that headroom. Depends on the shared design tokens (--scrim), unlike circuit-watch.css's deliberately
   self-contained style -- that file has to survive the OTHER stylesheets failing to load; this one is a
   normal feature layered on a page that has already loaded successfully. */

#tma-click-overlay {
    align-items: center;
    background: var(--scrim);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    inset: 0;
    justify-content: center;
    position: fixed;
    /* One below the framework's own topmost overlays -- #blazor-error-ui and #components-reconnect-modal
       both ship at z-index:9999 !important in MudBlazor 9.4.0's own shipped stylesheet (confirmed by
       reading MudBlazor.min.css directly). A genuinely dead circuit's own message must stay on top of a
       navigation-feedback spinner, never be masked by one; this still clears every ordinary MudBlazor
       popover/dialog/snackbar/drawer (all under z-index:100 in the same stylesheet) and this app's own
       shell z-index scale (--z-toast tops out at 90). */
    z-index: 9998;
}

/* The `hidden` attribute's user-agent rule is `display:none`, which the `display:flex` above would
   otherwise defeat -- an attribute selector on the SAME element outranks nothing here, so no !important is
   needed (mirrors circuit-watch.css's #circuit-connect-ui[hidden] rule). */
#tma-click-overlay[hidden] {
    display: none;
}

#tma-click-overlay .tma-click-overlay__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#tma-click-overlay .tma-click-overlay__logo {
    height: 4rem;
    width: 4rem;
    animation: tma-click-overlay-pulse 1.4s ease-in-out infinite;
}

#tma-click-overlay .tma-click-overlay__spinner {
    display: flex;
    gap: 0.4rem;
}

#tma-click-overlay .tma-click-overlay__dot {
    background: #fff;
    border-radius: 50%;
    height: 0.6rem;
    width: 0.6rem;
    animation: tma-click-overlay-count 1.1s ease-in-out infinite;
}

/* The three dots light up in SEQUENCE rather than together -- the "counting" read the owner directive asks
   for, not just an indeterminate spin. */
#tma-click-overlay .tma-click-overlay__dot:nth-child(2) { animation-delay: 0.15s; }
#tma-click-overlay .tma-click-overlay__dot:nth-child(3) { animation-delay: 0.3s; }

#tma-click-overlay .tma-click-overlay__sr-text {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@keyframes tma-click-overlay-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.06); }
}

@keyframes tma-click-overlay-count {
    0%, 80%, 100% { opacity: 0.5; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-0.35rem); }
}

/* F-741 AC: reduced motion keeps the logo and the loading graphic fully static -- no pulse, no counting --
   while instant appearance still holds either way: the overlay's own show/hide is a bare `hidden` attribute
   toggle (ClickFeedbackOverlayScriptTests), never a CSS transition, so this block never needs to touch it. */
@media (prefers-reduced-motion: reduce) {
    #tma-click-overlay .tma-click-overlay__logo,
    #tma-click-overlay .tma-click-overlay__dot {
        animation: none;
    }
}