/* Generated from ui/components/screen-haze/screen-haze.css by tools/sync-ui.py — do not edit.
   Edit the source and re-run the script; validate_ui.py fails on a
   copy that has drifted from it. */
/* The haze at the top and foot of anything that scrolls behind glass.
 *
 * Two gradients masked to the edges, lit only when there is something above or
 * below to fall off — .panel-screen[data-over] and [data-under], set by
 * whatever owns the scroll.
 *
 * Needs: ui/tokens.css, for --panel, --ease and --motion-slow. Almost nothing,
 * which is why this one is
 * shared and most of the others are not: the app and the site had the same
 * four rules for it, character for character once the tokens resolved.
 *
 * The #000 stops are a mask, not a colour: black means opaque in
 * -webkit-mask-image, so they are opacity written in hex and no theme should
 * touch them.
 */

.screen-haze {
  position: absolute;
  inset: 0;
  z-index: var(--layer-veil);
  pointer-events: none;
}

.screen-haze::before,
.screen-haze::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 34px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* Only where something is actually running under it. A panel that blurs its
     own first line with nothing above it is not hazed, it is out of focus. */
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease);
}

.screen-haze::before {
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 22%, rgba(0, 0, 0, .5) 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 22%, rgba(0, 0, 0, .5) 62%, transparent 100%);
  /* The glass's own colour over the blur, so the last of the line goes to
     panel rather than merely going soft. Taken from the same variables the
     glass is painted with, so a screen lit differently hazes to its own dark. */
  background: linear-gradient(to bottom,
    var(--glass-top) 0%,
    color-mix(in srgb, var(--glass-top) 52%, transparent) 46%,
    transparent 100%);
}

.screen-haze::after {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to top, #000 0 22%, rgba(0, 0, 0, .5) 62%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0 22%, rgba(0, 0, 0, .5) 62%, transparent 100%);
  background: linear-gradient(to top,
    var(--glass-foot) 0%,
    color-mix(in srgb, var(--glass-foot) 52%, transparent) 46%,
    transparent 100%);
}

.panel-screen[data-over] .screen-haze::before,
.panel-screen[data-under] .screen-haze::after { opacity: 1; }