/*
MP SELECTORS */
:root {
  --march: 1.5em;
}

[data-idx],
#css3d {
  /* memory hints */

  &mp {
    will-change: transform;
  }

  &.mp-unset {
    /* will-change: transform; */
  }
  &.mp-poster {
    /* will-change: display; */
  }
  &.mp-native {
    /* pseudo, scroll-position, position, width, height... */
  }

  &.mp-offscreen {
    /*if full-width rules are uncommented*/
    /*will-change: position, width, height;*/
  }
  &#css3d > .mp-block > .mp-block > .mp-block {
    &,
    > * {
      /* css3d and children */
      /* will-change: transform; */
    }
  }
}

.mp-offscreen {
  pointer-events: none;
  > * {
    z-index: 999;
  }
  &.tool {
    bottom: 8rem;
  }
  .jsgif,
  .libgif {
    display: none;
  }
}

.mp-unset {
  background-color: rgba(0, 0, 255, 0.5);
  /* toggle CSS: toSvg, box/css, quirks, offscreen */
  transform: initial !important;
  /* pseudo states */
  &:hover {
    background-color: initial;
  }
  &.mp-offscreen {
    /* full-size box
    position: absolute;
    top: 0;
    right: 100%;
    width: 100%;
    height: 100%;
    > *{width:100%;height:100%;}*/
  }
}

.mp-host {
  position: absolute;
  transform: initial !important;
  /* more */
  rotate: none;
  scale: none;
  zoom: none;
}

.mp-align {
  /* block, margin, transform, animation, left, right
 a, img, span, obj
  */
}

.tool {
  width: 8rem;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 3;
  cursor: zoom-in;
}

/* CSS3D: added to user stylesheet to target cloned elements */
/* CSS3D: callout CORS media, such as injected iframes */
#css3d > .mp-block > .mp-block > .mp-block > * {
  border: 0.125rem dotted red;
}

/*
MP INTERFACE */

#mp {
  user-select: none;
  position: fixed;
  &,
  .tool,
  .tool * {
    margin: 0;
    padding: 0;
  }

  #css3d {
    z-index: 1;
    pointer-events: none;

    .mp-block,
    .mp-block > .mp-block > .mp-block > .mp-native {
      pointer-events: none !important;
      > * {
        backface-visibility: hidden;
        /* rgb(0 0 0 / 33.33%) */
        pointer-events: initial;
      }
    }
  }
  &,
  #css3d,
  canvas[data-engine] {
    overflow: hidden;
    /*overflow-y: auto;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #css3d,
  canvas[data-engine] {
    position: absolute;
    /*cursor: grab;*/
  }
  canvas {
    image-rendering: pixelated;
  }

  #atlas {
    background-color: rgba(255, 255, 255, 0.75);
    overflow: hidden;
    /*overflow-y: auto;*/
    &:hover,
    &.active {
      transform: scale(2);
      transform-origin: bottom right;
    }
    a {
      display: block;
    }
    canvas {
      display: block;
      width: 100%;
      height: auto;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2Nk+M/QwMDI0MAABYxgGkkQIoAkiBCACgIABm4HhEEa4PgAAAAASUVORK5CYII=');
      background-size: auto 100%;
      pointer-events: none;
    }
    #caret {
      /* index and inPolar */
      position: absolute;
      box-sizing: border-box;
      bottom: 0;
      left: 0;
      /*width: 100%;
      height: 100%;*/
      border: 0.05em dashed red;
      /*pointer-events: none;*/
      transition: bottom 0.25s, left 0.25s, width 0.25s, height 0.25s, backgroundColor 0.25s;
    }
  }
}

/*
Analogue of raymarch chain:
extract visual hierarchy*/
.march {
  &,
  mp {
    /* Chains (root and child) */
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
    /*font-size: 1.125em;*/
    border-radius: 0.25em;
    background-color: rgba(255, 0, 0, 0.5);
    box-shadow: rgba(255, 255, 255, 0.66) 0em 0.3em 0.15em 0.05em inset, rgba(0, 0, 0, 0.66) 0em -0.15em 0.15em 0.15em inset;
  }

  mp& {
    /* Chain root (stable) */
    font-size: 1.5em;
    float: left;
    margin-right: -100%;
  }

  .mp-allow {
    zoom: 1.25;
  }

  & mp {
    pointer-events: none;
    /* Chain child (jitter) */

    animation-name: march;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: paused;

    /* style repeat... */
    /*margin-left: 0.5em;*/
    &.odd {
      background-color: rgba(0, 0, 255, 0.5);
    }

    /* Chain child (secondary) */
    /* &:after,*/
    &:before {
      content: '';
      position: absolute;
      border-radius: 0.25em 0.25em 0 0;
      height: 0.5em;
    }
  }

  & mp.k {
    animation-name: none;
    /* path sample */
    font-size: 0.5em;
    box-shadow: none;
    background-color: rgba(255, 255, 0, 0.5);
    border-radius: 0.5em 0 0 0;
    display: block;

    position: absolute;
    /*margin: 0 auto -1em;*/
  }
  line-height: 1;

  /* style jitter... */
  > mp.p {
    /*font-size: var(--march);*/
    animation-delay: 0.125s !important;
    z-index: 3;
    > mp.p {
      animation-delay: 0.25s !important;
      z-index: 6;
      > mp.p {
        animation-delay: 0.5s !important;
        z-index: 9;
        > mp.p {
          animation-delay: 0.75s !important;
          z-index: 6;
        }
      }
    }
  }
}

@keyframes march {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    transform: translate(0, 12.5%) translate3d(-0.125em, 0.125em, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate(0, -25%) translate3d(0.5em, 0em, 0);
  }

  50% {
    transform: translate(0.5em, 0em) rotate(15deg);
  }
  100% {
    transform: translate(-0.25em, 0em) rotate(-7.5deg) scale(1.05);
  }
}