/* reset */
*,
*::before,
*::after {
  
}

body {
  
}


/* other */
.info {
 
}

p {
  
}


/* block-$ */
.block-effect {
  
}

.block-reveal {
  --t: calc(var(--td) + var(--d));
  display:flex;

  color: transparent;
  padding: 4px;

  position: relative;
  overflow: hidden;

  -webkit-animation: revealBlock 0s var(--t) forwards;

          animation: revealBlock 0s var(--t) forwards;
}

.block-reveal::after {
  content: '';

  width: 0%;
  height: 100%;
  padding-bottom: 4px;

  position: absolute;
  top: 0;
  left: 0;

  background: var(--bc);
  -webkit-animation: revealingIn var(--td) var(--d) forwards, revealingOut var(--td) var(--t) forwards;
          animation: revealingIn var(--td) var(--d) forwards, revealingOut var(--td) var(--t) forwards;
}


/* animations */
@-webkit-keyframes revealBlock {
  100% {
    color: white;
  }
}
@keyframes revealBlock {
  100% {
    color: white;
  }
}

@-webkit-keyframes revealingIn {

  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes revealingIn {

  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes revealingOut {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }

}

@keyframes revealingOut {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }

}