/**
 * 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-vertical-offset: 64px !default;

// Zoom animation
$kal-zoom-out-scale: 1.15 !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: map-get($breakpoints, "full-nav")) {
	[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;
	}
}



// All Animations
[data-kal] {
	&.#{$kal-start-position-class} {
		opacity: 0;
	}
	&.#{$kal-end-position-class} {
		opacity: 1;
		transition-property: opacity;
	}
}


// All sort of SLIDE animations
[data-kal='fade'] {
	&.#{$kal-end-position-class} {
		transition-timing-function: linear;
	}
}


// All sort of SLIDE animations
[data-kal|='slide'] {
	&.#{$kal-end-position-class} {
		transition-property: opacity, transform;
		transition-timing-function:  var(--kal-easing, cubic-bezier(.37,.01,0,.98));
		transform: none;
	}
}

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

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

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

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


// Only translate animation, no opacity change
[data-kal|='translate'] {
	&.#{$kal-start-position-class} {
		opacity: 1 !important;
	}
	&.#{$kal-end-position-class} {
		transition-property: transform;
		transition-timing-function: cubic-bezier(.37,.01,0,.98);
		transform: none;
	}
}
[data-kal='translate-left']{
	&.#{$kal-start-position-class} {
		transform: translateX(space(5));
	}
}

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


// Zoom out
[data-kal|='zoom-out'] {
	&.#{$kal-start-position-class} {
		opacity: 0;
		transform: scale($kal-zoom-out-scale);
	}

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

[data-kal='zoom-out-left-top'] {
	&.#{$kal-end-position-class} {
		transform-origin: left top;
	}
}
[data-kal='zoom-out-right-top'] {
	&.#{$kal-end-position-class} {
		transform-origin: right top;
	}
}
[data-kal='zoom-out-left-bottom'] {
	&.#{$kal-end-position-class} {
		transform-origin: left bottom;
	}
}
[data-kal='zoom-out-right-bottom'] {
	&.#{$kal-end-position-class} {
		transform-origin: right bottom;
	}
}

[data-kal='photo-zoom-out'] {
	&.#{$kal-start-position-class} {
		transform: scale($kal-zoom-out-scale);
	}

	&.#{$kal-end-position-class} {
		transition-duration: var(--kal-duration, 2000ms);
		transition-property: transform;
		transform: none;
	}
}