/*
 * Witsee motion — the styles the background needs. Class names are suggestions; only the
 * properties matter.
 */

/* The section the graphic lives in (on witsee.com: hero + "We guide you from sense to trust").
   It must be positioned, clip its overflow, and start a stacking context so the canvas can sit
   behind the content with a negative z-index. */
.witsee-motion-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

/* The canvas fills the whole section, behind everything. */
.witsee-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: block;
  pointer-events: none;
  /* Safety net: the graphic always fades out before the section ends — never a hard edge.
     Keep this ≥ CONFIG.bottomMargin in witsee-motion.js. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 200px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 200px), transparent);
}

/* Readability scrim over the whole graphic (not just the hero), so there is no seam. */
.witsee-motion-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 38%, rgba(0, 0, 0, 0) 60%);
}
@media (max-width: 760px) {
  .witsee-motion-section::before { background: rgba(0, 0, 0, .18); }
}