/* ==========================================================================
   Scroll Attract & Reveal — styles
   ========================================================================== */

/* --- The attracting arrow --- */
#sar-arrow {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	width: 4em; /* ~4x an alphanumeric character at body font-size */
	height: 4em;
	z-index: 9999;
	pointer-events: none;
	animation: sar-bounce 1.4s ease-in-out infinite,
	           sar-glow 2.4s ease-in-out infinite;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

#sar-arrow svg {
	width: 100%;
	height: 100%;
	display: block;
}

#sar-arrow.sar-arrow-hidden {
	opacity: 0;
	visibility: hidden;
}

@keyframes sar-bounce {
	0%, 100% { margin-bottom: 0; }
	50%      { margin-bottom: 18px; }
}

@keyframes sar-glow {
	0%   { color: #9b30ff; filter: drop-shadow(0 0 10px #9b30ff); }
	50%  { color: #ff2d2d; filter: drop-shadow(0 0 14px #ff2d2d); }
	100% { color: #9b30ff; filter: drop-shadow(0 0 10px #9b30ff); }
}

/* --- Reveal chunks --- */
/* Each chunk gets a reserved min-height (set inline by JS) so the page
   doesn't jump around as content pops in — the blank gap is intentional,
   the layout underneath it is not. */
.sar-chunk {
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}

.sar-chunk.sar-revealed {
	opacity: 1;
	transform: scale(1);
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
	#sar-arrow {
		animation: none;
	}
	.sar-chunk {
		opacity: 1;
		transform: none;
		transition: none;
	}
}