@charset "UTF-8";

/* ============================================================
   NETEX DEVELOP — SCROLL ANIMATION SYSTEM
   CSS Animations - v4.0
   ============================================================ */
/* ============================================================
   QUICK USAGE GUIDE
   ============================================================
   ------------------------------------------------------------
   01. BASIC STRUCTURE
   ------------------------------------------------------------
   Add the base class:
       nx-animate

   Then add ONE animation:
       nx-fadeIn

   Example:
       nx-animate nx-fadeIn

   ------------------------------------------------------------
   02. ENTRANCE ANIMATIONS
   ------------------------------------------------------------
   Entrance animations appear when the element enters
   the viewport.

   They automatically reset when the element leaves the
   viewport and play again when it returns.

   FADE
   ------------------------------------------------------------
       nx-fadeIn
       nx-fadeInDown
       nx-fadeInUp
       nx-fadeInLeft
       nx-fadeInRight

   Examples:
       nx-animate nx-fadeIn
       nx-animate nx-fadeInUp
       nx-animate nx-fadeInLeft

   ZOOM
   ------------------------------------------------------------
       nx-zoomIn
       nx-zoomInDown
       nx-zoomInUp
       nx-zoomInLeft
       nx-zoomInRight

   Examples:
       nx-animate nx-zoomIn
       nx-animate nx-zoomInDown
       nx-animate nx-zoomInRight

   BOUNCE IN
   ------------------------------------------------------------
       nx-bounceIn
       nx-bounceInDown
       nx-bounceInUp
       nx-bounceInLeft
       nx-bounceInRight

   Examples:
       nx-animate nx-bounceIn
       nx-animate nx-bounceInUp

   SLIDE
   ------------------------------------------------------------
       nx-slideInDown
       nx-slideInUp
       nx-slideInLeft
       nx-slideInRight

   Examples:
       nx-animate nx-slideInUp
       nx-animate nx-slideInRight


   ROTATE
   ------------------------------------------------------------
       nx-rotateIn
       nx-rotateInDownLeft
       nx-rotateInDownRight
       nx-rotateInUpLeft
       nx-rotateInUpRight


   Examples:
       nx-animate nx-rotateIn
       nx-animate nx-rotateInDownLeft


   SPECIAL
   ------------------------------------------------------------
       nx-lightSpeedIn
       nx-rollIn

   Examples:
       nx-animate nx-lightSpeedIn
       nx-animate nx-rollIn

   ------------------------------------------------------------
   03. ATTENTION ANIMATIONS
   ------------------------------------------------------------
   Attention animations do NOT hide the element.

   The element remains visible and the animation is played
   when it enters the viewport.

   When the element leaves the viewport, the animation resets.
   When it enters again, the animation plays again.

   BOUNCE
   ------------------------------------------------------------
       nx-bounce

   Example:
       nx-animate nx-bounce

   FLASH
   ------------------------------------------------------------
       nx-flash


   Example:
       nx-animate nx-flash


   PULSE
   ------------------------------------------------------------
       nx-pulse

   Example:
       nx-animate nx-pulse

   RUBBER BAND
   ------------------------------------------------------------
       nx-rubberBand

   Example:
       nx-animate nx-rubberBand


   SHAKE
   ------------------------------------------------------------
       nx-shake

   Example:
       nx-animate nx-shake


   HEAD SHAKE
   ------------------------------------------------------------

       nx-headShake


   Example:

       nx-animate nx-headShake


   SWING
   ------------------------------------------------------------
       nx-swing

   Example:
       nx-animate nx-swing

   TADA
   ------------------------------------------------------------
       nx-tada

   Example:
       nx-animate nx-tada


   WOBBLE
   ------------------------------------------------------------
       nx-wobble


   Example:
       nx-animate nx-wobble


   JELLO
   ------------------------------------------------------------
       nx-jello

   Example:
       nx-animate nx-jello

   ------------------------------------------------------------
   04. ANIMATION DELAY
   ------------------------------------------------------------
   Add a delay before the animation starts.

   Available delays:

       nx-delay-100
       nx-delay-200
       nx-delay-300
       nx-delay-400
       nx-delay-500
       nx-delay-600
       nx-delay-800
       nx-delay-1000


   Examples:
       nx-animate nx-fadeInUp nx-delay-200
       nx-animate nx-zoomIn nx-delay-500
       nx-animate nx-bounceIn nx-delay-1000

   Delay is measured in milliseconds:

       100  = 0.1s
       200  = 0.2s
       300  = 0.3s
       400  = 0.4s
       500  = 0.5s
       600  = 0.6s
       800  = 0.8s
       1000 = 1s



   ------------------------------------------------------------
   05. ANIMATION DURATION
   ------------------------------------------------------------
   Control how long the animation lasts.

   Available durations:

       nx-duration-400
       nx-duration-600
       nx-duration-800
       nx-duration-1000
       nx-duration-1200
       nx-duration-1500

   Examples:
       nx-animate nx-fadeIn nx-duration-600
       nx-animate nx-zoomIn nx-duration-1000
       nx-animate nx-bounceIn nx-duration-1500

   Duration is measured in milliseconds:

       400  = 0.4s
       600  = 0.6s
       800  = 0.8s
       1000 = 1s
       1200 = 1.2s
       1500 = 1.5s



   ------------------------------------------------------------
   06. DELAY + DURATION
   ------------------------------------------------------------
   Delay and duration can be combined.

   Example:
       nx-animate
       nx-fadeInUp
       nx-delay-300
       nx-duration-1000


   In one class attribute:

       nx-animate nx-fadeInUp nx-delay-300 nx-duration-1000


   Result:

       Viewport
           ↓
       300ms delay
           ↓
       1000ms animation
           ↓
       Finished



   ------------------------------------------------------------
   07. NX-ONCE
   ------------------------------------------------------------

   By default, animations repeat whenever the element
   enters the viewport again.

   Add:

       nx-once

   to make the animation run only once.


   Example:

       nx-animate nx-fadeInUp nx-once


   With delay:

       nx-animate nx-zoomInDown nx-delay-300 nx-once


   With delay + duration:

       nx-animate nx-fadeInUp
       nx-delay-300
       nx-duration-1000
       nx-once


   Behaviour:

       First viewport entry
              ↓
          Animation
              ↓
          Finished
              ↓
       Leave viewport
              ↓
       Animation stays finished
              ↓
       Return to viewport
              ↓
          No animation



   ------------------------------------------------------------
   08. REPEATING ANIMATIONS
   ------------------------------------------------------------

   Repetition is the default behaviour.

   No additional class is required.

   Example:

       nx-animate nx-fadeInUp

   Behaviour:

       ENTER viewport
            ↓
        Animation
            ↓
       LEAVE viewport
            ↓
          Reset
            ↓
       ENTER viewport
            ↓
        Animation
            ↓
       LEAVE viewport
            ↓
          Reset
            ↓
          ...


   This is useful for sections that can be revisited while
   scrolling.



   ------------------------------------------------------------
   09. COMBINING OPTIONS
   ------------------------------------------------------------

   Animation + delay:

       nx-animate nx-fadeInUp nx-delay-300


   Animation + duration:

       nx-animate nx-zoomIn nx-duration-1200


   Animation + delay + duration:

       nx-animate nx-zoomInDown
       nx-delay-400
       nx-duration-1200


   Animation + once:

       nx-animate nx-bounceIn nx-once


   Animation + delay + once:

       nx-animate nx-fadeInUp
       nx-delay-300
       nx-once


   Everything together:

       nx-animate nx-zoomInDown
       nx-delay-400
       nx-duration-1200
       nx-once



   ------------------------------------------------------------
   10. HERO EXAMPLES
   ------------------------------------------------------------

   HERO TITLE
   ------------------------------------------------------------

       nx-animate nx-zoomInDown
       nx-duration-1000
       nx-once


   HERO SUBTITLE
   ------------------------------------------------------------

       nx-animate nx-fadeInUp
       nx-delay-200
       nx-duration-800
       nx-once


   HERO DESCRIPTION
   ------------------------------------------------------------

       nx-animate nx-fadeInUp
       nx-delay-400
       nx-duration-800
       nx-once


   HERO BUTTON
   ------------------------------------------------------------

       nx-animate nx-fadeInUp
       nx-delay-600
       nx-duration-800
       nx-once


   Typical sequence:

       TITLE
         ↓ 0s

       SUBTITLE
         ↓ 0.2s

       DESCRIPTION
         ↓ 0.4s

       BUTTON
         ↓ 0.6s



   ------------------------------------------------------------
   11. CARDS / SERVICES EXAMPLE
   ------------------------------------------------------------

   Card 1:

       nx-animate nx-fadeInUp nx-delay-100


   Card 2:

       nx-animate nx-fadeInUp nx-delay-200


   Card 3:

       nx-animate nx-fadeInUp nx-delay-300


   Card 4:

       nx-animate nx-fadeInUp nx-delay-400


   Result:

       CARD 1 → 0.1s
       CARD 2 → 0.2s
       CARD 3 → 0.3s
       CARD 4 → 0.4s



   ------------------------------------------------------------
   12. ATTENTION EXAMPLES
   ------------------------------------------------------------

   Button:

       nx-animate nx-pulse


   Important notice:

       nx-animate nx-headShake


   Icon:

       nx-animate nx-bounce


   Feature:

       nx-animate nx-tada


   Logo:

       nx-animate nx-swing



   ------------------------------------------------------------
   13. IMPORTANT RULES
   ------------------------------------------------------------

   Every animated element requires:

       nx-animate


   Every element should use ONE animation class.

   Correct:

       nx-animate nx-fadeInUp


   Correct:

       nx-animate nx-zoomInDown nx-delay-300


   Incorrect:

       nx-fadeInUp


   Incorrect:

       nx-animate


   Incorrect:

       nx-animate nx-fadeInUp nx-zoomIn


   Do NOT combine two animation classes.

   Choose one animation from:

       Entrance
       OR
       Attention



   ------------------------------------------------------------
   14. ACCESSIBILITY
   ------------------------------------------------------------

   The system respects:

       prefers-reduced-motion


   Users who have reduced motion enabled will see the
   content immediately without animation.


   No additional class is required.



   ------------------------------------------------------------
   15. VIEWPORT BEHAVIOUR
   ------------------------------------------------------------

   Animations are controlled by IntersectionObserver.

   The animation is triggered when the element enters
   the configured viewport area.

   Current configuration:

       threshold: 0.15

       rootMargin:
       0px 0px -10% 0px


   This means the animation does NOT have to wait until
   the entire element is visible.



   ------------------------------------------------------------
   16. QUICK REFERENCE
   ------------------------------------------------------------

   BASIC:

       nx-animate nx-fadeIn


   ENTRANCE:

       nx-fadeIn
       nx-zoomIn
       nx-bounceIn
       nx-slideIn
       nx-rotateIn
       nx-lightSpeedIn
       nx-rollIn


   ATTENTION:

       nx-bounce
       nx-flash
       nx-pulse
       nx-rubberBand
       nx-shake
       nx-headShake
       nx-swing
       nx-tada
       nx-wobble
       nx-jello


   DELAY:

       nx-delay-100
       nx-delay-200
       nx-delay-300
       nx-delay-400
       nx-delay-500
       nx-delay-600
       nx-delay-800
       nx-delay-1000


   DURATION:

       nx-duration-400
       nx-duration-600
       nx-duration-800
       nx-duration-1000
       nx-duration-1200
       nx-duration-1500


   ONE TIME:

       nx-once


   REPEAT:

       Default behaviour


   ============================================================
   END — NX ANIMATION QUICK USAGE GUIDE
   ============================================================
*/

/* ============================================================
   BASE
   ============================================================ */

   .nx-animate {
    visibility: hidden;
}

.nx-animate.nx-active {
    visibility: visible;
}


/* ============================================================
   ATTENTION ANIMATIONS
   ============================================================ */

.nx-animate.nx-attention {
    visibility: visible;
}

/* ============================================================
   ENTRANCE ANIMATIONS — INITIAL STATE
   ============================================================ */

.nx-animate.nx-fadeIn,
.nx-animate.nx-fadeInDown,
.nx-animate.nx-fadeInUp,
.nx-animate.nx-fadeInLeft,
.nx-animate.nx-fadeInRight,

.nx-animate.nx-zoomIn,
.nx-animate.nx-zoomInDown,
.nx-animate.nx-zoomInUp,
.nx-animate.nx-zoomInLeft,
.nx-animate.nx-zoomInRight,

.nx-animate.nx-bounceIn,
.nx-animate.nx-bounceInDown,
.nx-animate.nx-bounceInUp,
.nx-animate.nx-bounceInLeft,
.nx-animate.nx-bounceInRight,

.nx-animate.nx-slideInDown,
.nx-animate.nx-slideInUp,
.nx-animate.nx-slideInLeft,
.nx-animate.nx-slideInRight,

.nx-animate.nx-rotateIn,
.nx-animate.nx-rotateInDownLeft,
.nx-animate.nx-rotateInDownRight,
.nx-animate.nx-rotateInUpLeft,
.nx-animate.nx-rotateInUpRight,

.nx-animate.nx-lightSpeedIn,
.nx-animate.nx-rollIn {
    opacity: 0;
}

/* ============================================================
 FADE
 ============================================================ */

@keyframes nxFadeIn {
  from {
      opacity: 0;
  }

  to {
      opacity: 1;
  }
}

.nx-fadeIn {
  animation: nxFadeIn 0.8s ease-out both;
}


@keyframes nxFadeInDown {
  from {
      opacity: 0;
      transform: translate3d(0, -50px, 0);
  }

  to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
  }
}

.nx-fadeInDown {
  animation: nxFadeInDown 0.8s ease-out both;
}


@keyframes nxFadeInUp {
  from {
      opacity: 0;
      transform: translate3d(0, 50px, 0);
  }

  to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
  }
}

.nx-fadeInUp {
  animation: nxFadeInUp 0.8s ease-out both;
}


@keyframes nxFadeInLeft {
  from {
      opacity: 0;
      transform: translate3d(-50px, 0, 0);
  }

  to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
  }
}

.nx-fadeInLeft {
  animation: nxFadeInLeft 0.8s ease-out both;
}


@keyframes nxFadeInRight {
  from {
      opacity: 0;
      transform: translate3d(50px, 0, 0);
  }

  to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
  }
}

.nx-fadeInRight {
  animation: nxFadeInRight 0.8s ease-out both;
}


/* ============================================================
 ZOOM
 ============================================================ */

@keyframes nxZoomIn {
  0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
  }

  60% {
      opacity: 1;
      transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
  }
}

.nx-zoomIn {
  animation: nxZoomIn 0.9s ease-out both;
}


@keyframes nxZoomInDown {
  0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3) translate3d(0, -100px, 0);
  }

  60% {
      opacity: 1;
      transform: scale3d(1.02, 1.02, 1.02) translate3d(0, 8px, 0);
  }

  100% {
      opacity: 1;
      transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

.nx-zoomInDown {
  animation: nxZoomInDown 0.9s ease-out both;
}


@keyframes nxZoomInUp {
  0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3) translate3d(0, 100px, 0);
  }

  60% {
      opacity: 1;
      transform: scale3d(1.02, 1.02, 1.02) translate3d(0, -8px, 0);
  }

  100% {
      opacity: 1;
      transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

.nx-zoomInUp {
  animation: nxZoomInUp 0.9s ease-out both;
}


@keyframes nxZoomInLeft {
  0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3) translate3d(-100px, 0, 0);
  }

  60% {
      opacity: 1;
      transform: scale3d(1.02, 1.02, 1.02) translate3d(8px, 0, 0);
  }

  100% {
      opacity: 1;
      transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

.nx-zoomInLeft {
  animation: nxZoomInLeft 0.9s ease-out both;
}


@keyframes nxZoomInRight {
  0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3) translate3d(100px, 0, 0);
  }

  60% {
      opacity: 1;
      transform: scale3d(1.02, 1.02, 1.02) translate3d(-8px, 0, 0);
  }

  100% {
      opacity: 1;
      transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

.nx-zoomInRight {
  animation: nxZoomInRight 0.9s ease-out both;
}


/* ============================================================
 BOUNCE
 ============================================================ */

@keyframes nxBounce {
  0%,
  20%,
  53%,
  80%,
  100% {
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      transform: translate3d(0, -30px, 0);
  }

  70% {
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      transform: translate3d(0, -15px, 0);
  }

  90% {
      transform: translate3d(0, -4px, 0);
  }
}

.nx-bounce {
  animation: nxBounce 1s ease both;
}


@keyframes nxBounceIn {
  0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
      transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
      transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
      transform: scale3d(0.97, 0.97, 0.97);
  }

  100% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
  }
}

.nx-bounceIn {
  animation: nxBounceIn 1s ease both;
}


@keyframes nxBounceInDown {
  0% {
      opacity: 0;
      transform: translate3d(0, -300px, 0);
  }

  60% {
      opacity: 1;
      transform: translate3d(0, 25px, 0);
  }

  75% {
      transform: translate3d(0, -10px, 0);
  }

  90% {
      transform: translate3d(0, 5px, 0);
  }

  100% {
      transform: translate3d(0, 0, 0);
  }
}

.nx-bounceInDown {
  animation: nxBounceInDown 1s ease both;
}


@keyframes nxBounceInUp {
  0% {
      opacity: 0;
      transform: translate3d(0, 300px, 0);
  }

  60% {
      opacity: 1;
      transform: translate3d(0, -20px, 0);
  }

  75% {
      transform: translate3d(0, 10px, 0);
  }

  90% {
      transform: translate3d(0, -5px, 0);
  }

  100% {
      transform: translate3d(0, 0, 0);
  }
}

.nx-bounceInUp {
  animation: nxBounceInUp 1s ease both;
}


@keyframes nxBounceInLeft {
  0% {
      opacity: 0;
      transform: translate3d(-300px, 0, 0);
  }

  60% {
      opacity: 1;
      transform: translate3d(25px, 0, 0);
  }

  75% {
      transform: translate3d(-10px, 0, 0);
  }

  90% {
      transform: translate3d(5px, 0, 0);
  }

  100% {
      transform: translate3d(0, 0, 0);
  }
}

.nx-bounceInLeft {
  animation: nxBounceInLeft 1s ease both;
}


@keyframes nxBounceInRight {
  0% {
      opacity: 0;
      transform: translate3d(300px, 0, 0);
  }

  60% {
      opacity: 1;
      transform: translate3d(-25px, 0, 0);
  }

  75% {
      transform: translate3d(10px, 0, 0);
  }

  90% {
      transform: translate3d(-5px, 0, 0);
  }

  100% {
      transform: translate3d(0, 0, 0);
  }
}

.nx-bounceInRight {
  animation: nxBounceInRight 1s ease both;
}


/* ============================================================
 SLIDE
 ============================================================ */

@keyframes nxSlideInDown {
  from {
      transform: translate3d(0, -100%, 0);
  }

  to {
      transform: translate3d(0, 0, 0);
  }
}

.nx-slideInDown {
  animation: nxSlideInDown 0.8s ease-out both;
}


@keyframes nxSlideInUp {
  from {
      transform: translate3d(0, 100%, 0);
  }

  to {
      transform: translate3d(0, 0, 0);
  }
}

.nx-slideInUp {
  animation: nxSlideInUp 0.8s ease-out both;
}


@keyframes nxSlideInLeft {
  from {
      transform: translate3d(-100%, 0, 0);
  }

  to {
      transform: translate3d(0, 0, 0);
  }
}

.nx-slideInLeft {
  animation: nxSlideInLeft 0.8s ease-out both;
}


@keyframes nxSlideInRight {
  from {
      transform: translate3d(100%, 0, 0);
  }

  to {
      transform: translate3d(0, 0, 0);
  }
}

.nx-slideInRight {
  animation: nxSlideInRight 0.8s ease-out both;
}


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

@keyframes nxRotateIn {
  from {
      opacity: 0;
      transform: rotate3d(0, 0, 1, -200deg);
  }

  to {
      opacity: 1;
      transform: rotate3d(0, 0, 1, 0deg);
  }
}

.nx-rotateIn {
  animation: nxRotateIn 0.9s ease-out both;
}


@keyframes nxRotateInDownLeft {
  from {
      opacity: 0;
      transform-origin: left bottom;
      transform: rotate3d(0, 0, 1, -45deg);
  }

  to {
      opacity: 1;
      transform-origin: left bottom;
      transform: rotate3d(0, 0, 1, 0deg);
  }
}

.nx-rotateInDownLeft {
  animation: nxRotateInDownLeft 0.9s ease-out both;
}


@keyframes nxRotateInDownRight {
  from {
      opacity: 0;
      transform-origin: right bottom;
      transform: rotate3d(0, 0, 1, 45deg);
  }

  to {
      opacity: 1;
      transform-origin: right bottom;
      transform: rotate3d(0, 0, 1, 0deg);
  }
}

.nx-rotateInDownRight {
  animation: nxRotateInDownRight 0.9s ease-out both;
}


@keyframes nxRotateInUpLeft {
  from {
      opacity: 0;
      transform-origin: left bottom;
      transform: rotate3d(0, 0, 1, 45deg);
  }

  to {
      opacity: 1;
      transform-origin: left bottom;
      transform: rotate3d(0, 0, 1, 0deg);
  }
}

.nx-rotateInUpLeft {
  animation: nxRotateInUpLeft 0.9s ease-out both;
}


@keyframes nxRotateInUpRight {
  from {
      opacity: 0;
      transform-origin: right bottom;
      transform: rotate3d(0, 0, 1, -90deg);
  }

  to {
      opacity: 1;
      transform-origin: right bottom;
      transform: rotate3d(0, 0, 1, 0deg);
  }
}

.nx-rotateInUpRight {
  animation: nxRotateInUpRight 0.9s ease-out both;
}


/* ============================================================
 ATTENTION — FLASH
 ============================================================ */

@keyframes nxFlash {
  0%,
  100% {
      opacity: 1;
  }

  25%,
  75% {
      opacity: 0;
  }

  50% {
      opacity: 1;
  }
}

.nx-flash {
  animation: nxFlash 1s ease both;
}


/* ============================================================
 ATTENTION — PULSE
 ============================================================ */

@keyframes nxPulse {
  0%,
  100% {
      transform: scale3d(1, 1, 1);
  }

  50% {
      transform: scale3d(1.05, 1.05, 1.05);
  }
}

.nx-pulse {
  animation: nxPulse 0.8s ease-in-out both;
}


/* ============================================================
 ATTENTION — RUBBER BAND
 ============================================================ */

@keyframes nxRubberBand {
  0%,
  100% {
      transform: scale3d(1, 1, 1);
  }

  30% {
      transform: scale3d(1.25, 0.75, 1);
  }

  40% {
      transform: scale3d(0.75, 1.25, 1);
  }

  50% {
      transform: scale3d(1.15, 0.85, 1);
  }

  65% {
      transform: scale3d(0.95, 1.05, 1);
  }

  75% {
      transform: scale3d(1.05, 0.95, 1);
  }
}

.nx-rubberBand {
  animation: nxRubberBand 1s ease both;
}


/* ============================================================
 ATTENTION — SHAKE
 ============================================================ */

@keyframes nxShake {
  0%,
  100% {
      transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
      transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
      transform: translate3d(10px, 0, 0);
  }
}

.nx-shake {
  animation: nxShake 0.8s ease both;
}


/* ============================================================
 ATTENTION — HEAD SHAKE
 ============================================================ */

@keyframes nxHeadShake {
  0% {
      transform: translateX(0);
  }

  6.5% {
      transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
      transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
      transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
      transform: translateX(2px) rotateY(3deg);
  }

  50%,
  100% {
      transform: translateX(0);
  }
}

.nx-headShake {
  animation: nxHeadShake 1s ease-in-out both;
}


/* ============================================================
 ATTENTION — SWING
 ============================================================ */

@keyframes nxSwing {
  0% {
      transform: rotate3d(0, 0, 1, 0deg);
  }

  20% {
      transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
      transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
      transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
      transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
      transform: rotate3d(0, 0, 1, 0deg);
  }
}

.nx-swing {
  transform-origin: top center;
  animation: nxSwing 1s ease both;
}


/* ============================================================
 ATTENTION — TADA
 ============================================================ */

@keyframes nxTada {
  0%,
  100% {
      transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
  }

  10%,
  20% {
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
}

.nx-tada {
  animation: nxTada 1s ease both;
}


/* ============================================================
 ATTENTION — WOBBLE
 ============================================================ */

@keyframes nxWobble {
  0%,
  100% {
      transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
  }

  15% {
      transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
      transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
      transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
      transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
      transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
}

.nx-wobble {
  animation: nxWobble 1s ease both;
}


/* ============================================================
 ATTENTION — JELLO
 ============================================================ */

@keyframes nxJello {
  0%,
  100% {
      transform: none;
  }

  22% {
      transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33% {
      transform: skewX(6.25deg) skewY(6.25deg);
  }

  44% {
      transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55% {
      transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66% {
      transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  78% {
      transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  89% {
      transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.nx-jello {
  transform-origin: center;
  animation: nxJello 1s ease both;
}


/* ============================================================
 SPECIAL — LIGHT SPEED
 ============================================================ */

@keyframes nxLightSpeedIn {
  0% {
      opacity: 0;
      transform: translate3d(100%, 0, 0) skewX(-30deg);
  }

  60% {
      opacity: 1;
      transform: skewX(20deg);
  }

  80% {
      transform: skewX(-5deg);
  }

  100% {
      opacity: 1;
      transform: skewX(0deg);
  }
}

.nx-lightSpeedIn {
  animation: nxLightSpeedIn 0.9s ease-out both;
}


/* ============================================================
 SPECIAL — ROLL
 ============================================================ */

@keyframes nxRollIn {
  0% {
      opacity: 0;
      transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
  }
}

.nx-rollIn {
  animation: nxRollIn 1s ease-out both;
}


/* ============================================================
 DELAYS
 ============================================================ */

.nx-delay-100 {
  animation-delay: 0.1s;
}

.nx-delay-200 {
  animation-delay: 0.2s;
}

.nx-delay-300 {
  animation-delay: 0.3s;
}

.nx-delay-400 {
  animation-delay: 0.4s;
}

.nx-delay-500 {
  animation-delay: 0.5s;
}

.nx-delay-600 {
  animation-delay: 0.6s;
}

.nx-delay-800 {
  animation-delay: 0.8s;
}

.nx-delay-1000 {
  animation-delay: 1s;
}


/* ============================================================
 DURATIONS
 ============================================================ */

.nx-duration-400 {
  animation-duration: 0.4s;
}

.nx-duration-600 {
  animation-duration: 0.6s;
}

.nx-duration-800 {
  animation-duration: 0.8s;
}

.nx-duration-1000 {
  animation-duration: 1s;
}

.nx-duration-1200 {
  animation-duration: 1.2s;
}

.nx-duration-1500 {
  animation-duration: 1.5s;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

   @media (prefers-reduced-motion: reduce) {

    .nx-animate {
        visibility: visible !important;
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }

}
/* ============================================================
   NX ANIMATION STATES
   ============================================================ */

.nx-animate.nx-active {
    visibility: visible;
}