/* KuarkTek, the hover distortion's own styling.

   This is the contract assets/js/distortion.js writes against: the sampled
   canvas it lays over a frame, and the masked layers it drags under the
   pointer. It used to live in home.css, which is why a case-study page could
   load the behaviour and get an unstyled canvas in normal flow, tearing the
   frame open. Behaviour and styling travel together now.

   Load it straight after base.css, before the page's own stylesheet: a page
   that wants a different size or resting state for its own frames says so in
   its own file and wins on order. */
.project__distortion-layer {
  --distort-position-x: 50%;
  --distort-position-y: 50%;
  --distort-shift-x: 0px;
  --distort-shift-y: 0px;
  position: absolute;
  inset: -4%;
  z-index: 1;
  width: 108%;
  max-width: none;
  height: 108%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--distort-shift-x), var(--distort-shift-y), 0) scale(1.045);
  transition:opacity var(--dur-fast) var(--ease);
  will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(circle 24% at var(--distort-position-x) var(--distort-position-y), #000 0%, rgba(0, 0, 0, .9) 42%, rgba(0, 0, 0, .35) 72%, transparent 100%);
  mask-image: radial-gradient(circle 24% at var(--distort-position-x) var(--distort-position-y), #000 0%, rgba(0, 0, 0, .9) 42%, rgba(0, 0, 0, .35) 72%, transparent 100%);
}
.project__distortion-layer--secondary {
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle 15% at var(--distort-position-x) var(--distort-position-y), #000 0%, rgba(0, 0, 0, .75) 58%, transparent 100%);
  mask-image: radial-gradient(circle 15% at var(--distort-position-x) var(--distort-position-y), #000 0%, rgba(0, 0, 0, .75) 58%, transparent 100%);
}
.project__distortion-layer.is-active { opacity: .92; }
.project__distortion-layer--secondary.is-active { opacity: .62; }
.project__distortion-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.025);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-slower) var(--ease);
  will-change: transform;
}
.project__distortion-canvas.is-ready { opacity: 1; }
/* a video tile keeps its player as the resting layer: the sampled canvas
   only covers it while the pointer is there, so the re-sampling loop never
   runs on a tile nobody is touching */
.project__media--video > .project__distortion-canvas.is-ready { opacity: 0; }
.project__media--video:hover > .project__distortion-canvas.is-ready { opacity: 1; }