/*
 * THE COMMAND PALETTE'S SCRIM BLUR — a static asset, deliberately OUTSIDE the
 * Tailwind pipeline. (The file is named for the morph flight it was written for;
 * the palette fades now, and all that is left here is its <dialog-backdrop>'s
 * blur and saturation, transitioned with the panel's fade.)
 *
 * Tailwind v4’s `--watch` incremental rebuilds DROP entry-authored custom rules
 * (one-shot builds keep them), which silently kills the transitions below under
 * `puzzle dev` while leaving `puzzle build` correct — the worst possible failure
 * mode. Files in `app/public/` are copied verbatim and served as-is, so they are
 * immune. It is linked from `app/public/index.html`.
 *
 * Everything here reads THEME TOKENS (`--blur-sm`, `--saturate-scrim`), which
 * Tailwind v4 emits on `:root`, so a stylesheet outside the pipeline still
 * cannot drift from the utilities inside it.
 */

/*
 * ---------------------------------------------------------------------------
 * THE COMMAND PALETTE’S SCRIM
 * ---------------------------------------------------------------------------
 *
 * The brief: the palette opens with the dialog backdrop’s blur and grain.
 * Since 2026-10-06 (Cory: "the search panel will no longer use the morph
 * engine, it'll just fade in. but still use the dialog-panel and keep the
 * textures on the dialog-backdrop not the ::backdrop element") the palette is a
 * <dialog-panel> (app/components/ui/Command.pzl, ported from Pyramid) and the
 * scrim is its <dialog-backdrop>. The package shows and fades that element off
 * the panel's `state` and keeps the native ::backdrop transparent; this file
 * adds the blur and saturation, and times all of it to the panel's 150ms fade.
 *
 * WHY THE FILTER IS HAND-WRITTEN AND NOT `backdrop-blur-sm backdrop-saturate-115`.
 * Two reasons:
 *  - backdrop-filter has to be transitioned EXPLICITLY or Chrome applies the
 *    blur at full strength whatever the element's opacity, so an opacity-only
 *    fade leaves the app blurred and then pops (the same gotcha every
 *    transitioned backdrop hits).
 *  - a transition needs both ends written in the same property, and Tailwind's
 *    backdrop utilities compose one out of a stack of `--tw-backdrop-*`
 *    variables that a plain rule cannot interpolate against.
 * The values are READ FROM THE THEME rather than copied: `--blur-sm` is the
 * token `backdrop-blur-sm` itself compiles to, and `--saturate-scrim` is a
 * token declared beside it in app/styles/styles.css because `backdrop-saturate-115` takes a
 * bare integer and leaves none. Tailwind v4 emits both on `:root`, so a plain
 * stylesheet outside the pipeline can still read them and cannot drift from the
 * overlays that do use the utilities. The scrim COLOUR and the noise tile stay Tailwind
 * (`bg-scrim noise`) — they interpolate fine through opacity.
 *
 * This file is outside the Tailwind pipeline on purpose; see the header.
 */
dialog-panel > dialog-backdrop.ui-palette-backdrop {
  -webkit-backdrop-filter: blur(0) saturate(1);
  backdrop-filter: blur(0) saturate(1);
  transition:
    opacity 150ms ease-out,
    -webkit-backdrop-filter 150ms ease-out,
    backdrop-filter 150ms ease-out;
}

dialog-panel[state='shown'] > dialog-backdrop.ui-palette-backdrop {
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--saturate-scrim));
  backdrop-filter: blur(var(--blur-sm)) saturate(var(--saturate-scrim));
}

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion: the panel cross-dissolves in 100ms linear (Command.pzl's
     `motion-reduce:` utilities), and the scrim keeps step with it, because a
     hard cut to a blurred page is its own jolt. */
  dialog-panel > dialog-backdrop.ui-palette-backdrop {
    transition:
      opacity 100ms linear,
      -webkit-backdrop-filter 100ms linear,
      backdrop-filter 100ms linear;
  }
}