/* ../site/blog/asm/cse-animation.css */
#cse {
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
  *,
  pre code {
    font-size: 1rem !important;
    line-height: 1.35rem;
  }
}
@media (max-width: 40em) {
  #cse {
    width: 100vw;
    overflow-x: scroll;
  }
  #cse .before {
    margin-left: 30em;
  }
  #cse .after {
    margin-right: min(15em, 25vw);
  }
}
#cse .before {
  margin-right: 0.2em;
}
#cse .after {
  margin-left: 0.2em;
}
#cse :is(.before, .after) {
  display: inline-block;
  position: relative;
}
#cse .before :is(.y, .m_w, .y2, .w2),
#cse .after .hidden {
  font-family: "Fira Code";
  color: #fff;
  -webkit-text-stroke-width: 0;
  display: inline-block;
  opacity: 0;
  position: absolute;
  transform: translate(var(--initial-x), var(--initial-y));
  z-index: 9;
}
#cse .before:hover :is(.y, .m_w, .y2, .w2),
#cse:has(.before:hover) .after .hidden {
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
#cse .before .y {
  --initial-x: 7.6em;
  --initial-y: 3.25em;
  --final-x: calc(var(--initial-x) + 17.8em);
  --final-y: var(--initial-y);
}
#cse .before .m_w {
  --initial-x: 10.9em;
  --initial-y: 3.25em;
  --final-x: calc(var(--initial-x) + 15.8em);
  --final-y: var(--initial-y);
}
#cse .before .y2 {
  --initial-x: 5.07em;
  --initial-y: 7.3em;
  --final-x: 25.3em;
  --final-y: 3.25em;
}
#cse .before .w2 {
  --initial-x: 7.5em;
  --initial-y: 7.3em;
  --final-x: 27.8em;
  --final-y: 3.25em;
}
#cse .after .hidden {
  opacity: 0;
}
#cse .before:hover :is(.y, .m_w, .y2, .w2) {
  animation-name: cse-slide;
}
@keyframes cse-slide {
  0% {
    transform: translate(var(--initial-x), var(--initial-y));
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--final-x), var(--final-y));
    opacity: 0;
  }
}
#cse:has(.before:hover) .after .hidden {
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-name: cse-show-t;
}
#cse .after #t_assignment {
  --initial-x: 3.2rem;
  --initial-y: 3.3rem;
}
#cse .after #t_use_in_x {
  --initial-x: 8rem;
  --initial-y: 4.75rem;
}
#cse .after #t_use_in_if {
  --initial-x: 5.6rem;
  --initial-y: 7.45rem;
}
@keyframes cse-show-t {
  0%, 25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}