/**
 * Hourglass Scroll Line — frontend styles.
 * The canvas is an absolutely-positioned decorative layer that never
 * intercepts pointer or keyboard interaction.
 */

.hg-line-canvas {
	position: absolute;
	top: calc(-1 * var(--hg-overlap-top, 32px));
	bottom: calc(-1 * var(--hg-overlap-bottom, 32px));
	left: 0;
	right: 0;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	z-index: 0;
}

/* Constrained-canvas mode: center a max-width band. */
.hg-line-canvas[data-hg-width-mode="constrained"] {
	left: 50%;
	right: auto;
	width: min(100%, var(--hg-canvas-max-width, 1280px));
	transform: translateX(-50%);
}

.hg-line-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hg-line-stage {
	fill: none;
	stroke: var(--hg-stroke, #C9A45C);
	stroke-width: var(--hg-stroke-width, 3px);
	opacity: var(--hg-opacity, 0.9);
}

/* Debug overlay. */
.hg-debug .hg-line-canvas {
	outline: 1px dashed rgba(200, 60, 60, 0.5);
}

.hg-debug-dot {
	fill: #e0402b;
}

.hg-debug-dot--art {
	fill: #2b7de0;
}

/* Reduced motion: the plugin resolves the final state in JS; ensure no
   transition smears the switch. */
@media (prefers-reduced-motion: reduce) {
	.hg-line-stage {
		transition: none !important;
	}
}