/* Picture effects on the homepage: a black-and-white picture that shows its colour around the pointer (particles) and while it scrolls
   through the middle of the screen. Pictures that carry data-image-fx get it (see assets/particle-image.js and square-lens.js).
   The hero picture does NOT get the pointer effect, because the wordmark on it already has one: it is in colour while it is in view and turns black and white as it scrolls away (assets/hero-gray.js). */
[data-image-fx]{position:relative;overflow:hidden;}
[data-image-fx] img{animation:none!important;}
.particle-image-ready>img{filter:grayscale(1);}
.square-lens-canvas,.particle-image-canvas,.particle-image-monochrome{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.square-lens-canvas{z-index:1;}
.particle-image-canvas{z-index:3;opacity:var(--image-clarity,1);}
[data-image-fx]::after{z-index:4;}
[data-image-fx] :is(h3,figcaption){z-index:5;}
.hero-shot > .hero-image{filter:grayscale(var(--hero-gray,0));}
/* the hero picture zooms in with its own animation, which also sets the filter: same animation, now with the grey amount from assets/hero-gray.js */
@keyframes shiftHeroCover{
  from{transform:scale(1.18);filter:grayscale(var(--hero-gray,0)) saturate(1) brightness(.82);}
  to{transform:scale(1.10);filter:grayscale(var(--hero-gray,0)) saturate(1.1) brightness(1);}
}