/**
 * 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-offset: 64px !default;
$kal-slide-transform-duration: 1000ms !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)
);


/**
 * 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
 */
[data-kal*='slide'] {
	&.#{$kal-start-position-class} {
		opacity: 0;
	}

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

/* ------------------
 * Move
 */
[data-kal*='move'] {
	&.#{$kal-end-position-class} {
		transition-duration: $kal-animation-duration, $kal-slide-transform-duration;
		transition-timing-function: cubic-bezier(.37,.01,0,.98);
		transform: none;
	}
}


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

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

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

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




/* ------------------
 * 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;
	}
}