/* ============================================================
   Venn orbit dots — "It knows what it doesn't" section
   Pure CSS (offset-path). Three orange dots glide along three
   overlapping circles: one shared linear speed, one direction,
   phases 0° / 133° / 266° chosen so the dots can never collide
   at the circle intersections. Loops seamlessly (16s).

   Required markup (SVGs live in assets/):

   <div class="knows__venn" aria-hidden="true">
     <img class="venn__circle" style="left:0"     src="assets/venn-circle-a.svg" alt="">
     <img class="venn__circle" style="left:60px"  src="assets/venn-circle-b.svg" alt="">
     <img class="venn__circle" style="left:120px" src="assets/venn-circle-b.svg" alt="">
     <img class="venn__dot venn__dot--a" src="assets/venn-dot.svg" alt="">
     <img class="venn__dot venn__dot--b" src="assets/venn-dot.svg" alt="">
     <img class="venn__dot venn__dot--c" src="assets/venn-dot.svg" alt="">
   </div>

   Fallback: with prefers-reduced-motion or without offset-path
   support the dots stay at fixed spots (the left/top values on
   .venn__dot--a/b/c below).
   ============================================================ */

.knows__venn {
  position: relative;
  width: 240px;
  height: 120px;
}

.venn__circle {
  position: absolute;
  top: 0;
  width: 120px;
  height: 120px;
}

.venn__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  offset-rotate: 0deg;
}

/* static spots: used when motion is reduced or offset-path unsupported */
.venn__dot--a { left: 85px; top: 5px; }
.venn__dot--b { left: 116px; top: 58px; }
.venn__dot--c { left: 147px; top: 107px; }

@media (prefers-reduced-motion: no-preference) {
  @supports (offset-path: path("M 0 0 H 100")) {
    .venn__dot--a,
    .venn__dot--b,
    .venn__dot--c {
      left: 0; top: 0;
      animation: venn-orbit 16s linear infinite;
    }
    .venn__dot--a {
      offset-path: path("M 120 60 a 60 60 0 1 1 -120 0 a 60 60 0 1 1 120 0");
    }
    .venn__dot--b {
      offset-path: path("M 180 60 a 60 60 0 1 1 -120 0 a 60 60 0 1 1 120 0");
      animation-delay: -5.91s;  /* 133 deg */
    }
    .venn__dot--c {
      offset-path: path("M 240 60 a 60 60 0 1 1 -120 0 a 60 60 0 1 1 120 0");
      animation-delay: -11.82s; /* 266 deg */
    }
  }
}

@keyframes venn-orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}