/*
Theme Name: Specialty Access Alliance
Theme URI: https://SAA.com
Description: SAA theme support Hello
Author: Abdallah
Author URI: https://SAA.com
Template: hello-elementor
Version: 1.0
Text Domain: Specialty Access Alliance
*/

/* --------  text reveal left to right --------- */
.text-reveal {
  padding: 1px 10px;
  margin-left: -5px;
  background: linear-gradient(
    var(--e-global-color-primary), 
    var(--e-global-color-primary)
  ) no-repeat left center / 0% 100%;

}


.text-reveal.is-visible {
  animation: revealFill 1.2s ease forwards;
}

@keyframes revealFill {
  0% {
    background-size: 0% 100%;
    border-radius: 0px;
  }
  80% {
    background-size: 95% 100%;
    border-radius: 4px;
  }
  100% {
    background-size: 100% 100%;
    border-radius: 8px;
  }
}
/* --------  Arrow reveal bottom to top --------- */

.anim-height img {
  clip-path: inset(100% 0 0 0);
}

.anim-height.is-visible img {
  animation: revealArrow 1.2s ease forwards;
}

@keyframes revealArrow {
  from {
    clip-path: inset(100% 0 0 0);
    transform: scale(1.3);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}


/* --------  Bar width reveal down to top --------- */
.width-reveal {
  clip-path: inset(0 0 0 0);
  opacity: 0;
}

.width-reveal.is-visible {
  animation: cortina-top 1.2s ease 1.2s forwards;
}

@keyframes cortina-top {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* --------  Bar width reveal top to down --------- */
.width-reveal h2{
  transform: translateY(100%);
  opacity: 0;
}

.width-reveal.is-visible h2{
  animation: cortina-down 1.2s ease 1.2s forwards;
}

@keyframes cortina-down {
  from {
    transform: translateY(100%);
    opacity: 1;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}


/* --------  Slide right --------- */
.fade-in-right-short {
	opacity: 0;
}



.fade-in-right-short.is-visible {
  animation: fadeInRightShort 0.8s ease 0.15s both;
}

@keyframes fadeInRightShort {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --------  Slide left --------- */
.fade-in-left-short {
	opacity: 0;
}


.fade-in-left-short.is-visible {
  animation: fadeInleftShort 0.8s ease 0.15s both;
}

@keyframes fadeInleftShort {
  from {
    opacity: 0;
    transform: translateX(200px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* --------  Slide top --------- */

.fade-in-top-short {
	opacity: 0;
}

.fade-in-top-short.is-visible {
  animation: fadeIntopShort 0.8s ease 0.15s both;
}

@keyframes fadeIntopShort {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}