/* Markup specifically in this structure:
  <div class="exfiltrate-animated-svg-with-css">
    <div class="cpu-exfiltrator">
      <output class="cpu-phase-cycle-request0r"></output>
      <output class="svg-animation-current-state-reporter"></output>
      <div class="xfl-presentation">
        The final embeded data will be hosted on cpu-exfiltrator - and presenting
        here will allow me to show the internal states as the algorithm executes.
      </div>
    </div>
  </div>
*/

/* Hosts 4 timeline values and their animations */
.exfiltrate-animated-svg-with-css {
}

/* Hosts the 2 animations of the CSS CPU Hack, no timelines */
.cpu-exfiltrator {
  /* The CPU Hack's frame cycler has a 5 tick sequence now, first 4 are the same.
  // 0: ready - capture phase
  // 1: capture lock phase
  // 2: saving - hoist phase
  // 3: hoist lock phase
  // 4: CPU Frame Complete (new) helps w/sequencing stability and safe signaling.
  // In this case, 4 stays active until data-type is 0, then will become 0 again.
  // When data-type is reset, data-value is also reset.
  */
  /* CPU Hack will request capture lock phase (1) when data is ready.
  // Data ready = data-type > 0 && raw-frame-data - 35 === data-value
  */
  /* data-type values - baked into the server-side script that generates the SVG:
  // 0: local signaling in CSS here, as described above
  // 1-32: data frames. Since the SVG Animation requires 1D transmition expressed
  //   over animation time, we won't know if we're repeating values on purpose or
  //   what we're looking at in general without sentinels before each data frame.
  // 33: Data length, even if data length is 1.
  // 34: Checksum of data and length. Both PHP and CSS run the same checksum alg,
  //   if the server's checksum value matches the CSS result, we have a degree of
  //   certainty that it was successful. The SVG Animation can easily skip frames
  //   which can cause all sorts of false reads. The exfiltrator will continue to
  //   run until the checksum matches, overwritting whenever the animation loops.
  */
}

/* Sources the timeline controlling the CPU Hack's 5 tick sequence / CPU frame */
.cpu-phase-cycle-request0r {
}

/* Sources 3 timelines to read & report the Animated SVG's current indicated data
// WARN: There is 1 frame between raw & type, and 1 SVG step between type & value
// raw-frame-data: the data reported by reading the SVG Animation's current frame
// data-type: Indicates what the next SVG Animation step's data represents & will
//   hold on to it THROUGH the next step - keeping in in scope for the data-value
// data-value: 0 if typing step, else the 16 bit data value indicated by raw - 35
*/
.svg-animation-current-state-reporter {
  /* The CPU Hack's cycler phase also indicates the timing of what to do here. */
  /* Phase 0 indicates we are to move forward with reading SVG Animation data. */
  /* Phase 4 signals resetting data type and value to 0, which causes phase 0. */
  /* WARN: SVG may skip steps rendering, so rewrite & checksum helps accuracy. */

  /* --xfl-raw-data, --xfl-data-type, --xfl-data-value */
  &::before {
    content: /* url('http://css-api.propjockey.io/api.svg.php?'); */
  }
  &::after {
    content: "";
    /* there's 4 stages here
    // 1) cpu tells us to reset to 0s
    // 2) cpu is in phase 0 (capture running) and stays until these stages finish
    //   a. if svg animation frame (based on raw) is type, set type else use prev
    //   3. if svg animation frame (based on raw) is data, set data else use prev
    // 4) CPU is executing, our job is to hold prev values and ignore the SVG ani
    */
  }
}

.xfl-presentation {
  /* The final embeded data will be hosted on cpu-exfiltrator - and presenting
  // here will allow me to show the internal states as the algorithm executes.
  */
}