/* Hero background: replaces Framer's drifting pixel layers with the dithered canvas
   scene drawn by src/scripts/hero-background.js. The class names are Framer's ids for
   the layers inside "Animated pixel background" (see README.md, Page sections). */

/* Framer's pixel layers: "Floating evidence network" and "Drifting pixels 1-3" */
.framer-1OcLV .framer-1j6m2ch,
.framer-1OcLV .framer-1oxx7me,
.framer-1OcLV .framer-iz2ji8,
.framer-1OcLV .framer-v0suaw {
  display: none;
}

/* "Headline contrast veil": a gentle vignette instead of blacking out the centre,
   so the headline sits on the scene the way it does on maritime.sh */
.framer-1OcLV .framer-1itgydl {
  background:
    /* dark pool behind the intro paragraph so it stays readable on the dots */
    radial-gradient(ellipse 34% 16% at 50% 70%, rgba(10, 10, 10, 0.96) 0%, rgba(10, 10, 10, 0.85) 45%, rgba(10, 10, 10, 0) 100%),
    radial-gradient(ellipse 55% 60% at 50% 48%, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0) 25%, rgba(10, 10, 10, 0) 70%, rgba(10, 10, 10, 0.7) 100%);
}

.hero-dither {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  image-rendering: pixelated;
}

/* "Connect your business systems..." intro paragraph: lift it off the dots */
.framer-1OcLV .framer-ph832f p {
  text-shadow: 0 0 10px rgba(10, 10, 10, 1), 0 0 24px rgba(10, 10, 10, 0.9);
}