/* ############## FREE ANIMATION CLASSES ############## */

/* ############## GENERAL ############## */

.wcf-free-ab-freeAnimGeneral {
  animation-duration: var(--animationDuration);
  animation-delay: var(--animationDelay);
  animation-iteration-count: var(--animationIterationCount);
  animation-timing-function: var(--animationTimingFunction);
  animation-fill-mode: both;
}

/* used to controll element visibility */
.wcf-free-ab-init-style-props {
  visibility: var(--visibility);
  opacity: var(--opacity);
}

/* swash in */
.wcf-free-ab-swashIn {
  animation-name: wcf-free-ab-swashIn-keyframes;
}

@keyframes wcf-free-ab-swashIn-keyframes {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }
  90% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(0.9, 0.9);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
}

/* vanishIn */
.wcf-free-ab-vanishIn {
  animation-name: wcf-free-ab-vanishIn-keyframes;
}

@keyframes wcf-free-ab-vanishIn-keyframes {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(2, 2);
    filter: blur(90px);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
    filter: blur(0px);
  }
}

/* space in left */
.wcf-free-ab-spaceInLeft {
  animation-name: wcf-free-ab-spaceInLeft-keyframes;
}
@keyframes wcf-free-ab-spaceInLeft-keyframes {
  0% {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: scale(0.2) translate(-200%, 0%);
  }
  100% {
    opacity: 1;
    transform-origin: 0% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}

/* space in right */
.wcf-free-ab-spaceInRight {
  animation-name: wcf-free-ab-spaceInRight-keyframes;
}
@keyframes wcf-free-ab-spaceInRight-keyframes {
  0% {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: scale(0.2) translate(200%, 0%);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 50%;
    transform: scale(1) translate(0%, 0%);
  }
}

/* Swap */
.wcf-free-ab-swap {
  animation-name: wcf-free-ab-swap-keyframes;
}
@keyframes wcf-free-ab-swap-keyframes {
  0% {
    opacity: 0;
    transform-origin: 0 100%;
    transform: scale(0, 0) translate(-700px, 0px);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(1, 1) translate(0px, 0px);
  }
}

/* TwisterInDown */
.wcf-free-ab-twisterInDown {
  animation-name: wcf-free-ab-twisterInDown-keyframes;
}

@keyframes wcf-free-ab-twisterInDown-keyframes {
  0% {
    opacity: 0;
    transform-origin: 0 100%;
    transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }
  30% {
    transform-origin: 0 100%;
    transform: scale(0, 0) rotate(360deg) translateY(-100%);
  }
  100% {
    opacity: 1;
    transform-origin: 100% 100%;
    transform: scale(1, 1) rotate(0deg) translateY(0%);
  }
}

/* ############## TEXT ############## */

/* clip reveal */
.wcf-free-ab-clip-reveal {
  clip-path: inset(0 0 100% 0);
  animation: wcf-free-ab-clip-reveal-keyframes 1s ease forwards;
}

@keyframes wcf-free-ab-clip-reveal-keyframes {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* clip slide up */
.wcf-free-ab-clip-slide-up {
  display: inline-block;
  clip-path: inset(100% 0 0 0);
  animation: wcf-free-ab-clip-slideup-keyframes 1s ease forwards;
}

@keyframes wcf-free-ab-clip-slideup-keyframes {
  0% {
    clip-path: inset(100% 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* clip slide right */
.wcf-free-ab-clip-slide-right {
  display: inline-block;
  clip-path: inset(0 0 0 100%);
  animation: wcf-free-ab-clip-slideright-keyframes 1s ease forwards;
}

@keyframes wcf-free-ab-clip-slideright-keyframes {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.ab_clip_fade_reveal {
  display: inline-block;
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  animation: ab_clip_fade_reveal_key 1.2s ease forwards;
}

@keyframes ab_clip_fade_reveal_key {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

.ab_clip_reverse_up {
  clip-path: inset(0 0 0 0);
  animation: ab_clip_reverse_up_key 1.2s ease forwards;
  display: inline-block;
  clip-path: inset(100% 0 0 0); /* Start hidden from bottom */
  animation: ab_clip_reverse_up_key 1s ease forwards;
}

@keyframes ab_clip_reverse_up_key {
  0% {
    clip-path: inset(100% 0 0 0);
  } /* Hidden */
  100% {
    clip-path: inset(0 0 0 0);
  } /* Fully visible */
}

.ab_clip_reverse_center {
  clip-path: inset(0 0 0 0);
  display: inline-block;
  clip-path: inset(0 50% 0 50%);
  animation: ab_clip_reverse_center_key 1.1s ease forwards;
}

@keyframes ab_clip_reverse_center_key {
  0% {
    clip-path: inset(0 50% 0 50%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* glitch  */

.ab_glitch_split {
  position: relative;
  font-weight: bold;
  display: inline-block;
  animation: ab_glitch_split_key 1.5s;
  overflow: hidden;
  animation-iteration-count: 2;
}

.ab_glitch_split::before,
.ab_glitch_split::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.ab_glitch_split::before {
  left: 2px;
  text-shadow: -2px 0 red;
  animation: ab_glitch_before_key 1.5s infinite;
}

.ab_glitch_split::after {
  left: -2px;
  text-shadow: -2px 0 cyan;
  animation: ab_glitch_after_key 1.5s infinite;
}

@keyframes ab_glitch_split_key {
  0% {
    transform: none;
  }
  20% {
    transform: skew(0.5deg);
  }
  40% {
    transform: translate(-2px, 1px);
  }
  60% {
    transform: translate(2px, -1px);
  }
  80% {
    transform: skew(-0.5deg);
  }
  100% {
    transform: none;
  }
}

@keyframes ab_glitch_before_key {
  0% {
    clip-path: inset(0 0 80% 0);
  }
  20% {
    clip-path: inset(20% 0 40% 0);
  }
  40% {
    clip-path: inset(40% 0 20% 0);
  }
  60% {
    clip-path: inset(10% 0 60% 0);
  }
  80% {
    clip-path: inset(50% 0 10% 0);
  }
  100% {
    clip-path: inset(0 0 80% 0);
  }
}

@keyframes ab_glitch_after_key {
  0% {
    clip-path: inset(50% 0 20% 0);
  }
  20% {
    clip-path: inset(10% 0 60% 0);
  }
  40% {
    clip-path: inset(40% 0 20% 0);
  }
  60% {
    clip-path: inset(0 0 80% 0);
  }
  80% {
    clip-path: inset(20% 0 40% 0);
  }
  100% {
    clip-path: inset(50% 0 20% 0);
  }
}

/* ab_char_fade_up */

.ab_char_fade_up {
  display: inline-block;
}

.ab_char_fade_up span {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: ab_char_fade_up_key 0.5s forwards;
  animation-delay: calc(var(--i) * 0.05s);
}

@keyframes ab_char_fade_up_key {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* gradient */
.ab_gradient_move {
  font-weight: bold;
  background: linear-gradient(90deg, #ff4d4d, #4d94ff, #6aff6a);
  background-size: 200%;
  -webkit-background-clip: text;
  color: transparent;
  animation: ab_gradient_move_key 3s linear infinite;
}

@keyframes ab_gradient_move_key {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 200%;
  }
}

/* ab_char_rotate */
.ab_char_rotate {
  display: inline-block;
}

.ab_char_rotate span {
  display: inline-block;
  opacity: 0;
  transform: rotateX(90deg);
  animation: ab_char_rotate_key 0.5s ease forwards;
  animation-delay: calc(var(--i) * 0.05s);
}

@keyframes ab_char_rotate_key {
  to {
    opacity: 1;
    transform: rotateX(0deg);
  }
}

/* ab_char_clip_reveal */

.ab_char_clip_reveal {
  display: inline-block;
}

.ab_char_clip_reveal span {
  display: inline-block;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  animation: ab_char_clip_reveal_key 0.45s ease forwards;
  animation-delay: calc(var(--i) * 0.05s);
}

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

/* transform animation  */

/* Scale Up */
.ab_scale_up {
  animation: ab_scaleUp 0.7s ease forwards;
}

@keyframes ab_scaleUp {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Rotate In */
.ab_rotate_in {
  animation: ab_rotateIn 0.7s ease-out forwards;
}

@keyframes ab_rotateIn {
  0% {
    transform: rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

/* Slide Up */
.ab_slide_up {
  animation: ab_slideUp 0.7s ease-out forwards;
}

@keyframes ab_slideUp {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Skew Reveal */
.ab_skew_reveal {
  animation: ab_skewReveal 0.8s ease forwards;
}

@keyframes ab_skewReveal {
  0% {
    transform: skewX(18deg) translateX(-40px);
    opacity: 0;
  }
  100% {
    transform: skewX(0deg) translateX(0);
    opacity: 1;
  }
}

/* Flip X */
.ab_flip_x {
  transform-style: preserve-3d;
  animation: ab_flipX 0.8s ease forwards;
}

@keyframes ab_flipX {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}

/* Zoom In */
.ab_zoom_in {
  animation: ab_zoomIn 0.9s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes ab_zoomIn {
  0% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Combo Reveal (Move + Scale + Fade) */
.ab_combo_reveal {
  animation: ab_comboReveal 0.9s ease forwards;
}

@keyframes ab_comboReveal {
  0% {
    transform: translateY(40px) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}