/* ==========================================================================
   Blossom – Scroll to top
   ========================================================================== */

/* Vloeiend scrollen (geldt voor alle ankerlinks op de site) */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Knop */
.blossom-scroll-top {
	position: fixed !important;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 999;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgb(92, 61, 46);
	border-image: none;
	border-radius: 50%;
	background-color: transparent;
	color: rgb(92, 61, 46) !important;
	font-size: 15px;
	text-decoration: none !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.blossom-scroll-top:hover,
.blossom-scroll-top:focus-visible {
	background-color: rgb(108, 64, 51);
	color: rgb(255, 255, 255) !important;
}

.blossom-scroll-top:focus-visible {
	outline: 2px solid rgb(108, 64, 51);
	outline-offset: 3px;
}

/* Pas tonen na ±300px scrollen (Chrome/Edge/Safari 26+).
   Browsers zonder ondersteuning tonen de knop altijd. */
@supports (animation-timeline: scroll()) {
	.blossom-scroll-top {
		animation: blossom-scroll-top-reveal linear both;
		animation-timeline: scroll(root);
		animation-range: 300px 400px;
	}
}

@keyframes blossom-scroll-top-reveal {
	from {
		opacity: 0;
		visibility: hidden;
		transform: translateY(1rem);
	}
	to {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}