@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translate(-2rem, 10rem);
	}
	100% {
		opacity: 1;
		transform: translate(-2rem, 0);
	}
}

html:has(#nidhugg-back-to-top) {
	scroll-behavior: smooth;
}

.nidhugg-back-to-top__anchor {
	opacity: 0;
	will-change: opacity, transform;
	transition: opacity 0.5s ease,
	transform 0.5s ease;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	text-decoration: none;
	cursor: pointer;

	&:hover {
		text-decoration: none;
	}

	figure {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0;
	}

	figcaption {
		font-size: 1rem;
		line-height: 1;
	}

	svg {
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		background-color: var(--nidhugg-base-content);
		fill: var(--nidhugg-base-500);
		padding: 1rem;
		margin-bottom: 1rem;
		box-shadow: 0 0 10px 5px var(--nidhugg-base-500);
	}
}

.nidhugg-back-to-top__anchor--scroll-animation {
	animation: fadeIn 1 linear forwards;
	animation-timeline: scroll(root);
	animation-range: 25% 50%;
	animation-duration: 1ms;
}