/* ================================================================
   BG — Hero Scroll Cue
   Namespace: .bg-hero-scroll-cue  .bg-hero-scroll-cue__*
   Load: condizionale via functions.php (is_front_page in v1.0)
   Spec: HERO.md § Scroll cue + preview-hero.html canonical
   ================================================================ */

.bg-hero-scroll-cue,
.bg-hero-scroll-cue:hover,
.bg-hero-scroll-cue:focus,
.bg-hero-scroll-cue:focus-visible,
.bg-hero-scroll-cue:active {
	background: transparent;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

.bg-hero-scroll-cue {
	position: absolute;
	bottom: clamp(20px, 3vw, 40px);
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--z-overlay);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	animation: cue-fade-in 800ms 600ms var(--ease-out) backwards;
	transition: opacity var(--dur-s) var(--ease-out);
	-webkit-appearance: none;
	appearance: none;
}

.bg-hero-scroll-cue:hover {
	opacity: 0.7;
}

.bg-hero-scroll-cue:focus {
	outline: none;
}

.bg-hero-scroll-cue:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 4px;
	border-radius: 2px;
}

.bg-hero-scroll-cue__label {
	font-family: var(--f-sans);
	text-transform: uppercase;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: var(--track-wider);
	color: var(--text);
}

.bg-hero-scroll-cue__arrow {
	width: 14px;
	height: 18px;
	stroke: var(--text);
	stroke-width: 1.25;
	fill: none;
	animation: cue-bounce 1.8s var(--ease-out) infinite;
}

@keyframes cue-fade-in {
	from { opacity: 0; transform: translate(-50%, 8px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes cue-bounce {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50%      { transform: translateY(4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.bg-hero-scroll-cue        { animation: none; }
	.bg-hero-scroll-cue__arrow { animation: none; opacity: 0.7; }
}