@charset "utf-8";

/* =========================
KEYFRAMES
========================= */

@keyframes hover {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

@keyframes cta {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.03);
  }
}

@keyframes frameLineHorizontal {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes frameLineVertical {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}


/* =========================
GSAP ANIMATION BASE
========================= */

.fadeIn,
.fadeInUp,
.fadeInDown,
.fadeInLeft,
.fadeInRight,

.backUp,
.backDown,
.backLeft,
.backRight,

.elasticUp,
.elasticDown,
.elasticLeft,
.elasticRight,

.bounceUp,
.bounceDown,
.bounceLeft,
.bounceRight,

.expoUp,
.expoDown,
.expoLeft,
.expoRight,

.circUp,
.circDown,
.circLeft,
.circRight,

.sineUp,
.sineDown,
.sineLeft,
.sineRight,

.scale,
.blur,
.rotate,
.zoom,
.pop,
.elasticScale {
  opacity: 0;
}


/* =========================
POSITION ANIMATION
========================= */

.fadeInUp,
.backUp,
.elasticUp,
.bounceUp,
.expoUp,
.circUp,
.sineUp {
  transform: translateY(40px);
}

.fadeInDown,
.backDown,
.elasticDown,
.bounceDown,
.expoDown,
.circDown,
.sineDown {
  transform: translateY(-40px);
}

.fadeInLeft,
.backLeft,
.elasticLeft,
.bounceLeft,
.expoLeft,
.circLeft,
.sineLeft {
  transform: translateX(-40px);
}

.fadeInRight,
.backRight,
.elasticRight,
.bounceRight,
.expoRight,
.circRight,
.sineRight {
  transform: translateX(40px);
}


/* =========================
SCALE ANIMATION
========================= */

.scale {
  transform: scale(.8);
  transform-origin: center center;
}

.zoom {
  transform: scale(1.3);
  transform-origin: center center;
}

.pop {
  transform: scale(0);
  transform-origin: center center;
}

.elasticScale {
  transform: scale(0);
  transform-origin: center center;
}


/* =========================
ROTATE ANIMATION
========================= */

.rotate {
  transform: rotate(-10deg);
  transform-origin: center center;
}


/* =========================
BLUR ANIMATION
========================= */

.blur {
  filter: blur(10px);
}


/* =========================
MASK ANIMATION
========================= */

.maskUp,
.maskDown,
.maskLeft,
.maskRight {
  overflow: hidden;
  will-change: clip-path;
}

.maskUp {
  clip-path: inset(0 0 100% 0);
}

.maskDown {
  clip-path: inset(100% 0 0 0);
}

.maskLeft {
  clip-path: inset(0 100% 0 0);
}

.maskRight {
  clip-path: inset(0 0 0 100%);
}


/* =========================
LINE ANIMATION
========================= */

.line {
  transform: scaleX(0);
  transform-origin: left center;
}

.lineCenter {
  transform: scaleX(0);
  transform-origin: center center;
}