/* All animation keyframes used on this website */

@keyframes scaleDown {
	1%, 99% { pointer-events: none; }
	0% { scale: 1; filter: grayscale(0); }
	50%, 100% { scale: calc(3 / 4); filter: grayscale(1); }
}

/* ((96vh {firstSectionHeight} + ((100vh {sectionHeight} + 50vh {gap})  * 4 {otherSectionsCount})) / 696 {totalHeight}) */
/* ((96 * 1) + ((100 + 50) * 4)) / 6.96% */

@keyframes fall {
	/* main */
	0% {
		opacity: 0;
		scale: 0.50;
		rotate: -42deg;
		translate: var(--main-x) var(--main-y);
	}

	/* #reducingBoilerplateCode */
	13.7931034483% {
		opacity: 1;
		scale: 1;
		rotate: -42deg;
		translate: 0 var(--reducingBoilerplateCode-y);
	}

	/* #easierMaintenance */
	35.3448275862% {
		opacity: 1;
		scale: 0.75;
		rotate: 1 1 -2 90deg;
		translate: 0 var(--easierMaintenance-y);
	}

	/* #improvedCodeReadability */
	56.8965517241% {
		opacity: 1;
		scale: 1.25;
		rotate: 1 0 0 60deg;
		translate: 0 var(--improvedCodeReadability-y);
	}
	
	/* #groupingStylesTogether */
	78.4482758621% {
		opacity: 1;
		scale: 1.5;
		rotate: -60deg;
		translate: 0 var(--groupingStylesTogether-y);
	}

	/* mechanicsOfNesting */
	100% {
		opacity: 1;
		scale: 1;
		rotate: 0deg;
		translate: 0 var(--mechanicsOfNesting-y);
	}
}

@keyframes idle {
	0% { translate: 0 0%; }
	100% { translate: 0 10%; }
}

@keyframes hover {
	0% { translate: 0 50%; }
	100% { translate: 0 60%; }
}

@keyframes repeatText {
	from { translate: 0 0; }
	to { translate: 0 -1lh; }
}

@keyframes swapText { /* May be translatable - but will likely require a HTML restructuring */
	from, to { padding-top: 0lh; }
	30%, 70% { padding-top: 1lh; }
}

@keyframes showText {
	to { text-shadow: 0 -1lh; }
}

@keyframes strikethrough {
	0% { translate: -100%; }
	50% { translate: 0%; }
	100% { translate: 100%; }
}

@keyframes slideDown {
	from { opacity: 0; translate: 0 -20lh; }
	to { opacity: 1; translate: 0; }
}

@keyframes slideIn {
	0% { color: transparent; }
	50%, 75% { translate: 0; }
	62.5% { color: revert-layer; }
}

@keyframes boostUp {
	to { translate: 0 -96em; }
}

@keyframes slideUp {
	to { translate: 0 -16em; }
}

@keyframes changeCard {
	6.25% {
    scale: 0.75;
    translate: 12rem -12rem;
    rotate: 20 -4 20 60deg;
	}
	
	12.5%, 100% {
		scale: none;
		translate: none;
		rotate: none;
	}
}

@keyframes changeCardBefore {
	0%, 6.25% { opacity: 1; }
	6.26%, 100% { opacity: 0; }
}

@keyframes changeCardAfter {
	0%, 6.25% { opacity: 0; }
	6.26%, 100% { opacity: 1; }
}

@keyframes slideInLines {
	from { translate: -3.25em calc(5lh + (var(--charIndex) * 1em)); }
	to { translate: 0; }
}

@keyframes rotate {
	from { rotate: 0deg; }
	to { rotate: 360deg; }
}

@keyframes revealText { /* No longer used */
	from { letter-spacing: -1.5ch; }
	0% { opacity: 0; }
	25% { opacity: 0.1; }
	50% { opacity: 0.3; }
	75% { opacity: 0.5; }
	100% { opacity: 1; }
	to { letter-spacing: 0ch; }
}

@keyframes widenGap {
	to { scale: 1 1; }
	to { scale: 0.85 1; opacity: 0.99; }
}

@keyframes moveDown {
	from { translate: 0 -3lh; opacity: 0; }
	to { translate: 0 0; opacity: 1; }
}

@keyframes fadeUp {
	from { translate: 0ch 1.67em; opacity: 0; }
	to { translate: -0.96ch -0.31em; opacity: 1; }
}

@keyframes moveLeft {
	from { translate: calc(50% + (var(--gutter-real-width) / 2) - var(--padding)); } /* 0.125rem is the width of the editor's border */
	to { translate: calc(0% - var(--padding)); }
}

@keyframes moveRight {
	from { translate: calc((var(--code-editor-width) - var(--screen-width)) + var(--horizontal-padding) + var(--settings-panel) + var(--horizontal-padding)); }
	to { translate: calc(0% + 0px); }
	/* to { translate: calc(var(--editor-canvas-inner-width) - var(--code-editor-width)); } */
}

@keyframes moveRight {
	from { width: calc(var(--code-editor-width) - var(--padding)); }
	to { width: calc(var(--single-editor-width)); }
}

@keyframes shadowRotate {
	0% { translate: calc((4/3) * 0.5em) calc((4/3) * 2.5em * var(--nestBtn-shadow-direction)); }
	33% { translate: calc((4/3) * 2.25em) calc((4/3) * 2.25em * var(--nestBtn-shadow-direction)); }
	67% { translate: calc((4/3) * 2.5em) calc((4/3) * 0em * var(--nestBtn-shadow-direction)); }
	100% { translate: calc((4/3) * 0.5em) calc((4/3) * 2.5em * var(--nestBtn-shadow-direction)); }
}

@keyframes onClick {
    from { --onClickValue2: var(--onClickValue1); }
}

/* ((96 * 1) + ((100 + 50) * 0)) / 6.96% */
@keyframes lightenBackgroundColour {
	/* main & #reducingBoilerplateCode */
	0%, 13.793103448% {
		background-color: var(--shades-black);
	}

	/* #easierMaintenance */
	35.3448275862% {
		background-color: rgb(from color-mix(in srgb, var(--shades-em-darker), var(--shades-black)) r g b);
	}

	/* #improvedCodeReadability */
	56.8965517241% {
		background-color: var(--sec-colour-darkest);
	}

	/* #groupingStylesTogether */
	78.4482758621% {
		background-color: var(--pri-colour-darkest);
	}

	/* #mechanicsOfNesting */
	100% {
		background-color: rgb(from color-mix(in srgb, var(--shades-em-darker), var(--shades-black)) r g b);
	}
}

@keyframes unblur {
	0% { filter: blur(1em); }
	100% { filter: blur(0); }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
	
@keyframes blink {
	0% { opacity: 1; }
	100% { opacity: 0.25; }
}

@keyframes bounceInTop {
	0% {
		filter: opacity(0);
		transform: translateY(-500px);
		animation-timing-function: ease-in;
	}

	38% {
		filter: opacity(1);
		transform: translateY(0);
		animation-timing-function: ease-out;
	}

	55% {
		transform: translateY(-65px);
		animation-timing-function: ease-in;
	}

	72% {
		transform: translateY(0);
		animation-timing-function: ease-out;
	}

	81% {
		transform: translateY(-28px);
		animation-timing-function: ease-in;
	}

	90% {
		transform: translateY(0);
		animation-timing-function: ease-out;
	}

	95% {
		transform: translateY(-8px);
		animation-timing-function: ease-in;
	}

	100% {
		transform: translateY(0);
		animation-timing-function: ease-out;
	}
}
  
@keyframes slideInLeft {
	0% { transform: translateX(-64rem); }
	100% { transform: translateX(0); }
}