:root {
  --anim-dist: 80px;
  --anim-dur: 1.2s;
  --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --anim-speed: 0.1s;
  --anim-scroll-dur: 2s;
  --anim-scroll-speed: 1.8s;
}

SECTION:nth-child(2) { --anim-order: 1 }
SECTION:nth-child(3) { --anim-order: 2 }
SECTION:nth-child(4) { --anim-order: 3 }
SECTION:nth-child(5) { --anim-order: 4 }
SECTION:nth-child(6) { --anim-order: 5 }
SECTION:nth-child(7) { --anim-order: 6 }
SECTION:nth-child(8) { --anim-order: 7 }

/* 2025-proof trick – forces animations to always run on page load */
body { animation: 1ms dummy; }
@keyframes dummy { from { zoom: 1; } }

/* Starting states (instantly applied) */
.anim-down   { opacity: 0; transform: translateY(calc(-1 * var(--anim-dist))); }
.anim-up     { opacity: 0; transform: translateY(var(--anim-dist)); }
.anim-right  { opacity: 0; transform: translateX(calc(-1 * var(--anim-dist))); }
.anim-appear { opacity: 0; transform: scale(0.1); }


.anim-down   { animation: down   var(--anim-dur) var(--anim-ease) var(--anim-speed) forwards; }
.anim-up     { animation: up     var(--anim-dur) var(--anim-ease) var(--anim-speed) forwards; }
.anim-right  { animation: right  var(--anim-dur) var(--anim-ease) var(--anim-speed) forwards; }
.anim-appear { animation: appear var(--anim-dur) var(--anim-ease) var(--anim-speed) forwards; }

@supports (animation-timeline: view()) {
	SECTION:not(:first-child) { /* NOT THE HERO SECTION */ 
		.anim-down, .anim-up, .anim-right, .anim-appear { 
			animation-timeline: view(); 
			animation-range: entry 15% entry 70%; 
			animation-delay: calc(var(--anim-order) * 1.5s) !important;
		}
		.anim-down   { animation: down   var(--anim-scroll-dur) var(--anim-ease) var(--anim-scroll-speed) forwards; }
		.anim-up     { animation: up     var(--anim-scroll-dur) var(--anim-ease) var(--anim-scroll-speed) forwards; }
		.anim-right  { animation: right  var(--anim-scroll-dur) var(--anim-ease) var(--anim-scroll-speed) forwards; }
		.anim-appear { animation: appear var(--anim-scroll-dur) var(--anim-ease) var(--anim-scroll-speed) forwards; }
	}
}

@keyframes down   { to { opacity: 1; transform: translateY(0); } }
@keyframes up     { to { opacity: 1; transform: translateY(0); } }
@keyframes right  { to { opacity: 1; transform: translateX(0); } }
@keyframes appear { to { opacity: 1; transform: scale(1); } }