/* SECTION CONTENT */
.section-content {opacity: 0;transform: translateY(20px);transition: opacity 0.6s ease, transform 0.6s ease;
	&.show {opacity: 1;transform: translateY(0);pointer-events: all;}}
/* SCROLL ANIMATIONS */
.enter-up {animation: fadeInUp 0.8s ease forwards; z-index: 2;}
.enter-down {animation: fadeInDown 0.8s ease forwards; z-index: 2;}
.leave-up {animation: fadeOutUp 0.8s ease forwards;}
.leave-down {animation: fadeOutDown 0.8s ease forwards;}
@keyframes fadeInUp {from {opacity: 0; transform: translateY(40px);}to{ opacity: 1; transform: translateY(0);}}
@keyframes fadeInDown {from {opacity: 0; transform: translateY(-40px);}to{ opacity: 1; transform: translateY(0);}}
@keyframes fadeOutUp {from {opacity: 1; transform: translateY(0);}to{ opacity: 0; transform: translateY(-60px);}}
@keyframes fadeOutDown {from {opacity: 1; transform: translateY(0);}to{opacity: 0; transform: translateY(60px);}}
/* FLOATERS */
#scrollTopBtn,
#scrollDownBtn {
	position: fixed;
	bottom: 40px;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	z-index: 1000;
	background: none;
	transition: transform 0.4s, opacity 0.4s ease;
	border: none;
	&.show {opacity: 1;pointer-events: auto;}
}
#scrollTopBtn {
	right: 40px;
	&:hover {transform: translateY(-3px) scale(1.1);scale: (1.05);}
}
#scrollDownBtn {
	left: 50%;
	transform: translateX(-50%);
	padding: 1rem;
	& img {transform: rotate(180deg);}
	&:hover {transform: translateY(-3px) translateX(-50%) scale(1.05);}
}
#sectionDots {
	position: fixed;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 1000;
}
.section-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: white;
	opacity: 0.3;
	transition: opacity 0.3s ease, transform 0.3s ease;
	cursor: pointer;
	&.active {opacity: 1;transform: scale(1.4);
		&:hover {transform: scale(1.6);}}
	&:hover {transform: scale(1.2);}
}

@media (max-width: 800px) {
	#sectionDots {
		flex-direction: row;
		top: auto;
		bottom: 70px;
		right: auto;
		left: 50%;
		transform: translateY(0) translateX(-50%);
	}
	#scrollDownBtn {bottom: 80px;}
	#scrollTopBtn {bottom: 60px;}
}