﻿@media (prefers-reduced-motion: no-preference) and (width >= 1280px) {
	
	.anm-set-1 {
		
		[class*='anm_itm'] {
			--animation-amt: 5rem; /* { min: 1, max: 5, step: 0.5, type: 'range', friendly: 'Animation Amount Set 1'} */
			
			opacity: 0;
			animation: anmItem1 linear forwards;
			animation-timeline: view();
			animation-range: entry;
			
			&:is(.anm_itm-tp, .anm_itm-bt) {
				translate: 0 var(--animation-sp);
			}
			
			&.anm_itm-tp {
				--animation-sp: var(--animation-amt);
			}
			
			&.anm_itm-bt {
				--animation-sp: calc(var(--animation-amt) * -1);
			}
			
			&:is(.anm_itm-lt, .anm_itm-rt) {
				translate: var(--animation-sp) 0;
			}
			
			&.anm_itm-lt {
				--animation-sp: calc(var(--animation-amt) * -1);
			}
			
			&.anm_itm-rt {
				--animation-sp: var(--animation-amt);
			}
		}
		
	}
	
	@keyframes anmItem1 {
		to {
			translate: 0 0;
			opacity: 1;
		}
	}
	
	.anm-set-2 {
		[class*='anm_itm'] {
			--animation-amt: 5rem; /* { min: 1, max: 5, step: 0.5, type: 'range', friendly: 'Animation Amount Set 2'} */
			
			animation: anmItem2 linear forwards;
			animation-timeline: view();
			animation-range: cover;
			
			&:is(.anm_itm-tp, .anm_itm-bt) {
				translate: 0 var(--animation-sp);
			}
			
			&.anm_itm-tp {
				--animation-sp: calc(var(--animation-amt) * -1);
			}
			
			&.anm_itm-bt {
				--animation-sp: var(--animation-amt);
			}
			
			&:is(.anm_itm-lt, .anm_itm-rt) {
				translate: var(--animation-sp) 0;
			}
			
			&.anm_itm-lt {
				--animation-sp: calc(var(--animation-amt) * -1);
			}
			
			&.anm_itm-rt {
				--animation-sp: var(--animation-amt);
			}
		}
		
	}
	
	@keyframes anmItem2 {
		to {
			translate: 0 0;
		}
	}
	
	
	/* Animation Lists */
	[class*='anm_lst'] {
		--animation-amt: 2rem; /* { min: 1, max: 5, step: 0.5, type: 'range', friendly: 'Animation Amount Lists'} */
		
		> * {
			opacity: 0;
			animation: anmList linear forwards;
			animation-timeline: view();
			animation-range-start: entry;
			animation-range-end: 15vh;
		}
		
		&:is(.anm_lst-up, .anm_lst-dwn) > * {
			translate: 0 var(--animation-sp);
		}
		
		&.anm_lst-up {
			--animation-sp: var(--animation-amt);
		}
		
		&.anm_lst-dwn {
			--animation-sp: calc(var(--animation-amt) * -1);
		}
		
		&:is(.anm_lst-lt, .anm_lst-rt) > * {
			translate: var(--animation-sp) 0;
		}
		
		&.anm_lst-lt {
			--animation-sp: calc(var(--animation-amt) * -1);
		}
		
		&.anm_lst-rt {
			--animation-sp: var(--animation-amt);
		}
	}
	
	/* Animation Lists Keyframes */
	@keyframes anmList {
		to {
			translate: 0 0;
			opacity: 1;
		}
	}
	
	/* Animation Fade */
	[class*='anm_fd'] {
		animation: var(--anmFade-nm) linear forwards;
		animation-timeline: view();
		animation-range: var(--anm-range);
		
		&.anm_fd-in {
			--anmFade-nm: anmFadeIn;
			--anm-range: entry 5svh;
			
			opacity: 0;
		}
		
		&.anm_fd-out {
			--anmFade-nm: anmFadeOut;
			--anm-range: exit;
		}
	}
	
	/* Animation Fade Keyframes */
	@keyframes anmFadeIn {
		to {
			opacity: 1;
		}
	}
	
	@keyframes anmFadeOut {
		to {
			opacity: 0;
		}
	}
	
	/* Animation Scale */
	[class*='anm_sc'] {
		animation: var(--anmScale-nm) linear forwards;
		animation-timeline: view();
		animation-range: var(--anm-range);
		
		&.anm_sc-in {
			--anmScale-nm: anmScaleIn;
			--anm-range: entry 5svh;
			
			opacity: 0;
			scale: 0.8;
		}
		
		&.anm_sc-out {
			--anmScale-nm: anmScaleOut;
			--anm-range: exit;
		}
	}
	
	/* Animation Scale Keyframes */
	@keyframes anmScaleIn {
		to {
			opacity: 1;
			scale: 1;
		}
	}
	
	@keyframes anmScaleOut {
		to {
			opacity: 0;
			scale: 1.25;
		}
	}
	
}