wp-rdnyc/assets/css/_rolling-mandala.scss

/* rolling mandala */
// @-webkit-keyframes roll-in {
//   0% {
//     -webkit-transform: rotate(90deg) translateY(-50%) translateX(-50%);
//     -moz-transform: rotate(90deg) translateY(-50%) translateX(-50%);
//     -ms-transform: rotate(90deg) translateY(-50%) translateX(-50%);
//     -o-transform: rotate(90deg) translateY(-50%) translateX(-50%);
//     transform: rotate(90deg) translateY(-50%) translateX(-50%);
//   }

//   100% {
//     -webkit-transform: rotate(0) translateY(-50%) translateX(0px);
//     -moz-transform: rotate(0) translateY(-50%) translateX(0px);
//     -ms-transform: rotate(0) translateY(-50%) translateX(0px);
//     -o-transform: rotate(0) translateY(-50%) translateX(0px);
//     transform: rotate(0) translateY(-50%) translateX(0px);
//   }
// }
// @-moz-keyframes roll-in {
//   0% {
//     -webkit-transform: rotate(90deg) translateY(-50%) translateX(-50%);
//     -moz-transform: rotate(90deg) translateY(-50%) translateX(-50%);
//     -ms-transform: rotate(90deg) translateY(-50%) translateX(-50%);
//     -o-transform: rotate(90deg) translateY(-50%) translateX(-50%);
//     transform: rotate(90deg) translateY(-50%) translateX(-50%);
//   }

//   100% {
//     -webkit-transform: rotate(0) translateY(-50%) translateX(0px);
//     -moz-transform: rotate(0) translateY(-50%) translateX(0px);
//     -ms-transform: rotate(0) translateY(-50%) translateX(0px);
//     -o-transform: rotate(0) translateY(-50%) translateX(0px);
//     transform: rotate(0) translateY(-50%) translateX(0px);
//   }
// }













// @keyframes roll-in {
//   0% {
//     transform: rotate(90deg) translateY(-50%) translateX(-50%);
//   }

//   100% {
//     transform: rotate(0) translateY(-50%) translateX(0px);
//   }
// }
// .roll-mandala {
//   position: absolute;
//   right: $mandala_distance_right;
//   top: 50%;
//   width: $mandala_width;
//   pointer-events: none;
//   opacity: .5;
//   z-index: -999;
//   animation: roll-in 2s cubic-bezier(0.51, 0.04, 0.68, 1.08);
//   transform: translateY(-50%);
// }







@use "sass:math";


$mandala_height_base: 76vh;
$mandala_right_shift: math.div($mandala_height_base, -2);
$mandala_final_opacity_base: 0.33;
$mandala_final_opacity_md: 0.66;

@keyframes roll-in-down-md {
  0% {
    transform: rotate(80deg) translateY(-50%) translateX(-50%);
    opacity: 1.0;
  }

  100% {
    transform: rotate(0) translateY(-50%) translateX(0px);
    opacity: $mandala_final_opacity_base;
  }
}
@keyframes roll-in-up-md {
  0% {
    transform: rotate(80deg) translateY(-50%) translateX(-50%);
    opacity: 1.0;
  }

  100% {
    transform: rotate(0) translateY(-50%) translateX(0px);
    opacity: $mandala_final_opacity_md;
  }
}

.roll-mandala {
  height: $mandala_height_base;
  max-width: inherit !important;
  position: absolute;
  right: $mandala_right_shift;
  top: 50%;
  pointer-events: none;
  z-index: -999;
  transform: translateY(-50%);

  @include media-breakpoint-down(md) {
    opacity: $mandala_final_opacity_base;
    animation: roll-in-down-md 1.5s cubic-bezier(0.51, 0.04, 0.68, 1.08);
  }

  @include media-breakpoint-up(md) {
    opacity: $mandala_final_opacity_md;
    animation: roll-in-up-md 1.5s cubic-bezier(0.51, 0.04, 0.68, 1.08);
  }
  
}