@use "../01-abstract/constants" as *;

/**
 * js-animation
 *
 * How it work :
 *      .js-animation and .no-js-animation are toggled on html element
 *      Animation are triggered in javascript if prefered reduce motion != reduce
 *
 * How to use :
 *      You can use the class directly on the dom element : <h2 class="js-animation-opacity">
 *
 *      Or
 *
 *      extend your element with the init class and add it to Animation.js preset
 *      (use js-animation class accordingly to user preference)
 *              .js-animation h2 {
 *                  @extend %js-animation-opacity-init;
 *              }
 *
 *      in the js file Animation.js, add you selector
 *              Animation.preset = {
 *                  '.js-animation .js-animation-opacity, .js-animation h2': ...
 *
 *      the class js-animation-opacity will be added by the js so only the init styles are required
 *
 */
// ====
// Animation abstract init class
// ====
// ----
// opacity animation
// ----
%js-animation-opacity-init {
	opacity: 0;
	transition: opacity .5s;
}
// ----
// vertical translation + opacity animation
// ----
%js-animation-translation-init {
	> * {
		opacity: 0;
		transition: opacity .5s, transform .5s $ease-out-expo;
		transform: translateY(100px);
	}
}
// ----
// title animation
// ----
%js-animation-title-init {
	visibility: hidden;
}

// ====
// css animation
// ====
.js-animation {
	$el: &;

	// ----
	// opacity animation
	// ----
	#{$el}-opacity {
		@extend %js-animation-opacity-init;

		&.is-visible {
			opacity: 1;
		}
	}

	// ----
	// title animation
	// ----
	#{$el}-title {
		@extend %js-animation-title-init;

		.st-line {
			display: inline-block;
			overflow: hidden;

			> span {
				display: inline-block;
				transition: transform .75s $ease-out-expo;
				transform: translateY(150%);
			}
		}

		&.is-ready {
			visibility: visible;
		}

		&.is-visible {
			.st-line {
				> span {
					transform: translateY(0);
				}
			}
		}
	}

	// ----
	// vertical translation + opacity animation
	// ----
	#{$el}-translation {
		@extend %js-animation-translation-init;

		&.is-visible {
			> * {
				opacity: 1;
				transform: translateY(0) !important;
			}
		}
	}
}
