.spark-traveller{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.spark-traveller::before{content:'';position:absolute;inset:0;opacity:var(--spark-strength,0);background:radial-gradient(circle 130px at var(--spark-x,50%) var(--spark-y,50%),rgba(212,85,0,.12),rgba(212,85,0,.04) 45%,transparent 100%);pointer-events:none}
.spark-traveller i{position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;background:#d45500;opacity:0;will-change:transform,opacity;box-shadow:0 0 9px 2px #d4550065}
.spark-traveller .spark-head{width:7px;height:7px;background:#d45500;box-shadow:0 0 8px 3px #d45500b0,0 0 24px 9px #d455004d}

.motion-paused .spark-traveller{display:none}
@media(prefers-reduced-motion:reduce){.spark-traveller{display:none}}

/* Reveal the existing photograph through its original colour filter. */
.hero-shade,.perspective-shade,.contact-shade{--spark-strength:0;--spark-radius:260px;pointer-events:none}
@supports (mask-image:radial-gradient(circle,transparent,black)) or (-webkit-mask-image:radial-gradient(circle,transparent,black)){
 .hero-shade,.perspective-shade,.contact-shade{
  -webkit-mask-image:radial-gradient(circle var(--spark-radius) at var(--spark-x,50%) var(--spark-y,50%),rgba(0,0,0,calc(1 - var(--spark-strength)*.94)) 0%,rgba(0,0,0,calc(1 - var(--spark-strength)*.84)) 18%,rgba(0,0,0,calc(1 - var(--spark-strength)*.48)) 47%,#000 100%);
  mask-image:radial-gradient(circle var(--spark-radius) at var(--spark-x,50%) var(--spark-y,50%),rgba(0,0,0,calc(1 - var(--spark-strength)*.94)) 0%,rgba(0,0,0,calc(1 - var(--spark-strength)*.84)) 18%,rgba(0,0,0,calc(1 - var(--spark-strength)*.48)) 47%,#000 100%);
 }
}
@media(max-width:760px){.hero-shade,.perspective-shade,.contact-shade{--spark-radius:175px}}
.motion-paused .hero-shade,.motion-paused .perspective-shade,.motion-paused .contact-shade{-webkit-mask-image:none;mask-image:none}
@media(prefers-reduced-motion:reduce){.hero-shade,.perspective-shade,.contact-shade{-webkit-mask-image:none;mask-image:none}}