/**
 * Animista Animations
 * Curated animations from https://animista.net
 *
 * These animations are optimized for the Yicheng Commonweal theme
 */

/* ========================================
   BUTTON HOVER EFFECTS
   ======================================== */

/* Button Push Down */
.animista-btn-push {
  transition: all 0.2s ease;
}

.animista-btn-push:active {
  transform: scale(0.95);
}

/* Button Grow */
.animista-btn-grow {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  transition-duration: 0.3s;
  transition-property: transform;
}

.animista-btn-grow:hover,
.animista-btn-grow:focus,
.animista-btn-grow:active {
  transform: scale(1.05);
}

/* Button Wobble Horizontal */
@keyframes wobble-horizontal {
  16.65% {
    transform: translateX(8px);
  }
  33.3% {
    transform: translateX(-6px);
  }
  49.95% {
    transform: translateX(4px);
  }
  66.6% {
    transform: translateX(-2px);
  }
  83.25% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}

.animista-btn-wobble:hover {
  animation: wobble-horizontal 0.8s both;
}

/* Button Ripple */
.animista-btn-ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.animista-btn-ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}

.animista-btn-ripple:active:after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

/* ========================================
   CARD EFFECTS
   ======================================== */

/* Card Lift */
.animista-card-lift {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.animista-card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
}

/* Card Flip */
.animista-card-flip {
  perspective: 1000px;
}

.animista-card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.animista-card-flip:hover .animista-card-flip-inner {
  transform: rotateY(180deg);
}

.animista-card-flip-front,
.animista-card-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.animista-card-flip-back {
  transform: rotateY(180deg);
}

/* Card Tilt */
.animista-card-tilt {
  transition: transform 0.3s ease;
}

.animista-card-tilt:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(5deg);
}

/* Card Glow */
@keyframes glow-border {
  0% {
    box-shadow: 0 0 5px rgba(239, 204, 100, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(239, 204, 100, 0.8), 0 0 30px rgba(239, 204, 100, 0.6);
  }
  100% {
    box-shadow: 0 0 5px rgba(239, 204, 100, 0.5);
  }
}

.animista-card-glow:hover {
  animation: glow-border 1.5s ease-in-out infinite;
}

/* ========================================
   TEXT EFFECTS
   ======================================== */

/* Text Focus In */
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

.animista-text-focus-in {
  animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

/* Text Tracking In */
@keyframes tracking-in {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}

.animista-text-tracking-in {
  animation: tracking-in 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

/* Text Pop Up */
@keyframes text-pop-up {
  0% {
    transform: translateY(0);
    transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    transform: translateY(-10px);
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc,
      0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc,
      0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}

.animista-text-pop-up:hover {
  animation: text-pop-up 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

/* Text Flicker In */
@keyframes text-flicker-in {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
    text-shadow: none;
  }
  10.1% {
    opacity: 1;
    text-shadow: none;
  }
  10.2% {
    opacity: 0;
    text-shadow: none;
  }
  20% {
    opacity: 0;
    text-shadow: none;
  }
  20.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
  }
  20.6% {
    opacity: 0;
    text-shadow: none;
  }
  30% {
    opacity: 0;
    text-shadow: none;
  }
  30.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45),
      0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.5% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45),
      0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.6% {
    opacity: 0;
    text-shadow: none;
  }
  45% {
    opacity: 0;
    text-shadow: none;
  }
  45.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45),
      0 0 60px rgba(255, 255, 255, 0.25);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45),
      0 0 60px rgba(255, 255, 255, 0.25);
  }
  55% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45),
      0 0 60px rgba(255, 255, 255, 0.25);
  }
  55.1% {
    opacity: 0;
    text-shadow: none;
  }
  57% {
    opacity: 0;
    text-shadow: none;
  }
  57.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55),
      0 0 60px rgba(255, 255, 255, 0.35);
  }
  60% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55),
      0 0 60px rgba(255, 255, 255, 0.35);
  }
  60.1% {
    opacity: 0;
    text-shadow: none;
  }
  65% {
    opacity: 0;
    text-shadow: none;
  }
  65.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55),
      0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55),
      0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75.1% {
    opacity: 0;
    text-shadow: none;
  }
  77% {
    opacity: 0;
    text-shadow: none;
  }
  77.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55),
      0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2),
      0 0 100px rgba(255, 255, 255, 0.1);
  }
  85% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55),
      0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2),
      0 0 100px rgba(255, 255, 255, 0.1);
  }
  85.1% {
    opacity: 0;
    text-shadow: none;
  }
  86% {
    opacity: 0;
    text-shadow: none;
  }
  86.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6),
      0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25),
      0 0 100px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6),
      0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25),
      0 0 100px rgba(255, 255, 255, 0.1);
  }
}

.animista-text-flicker-in {
  animation: text-flicker-in 4s linear both;
}

/* ========================================
   IMAGE EFFECTS
   ======================================== */

/* Image Kenburn Zoom */
@keyframes kenburns-top {
  0% {
    transform: scale(1) translateY(0);
    transform-origin: 50% 16%;
  }
  100% {
    transform: scale(1.15) translateY(-15px);
    transform-origin: top;
  }
}

.animista-image-kenburns {
  animation: kenburns-top 5s ease-out both;
}

/* Image Blur In */
@keyframes blur-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

.animista-image-blur-in {
  animation: blur-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

/* Image Slide In */
@keyframes slide-in-blurred {
  0% {
    transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    transform-origin: 100% 50%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}

.animista-image-slide-in-blurred {
  animation: slide-in-blurred 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* ========================================
   ICON EFFECTS
   ======================================== */

/* Icon Rotate */
@keyframes rotate-center {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animista-icon-rotate:hover {
  animation: rotate-center 0.6s ease-in-out both;
}

/* Icon Bounce */
@keyframes bounce-top {
  0% {
    transform: translateY(-5px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateY(-12px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateY(-6px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(-3px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(-2px);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.animista-icon-bounce:hover {
  animation: bounce-top 0.9s both;
}

/* Icon Heartbeat */
@keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  10% {
    transform: scale(0.91);
    animation-timing-function: ease-in;
  }
  17% {
    transform: scale(0.98);
    animation-timing-function: ease-out;
  }
  33% {
    transform: scale(0.87);
    animation-timing-function: ease-in;
  }
  45% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

.animista-icon-heartbeat:hover {
  animation: heartbeat 1.5s ease-in-out both;
}

/* ========================================
   LINK UNDERLINE EFFECTS
   ======================================== */

/* Underline From Center */
.animista-link-underline-center {
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.animista-link-underline-center::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 50%;
  background-color: currentColor;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.animista-link-underline-center:hover::after {
  width: 100%;
}

/* Underline From Left */
.animista-link-underline-left {
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.animista-link-underline-left::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.animista-link-underline-left:hover::after {
  width: 100%;
}

/* Underline Slide */
.animista-link-underline-slide {
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.animista-link-underline-slide::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

.animista-link-underline-slide:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* ========================================
   SCROLL REVEAL EFFECTS
   ======================================== */

/* Slide In Bottom */
@keyframes slide-in-bottom {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animista-scroll-slide-in-bottom {
  animation: slide-in-bottom 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Roll In */
@keyframes roll-in {
  0% {
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

.animista-scroll-roll-in {
  animation: roll-in 0.6s ease-out both;
}

/* Swing In Top */
@keyframes swing-in-top {
  0% {
    transform: rotateX(-100deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    transform-origin: top;
    opacity: 1;
  }
}

.animista-scroll-swing-in {
  animation: swing-in-top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}