/**
 * Animation classes for the KAL package.
 * KAl stands for Komma Animation Library
 *
 * There are different animation types that we can define,
 * the name of which is used as the class, prefixed with 'kal-'
 *
 * When the plugin is activated an element that will be animated
 * receives a extra state class
 *
 * When the element comes into view the plugin should swap
 * to the final state
 *
 */


/**
 * Config
 */

// Class names to use for indicating position state
$kal-start-position-class: 'is-kal-start' !default;
$kal-end-position-class: 'is-kal-end' !default;

// Default values to use in all animations
$kal-animation-duration: 1200ms !default;
$kal-animation-delay: 0s !default;


// Slide-up animations
$kal-slide-up-offset: 64px !default;
$kal-slide-up-transform-duration: 1000ms !default;
$kal-slide-vertical-offset: 128px !default;

// Zoom animation
$kal-zoom-in-scale: 0.8 !default;
$kal-zoom-out-scale: 1.1 !default;




/**
* Easings
*/

$kal-easings: (
        linear: linear,
        ease: ease,
        ease-in: ease-in,
        ease-out: ease-out,
        ease-in-out: ease-in-out,
        ease-in-cubic: cubic-bezier(.55, .055, .675, .19),
        ease-out-cubic: cubic-bezier(.215, .61, .355, 1),
        ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1),
        ease-in-circ: cubic-bezier(.6, .04, .98, .335),
        ease-out-circ: cubic-bezier(.075, .82, .165, 1),
        ease-in-out-circ: cubic-bezier(.785, .135, .15, .86),
        ease-in-expo: cubic-bezier(.95, .05, .795, .035),
        ease-out-expo: cubic-bezier(.19, 1, .22, 1),
        ease-in-out-expo: cubic-bezier(1, 0, 0, 1),
        ease-in-quad: cubic-bezier(.55, .085, .68, .53),
        ease-out-quad: cubic-bezier(.25, .46, .45, .94),
        ease-in-out-quad: cubic-bezier(.455, .03, .515, .955),
        ease-in-quart: cubic-bezier(.895, .03, .685, .22),
        ease-out-quart: cubic-bezier(.165, .84, .44, 1),
        ease-in-out-quart: cubic-bezier(.77, 0, .175, 1),
        ease-in-quint: cubic-bezier(.755, .05, .855, .06),
        ease-out-quint: cubic-bezier(.23, 1, .32, 1),
        ease-in-out-quint: cubic-bezier(.86, 0, .07, 1),
        ease-in-sine: cubic-bezier(.47, 0, .745, .715),
        ease-out-sine: cubic-bezier(.39, .575, .565, 1),
        ease-in-out-sine: cubic-bezier(.445, .05, .55, .95),
        ease-in-back: cubic-bezier(.6, -.28, .735, .045),
        ease-out-back: cubic-bezier(.175, .885, .32, 1.275),
        ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55)
);

// Mobile:
// - remove all delays
// - only do a fade transition
// - set duration to fixed value


@include mq($max: $bp-header-switch) {
  [data-kal] {
    &.#{$kal-start-position-class} {
      transform: none !important;
    }
    &.#{$kal-end-position-class} {
      transition-delay: 0s !important;
      transition-duration: 1400ms !important;
      transition-property: opacity !important;
    }
  }
}



/**
 * Core
 */

[data-kal] {
  &.#{$kal-end-position-class} {
    transition-duration: var(--kal-duration, $kal-animation-duration);
    transition-delay: var(--kal-delay, $kal-animation-delay);
    transition-timing-function: var(--kal-easing, map-get($kal-easings, 'ease'));
  }
}

@each $key, $value in $kal-easings {
  [data-kal][data-kal-easing='#{$key}'] {
    transition-timing-function: $value;
  }
}



/**
 * Preset Animations
 */


/* ------------------
 * Fade
 */
[data-kal|='fade'] {
  &.#{$kal-start-position-class} {
    opacity: 0;
  }

  &.#{$kal-end-position-class} {
    transition-property: opacity;
    opacity: 1;
  }
}


/* ------------------
 * Slide up
 */
[data-kal='slide-up'] {
  &.#{$kal-start-position-class} {
    opacity: 0;
    transform: translateY($kal-slide-up-offset);
  }

  &.#{$kal-end-position-class} {
    transition-property: opacity, transform;
    transition-duration: $kal-animation-duration, $kal-slide-up-transform-duration;
    transition-timing-function: cubic-bezier(.37,.01,0,.98);
    opacity: 1;
    transform: none;
  }
}

[data-kal='slide-down-fade'] {
  &.#{$kal-start-position-class} {
    opacity: 0;
    transform: translateY(-$kal-slide-up-offset);
  }

  &.#{$kal-end-position-class} {
    transition-property: opacity, transform;
    transition-duration: $kal-animation-duration, $kal-slide-up-transform-duration;
    transition-timing-function: cubic-bezier(.37,.01,0,.98);
    opacity: 1;
    transform: none;
  }
}

[data-kal='slide-down'] {
  &.#{$kal-start-position-class} {
    transform: translateY(-$kal-slide-vertical-offset);
  }
}

[data-kal='slide-left']{
  &.#{$kal-start-position-class} {
    transform: translateX(space(5));
  }
}

[data-kal='slide-right'] {
  &.#{$kal-start-position-class} {
    transform: translateX(space(-5));
  }
}




/* ------------------
 * Zoom-in
 */
[data-kal='zoom-in'] { // FIXME: Finetune the animation for our liking
  &.#{$kal-start-position-class} {
    opacity: 0;
    transform: scale($kal-zoom-in-scale);
  }

  &.#{$kal-end-position-class} {
    transition-property: opacity, transform;
    opacity: 1;
    transform: none;
  }
}