:root {
	--plane-offset: 0px;
	--trail-scale: 0.7;
}


.scroll-plane {
	position: fixed;
	right: clamp(1rem, 3vw, 2.5rem);
	top: 120px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	border-radius: 999px;
	z-index: 20;
	pointer-events: auto;
	transform: translateY(var(--plane-offset)) scale(1);
	transition: transform 0.12s linear;
	filter: drop-shadow(0 12px 18px rgba(16, 16, 16, 0.18));
	cursor: pointer;
}

.scroll-plane::before {
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(var(--accent-rgb), 0.18);
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.scroll-plane > * {
	position: relative;
	z-index: 1;
}

.scroll-plane__trail {
	position: absolute;
	left: 50%;
	top: calc(-1 * var(--trail-height, 140px));
	width: 2px;
	height: var(--trail-height, 140px);
	background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.6), rgba(var(--accent-rgb), 0));
	transform: translateX(-50%) scaleY(var(--trail-scale));
	transform-origin: bottom;
	opacity: 0.8;
}

.scroll-plane__ring {
	position: absolute;
	inset: 8px;
	border-radius: 999px;
	border: 1px solid rgba(var(--accent-rgb), 0.7);
	opacity: 0;
	transform: scale(0.7);
	animation: scrollPlaneWave 2.8s ease-out infinite;
}

.scroll-plane__ring--2 {
	animation-delay: 0.9s;
}

.scroll-plane__ring--3 {
	animation-delay: 1.8s;
}

.scroll-plane__arrow {
	position: relative;
	width: 18px;
	height: 18px;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.scroll-plane__top {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.scroll-plane__arrow::before,
.scroll-plane__arrow::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 2px;
	background: var(--accent);
	transform: translateX(-50%);
}

.scroll-plane__arrow::before {
	width: 2px;
	height: 14px;
	border-radius: 999px;
}

.scroll-plane__arrow::after {
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--accent);
	border-left: 2px solid var(--accent);
	background: transparent;
	transform: translateX(-50%) rotate(45deg);
}

.scroll-plane.is-scrolled .scroll-plane__arrow {
	opacity: 1;
	transform: translateY(0);
}

.scroll-plane.is-top .scroll-plane__top {
	opacity: 1;
	transform: scale(1);
}

.scroll-plane:hover,
.scroll-plane:focus-visible {
	transform: translateY(var(--plane-offset)) scale(1.06);
	filter: drop-shadow(0 16px 24px rgba(16, 16, 16, 0.26));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.scroll-plane:hover::before,
.scroll-plane:focus-visible::before {
	opacity: 1;
	transform: scale(1);
}

.scroll-plane:hover .scroll-plane__ring,
.scroll-plane:focus-visible .scroll-plane__ring {
	animation-play-state: paused;
	opacity: 0.5;
	transform: scale(0.95);
}

.scroll-plane:hover .scroll-plane__arrow::before,
.scroll-plane:focus-visible .scroll-plane__arrow::before {
	background: var(--accent);
}

.scroll-plane:hover .scroll-plane__arrow::after,
.scroll-plane:focus-visible .scroll-plane__arrow::after {
	border-top-color: var(--accent);
	border-left-color: var(--accent);
}

@keyframes scrollPlaneWave {
	0% {
		opacity: 0.65;
		transform: scale(0.7);
	}
	70% {
		opacity: 0.2;
	}
	100% {
		opacity: 0;
		transform: scale(1.35);
	}
}

body[data-theme='dark'] .scroll-plane {
	filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5));
}

@media (max-width: 900px) {
	.scroll-plane {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scroll-plane__ring {
		animation: none;
	}
	.scroll-plane {
		transition: none;
	}
}