/*-------------------------------*/
/*---------- VARIABLES ----------*/
/*-------------------------------*/

:root {
  --g-animation-duration-very-fast: 0.1s;
  --g-animation-duration-fast: 0.2s;
  --g-animation-duration-medium: 0.3s;
  --g-animation-duration-slow: 0.5s;
  --g-animation-duration-very-slow: 1s;
  --g-animation-duration-very-very-slow: 1.5s;

  --g-animation-timing-function: cubic-bezier(0, .492, .503, .995);

  --g-animation-target: 0;
}

/*------------------------------------*/
/*---------- INITIAL STATES ----------*/
/*------------------------------------*/

[gwb-animation=wrapper] [gwb-animation^=target] {
  animation-duration: var(--g-animation-duration-medium);
  animation-timing-function: var(--g-animation-timing-function);
  animation-fill-mode: both;
}

[gwb-animation^=target] {
  opacity: 0;
}

.gwb-animate [gwb-animation^=target] {
  opacity: 1;
}

/*--------------------------------*/
/*---------- ANIMATIONS ----------*/
/*--------------------------------*/

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }

  to {
    opacity 1;
    transform: translateY(0rem);
  }
}

@keyframes slide-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

@keyframes scale {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.75);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes open-right {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0% 0 0);
  }
}

@keyframes open-left {
  from {
    clip-path: inset(0 0 0 100%);
  }

  to {
    clip-path: inset(0 0 0 0%);
  }
}

@keyframes open-bottom {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0 0 0% 0);
  }
}

@keyframes blurry-reveal {
  from {
    opacity: 0;
    transform: scale(1.1);
    filter: blur(0.5rem);
  }

  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0rem);
  }
}

/*----------------------------*/
/*---------- DELAYS ----------*/
/*----------------------------*/

[gwb-animation=wrapper] [gwb-animation=target-01] {
  animation-delay: 0s;
}

[gwb-animation=wrapper] [gwb-animation=target-02] {
  animation-delay: 0.1s;
}

[gwb-animation=wrapper] [gwb-animation=target-03] {
  animation-delay: 0.2s;
}

[gwb-animation=wrapper] [gwb-animation=target-04] {
  animation-delay: 0.3s;
}

[gwb-animation=wrapper] [gwb-animation=target-05] {
  animation-delay: 0.4s;
}

[gwb-animation=wrapper] [gwb-animation=target-06] {
  animation-delay: 0.5s;
}

[gwb-animation=wrapper] [gwb-animation=target-07] {
  animation-delay: 0.6s;
}

[gwb-animation=wrapper] [gwb-animation=target-08] {
  animation-delay: 0.7s;
}

[gwb-animation=wrapper] [gwb-animation=target-09] {
  animation-delay: 0.8s;
}

[gwb-animation=wrapper] [gwb-animation=target-10] {
  animation-delay: 0.9s;
}

/*-------------------------------*/
/*---------- DURATIONS ----------*/
/*-------------------------------*/

[gwb-animation=wrapper] [gwb-animation-duration=very-very-slow] {
  animation-duration: var(--g-animation-duration-very-very-slow);
}

[gwb-animation=wrapper] [gwb-animation-duration=very-slow] {
  animation-duration: var(--g-animation-duration-very-slow);
}

[gwb-animation=wrapper] [gwb-animation-duration=slow] {
  animation-duration: var(--g-animation-duration-slow);
}

[gwb-animation=wrapper] [gwb-animation-duration=fast] {
  animation-duration: var(--g-animation-duration-fast);
}

[gwb-animation=wrapper] [gwb-animation-duration=very-fast] {
  animation-duration: var(--g-animation-duration-very-fast);
}

/*---------------------------------*/
/*---------- ASSIGNATION ----------*/
/*---------------------------------*/

/* DEFAULT TYPE */

[gwb-animation=wrapper].gwb-animate [gwb-animation^=target] {
  animation-name: fade-in;
}

/* FADE */

[gwb-animation=wrapper].gwb-animate [gwb-animation-type=fade] {
  animation-name: fade;
}

/* FADE-IN */

[gwb-animation=wrapper].gwb-animate [gwb-animation-type=fade-in] {
  animation-name: fade-in;
}

/* SCALE */

[gwb-animation=wrapper].gwb-animate [gwb-animation-type=scale] {
  animation-name: scale;
}

/* SCALE-IN */

[gwb-animation=wrapper].gwb-animate [gwb-animation-type=scale-in] {
  animation-name: scale-in;
}

/* SLIDE-IN */

[gwb-animation=wrapper].gwb-animate [gwb-animation-type=slide-in] {
  animation-name: slide-in;
}

/* OPEN RIGHT */

[gwb-animation=wrapper].gwb-animate [gwb-animation-type=open-right] {
  animation-name: open-right;
}

/* OPEN LEFT */

[gwb-animation=wrapper].gwb-animate [gwb-animation-type=open-left] {
  animation-name: open-left;
}

/* OPEN BOTTOM */

[gwb-animation=wrapper].gwb-animate [gwb-animation-type=open-bottom] {
  animation-name: open-bottom;
}

/* BLURRY REVEAL */

[gwb-animation=wrapper].gwb-animate [gwb-animation-type=blurry-reveal] {
  animation-name: blurry-reveal;
}

/*--------------------------------*/
/*---------- RESPONSIVE ----------*/
/*--------------------------------*/

@media only screen and (max-width: 768px) {

  [gwb-animation=wrapper].gwb-animate [gwb-animation-breakpoint=mobile-off] {
    animation-name: none !important;
  }

  /* Disabling animations on mobile from any parent with the attribute */
  [gwb-animation-breakpoint=mobile-off] [gwb-animation^=target] {
    animation-name: none !important;
  }

  [gwb-animation=wrapper].gwb-animate [gwb-animation^=target] {
    animation-name: none !important;
  }

}

/*-----------------------------------------*/
/*---------- STAGGER ASSIGNATION ----------*/
/*-----------------------------------------*/

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(1) {
  --g-animation-target: 0
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(2) {
  --g-animation-target: 1
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(3) {
  --g-animation-target: 2
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(4) {
  --g-animation-target: 3
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(5) {
  --g-animation-target: 4
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(6) {
  --g-animation-target: 5
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(7) {
  --g-animation-target: 6
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(8) {
  --g-animation-target: 7
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(9) {
  --g-animation-target: 8
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(10) {
  --g-animation-target: 9
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(11) {
  --g-animation-target: 10
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(12) {
  --g-animation-target: 11
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(13) {
  --g-animation-target: 12
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(14) {
  --g-animation-target: 13
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(15) {
  --g-animation-target: 14
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(16) {
  --g-animation-target: 15
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(17) {
  --g-animation-target: 16
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(18) {
  --g-animation-target: 17
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(19) {
  --g-animation-target: 18
}

[gwb-animation-effect=stagger] [gwb-animation^=target]:nth-child(20) {
  --g-animation-target: 19
}

/*------------------------------------*/
/*---------- STAGGER DELAYS ----------*/
/*------------------------------------*/

[gwb-animation-effect=stagger]>* {
  animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-medium)));
}

[gwb-animation-effect=stagger][gwb-stagger-delay=very-slow]>* {
  animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-very-slow)));
}

[gwb-animation-effect=stagger][gwb-stagger-delay=slow]>* {
  animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-slow)));
}

[gwb-animation-effect=stagger][gwb-stagger-delay=medium]>* {
  animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-medium)));
}

[gwb-animation-effect=stagger][gwb-stagger-delay=fast]>* {
  animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-fast)));
}

[gwb-animation-effect=stagger][gwb-stagger-delay=very-fast]>* {
  animation-delay: calc((var(--g-animation-target) * var(--g-animation-duration-very-fast)));
}