/* ==========================================================================
   exposure.css — a window showing something private, coming apart.

   js/exposure.js puts data-cx="1|2|3" and --cx (0–1) on a window while it
   shows something that is not for you, and marks the part that holds the
   content with .cx-pane. Tier 1 is only the text refusing to hold still,
   which is done in script and has no style. Tiers 2 and 3 are here.

   Nothing on this page applies under View > Screen effects off or
   prefers-reduced-motion: the script stops setting data-cx at all, and the
   rules at the bottom catch anything left over.
   ========================================================================== */

/* the window's own interference layer: slices and blocks land here, over
   the window only, instead of over the whole room */
.cx-layer {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 30;
}
.cx-layer > * { position: absolute; }
.cx-layer > .g-slice { left: -6%; right: -6%; }

/* tier 2: the colour channels of the text no longer agree with each other */
[data-cx="2"] .cx-pane {
  text-shadow: .5px 0 rgba(255, 40, 60, .32), -.5px 0 rgba(0, 200, 255, .26);
}

/* tier 3: further apart, and the window has scanlines of its own with a
   slow bright band rolling down through them */
[data-cx="3"] .cx-pane {
  text-shadow: 1px 0 rgba(255, 40, 60, .42), -1px 0 rgba(0, 200, 255, .34);
}
[data-cx="3"] > .cx-layer {
  background: repeating-linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0 2px, rgba(10, 12, 16, .075) 2px 3px);
}
[data-cx="3"] > .cx-layer::after {
  content: ""; position: absolute; left: 0; right: 0; top: -22%; height: 20%;
  background: linear-gradient(180deg, transparent, rgba(229, 138, 60, .06), transparent);
  animation: cx-roll 7s linear infinite;
}
@keyframes cx-roll { to { top: 112%; } }
[data-cx="3"] .win-title .tb-label { letter-spacing: .02em; }

/* a picture splitting into its channels for a moment */
.cx-split { filter: url(#cx-split); }

/* the content shoved sideways and put back */
.cx-jolt { animation: cx-jolt .24s steps(3); }
@keyframes cx-jolt {
  0%   { transform: none; }
  33%  { transform: translateX(-5px) skewX(-1deg); }
  66%  { transform: translateX(3px); }
  100% { transform: none; }
}

body.no-fx .cx-layer { display: none; }
body.no-fx [data-cx] .cx-pane { text-shadow: none; }
body.no-fx .cx-split { filter: none; }
@media (prefers-reduced-motion: reduce) {
  body:not(.fx-force) .cx-layer { display: none; }
  body:not(.fx-force) [data-cx] .cx-pane { text-shadow: none; }
  body:not(.fx-force) .cx-split { filter: none; }
  body:not(.fx-force) .cx-jolt { animation: none; }
}