/* //////////////////////// */
/* //////////////////////// */
/* ////// ANIMATIONS ////// */
/* //////////////////////// */
/* //////////////////////// */

.animate--spin {
  -webkit-animation-name: spin;
          animation-name: spin;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.animate--heart {
  display: inline-block;
  -webkit-transform-origin: center;
  transform-origin: center;
  will-change: transform;
  -webkit-animation: heartBeatSoft 1.6s ease-in-out infinite;
  animation: heartBeatSoft 1.6s ease-in-out infinite;
}

@-webkit-keyframes heartBeatSoft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  12% {
    -webkit-transform: scale(1.045);
    transform: scale(1.045);
  }
  24% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  36% {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  48% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeatSoft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  12% {
    -webkit-transform: scale(1.045);
    transform: scale(1.045);
  }
  24% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  36% {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  48% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.animate--swaying {
  -webkit-animation-name: swaying;
          animation-name: swaying;
  -webkit-animation-duration: 9s;
          animation-duration: 9s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes swaying {
  0% {
    rotate: 0deg;
  }

  25% {
    rotate: -2.5deg;
  }

  50% {
    rotate: 0deg;
  }

  75% {
    rotate: 2deg;
  }

  100% {
    rotate: 0deg;
  }
}

@keyframes swaying {
  0% {
    rotate: 0deg;
  }

  25% {
    rotate: -2deg;
  }

  50% {
    rotate: 0deg;
  }

  75% {
    rotate: 2deg;
  }

  100% {
    rotate: 0deg;
  }
}

.animate--breathing {
  -webkit-animation-name: breathing;
          animation-name: breathing;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes breathing {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    rotate: 0;
  }

  50% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    rotate: 3deg;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    rotate: 0;
  }
}

@keyframes breathing {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    rotate: 0;
  }

  50% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    rotate: 3deg;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    rotate: 0;
  }
}

.animate--gradient {
  --ag-duration: 5s;
  --ag-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --ag-scale: 200%;
  --ag-direction: alternate;

  background-size: var(--ag-scale) var(--ag-scale);
  -webkit-animation: gradient-pan var(--ag-duration) var(--ag-easing) infinite
    var(--ag-direction);
          animation: gradient-pan var(--ag-duration) var(--ag-easing) infinite
    var(--ag-direction);

  will-change: background-position;
}

@-webkit-keyframes gradient-pan {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 100%;
  }
}

@keyframes gradient-pan {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate--gradient {
    -webkit-animation: none;
            animation: none;
  }
}

@-webkit-keyframes scale-smooth {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.04, 1.01);
            transform: scale(1.04, 1.01);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes scale-smooth {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.04, 1.01);
            transform: scale(1.04, 1.01);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes liquid-smooth {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.05, 0.94) skewX(1.5deg);
            transform: scale(1.05, 0.94) skewX(1.5deg);
  }
  50% {
    -webkit-transform: scale(0.97, 1.04) skewX(-1.5deg);
            transform: scale(0.97, 1.04) skewX(-1.5deg);
  }
  70% {
    -webkit-transform: scale(1.02, 0.98) skewX(1deg);
            transform: scale(1.02, 0.98) skewX(1deg);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes liquid-smooth {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.05, 0.94) skewX(1.5deg);
            transform: scale(1.05, 0.94) skewX(1.5deg);
  }
  50% {
    -webkit-transform: scale(0.97, 1.04) skewX(-1.5deg);
            transform: scale(0.97, 1.04) skewX(-1.5deg);
  }
  70% {
    -webkit-transform: scale(1.02, 0.98) skewX(1deg);
            transform: scale(1.02, 0.98) skewX(1deg);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes liquid {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.08, 0.92) skewX(2deg);
            transform: scale(1.08, 0.92) skewX(2deg);
  }
  50% {
    -webkit-transform: scale(0.95, 1.05) skewX(-2deg);
            transform: scale(0.95, 1.05) skewX(-2deg);
  }
  70% {
    -webkit-transform: scale(1.03, 0.97) skewX(1deg);
            transform: scale(1.03, 0.97) skewX(1deg);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes liquid {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.08, 0.92) skewX(2deg);
            transform: scale(1.08, 0.92) skewX(2deg);
  }
  50% {
    -webkit-transform: scale(0.95, 1.05) skewX(-2deg);
            transform: scale(0.95, 1.05) skewX(-2deg);
  }
  70% {
    -webkit-transform: scale(1.03, 0.97) skewX(1deg);
            transform: scale(1.03, 0.97) skewX(1deg);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 210deg;
  inherits: false;
}

@-webkit-keyframes rotate-gradient {
  0% {
    --angle: 210deg;
  }

  100% {
    --angle: 570deg;
  }
}

@keyframes rotate-gradient {
  0% {
    --angle: 210deg;
  }

  100% {
    --angle: 570deg;
  }
}

@-webkit-keyframes openning-animation {
  1% {
    opacity: 0;
  }

  100% {
    opacity: 100%;
  }
}

@keyframes openning-animation {
  1% {
    opacity: 0;
  }

  100% {
    opacity: 100%;
  }
}

@-webkit-keyframes hiding-animation {
  0% {
    opacity: 100%;
  }

  99% {
    display: block;
    opacity: 0;
  }

  100% {
    display: none;
  }
}

@keyframes hiding-animation {
  0% {
    opacity: 100%;
  }

  99% {
    display: block;
    opacity: 0;
  }

  100% {
    display: none;
  }
}