.rop-reveal{
  opacity:0;
  transform:translateY(40px);
  transition:
    opacity .9s cubic-bezier(.2,.65,.2,1),
    transform .9s cubic-bezier(.2,.65,.2,1);
  will-change:transform, opacity;
}

.rop-reveal.active{
  opacity:1;
  transform:translateY(0);
}

.rop-reveal-left{
  opacity:0;
  transform:translateX(-50px);
  transition:
    opacity .9s cubic-bezier(.2,.65,.2,1),
    transform .9s cubic-bezier(.2,.65,.2,1);
}

.rop-reveal-left.active{
  opacity:1;
  transform:translateX(0);
}

.rop-reveal-right{
  opacity:0;
  transform:translateX(50px);
  transition:
    opacity .9s cubic-bezier(.2,.65,.2,1),
    transform .9s cubic-bezier(.2,.65,.2,1);
}

.rop-reveal-right.active{
  opacity:1;
  transform:translateX(0);
}

.rop-delay-1{
  transition-delay:.1s;
}

.rop-delay-2{
  transition-delay:.2s;
}

.rop-delay-3{
  transition-delay:.3s;
}

.rop-delay-4{
  transition-delay:.4s;
}

.rop-scale{
  opacity:0;
  transform:scale(.92);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.rop-scale.active{
  opacity:1;
  transform:scale(1);
}

.rop-float{
  animation:ropFloat 4s ease-in-out infinite;
}

@keyframes ropFloat{
  0%{
    transform:translateY(0px);
  }
  50%{
    transform:translateY(-10px);
  }
  100%{
    transform:translateY(0px);
  }
}

.rop-glow{
  position:relative;
}

.rop-glow::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:
    linear-gradient(
      135deg,
      rgba(217,4,41,.45),
      rgba(18,61,122,.35)
    );
  z-index:-1;
  filter:blur(18px);
  opacity:.65;
}