/**
 * 360° tour — interaction surface.
 *
 * Loaded after main.css so these rules win without needing !important. Only
 * the .pano block lives here; everything else about the viewer's appearance
 * stays in main.css.
 */

/**
 * A drag inside the stage rotates the camera; it must never become a page
 * scroll or a browser pinch-zoom. Without touch-action:none the browser claims
 * the gesture as a pan on the first vertical move and the pointermove stream
 * stops arriving, so on a phone the panorama simply scrolls past instead of
 * turning. overscroll-behavior keeps a fast drag from chaining into a
 * pull-to-refresh at the top of the document.
 */
.pano__stage {
	touch-action: none;
	overscroll-behavior: contain;
	-webkit-user-select: none;
	user-select: none;
	cursor: grab;
}

.pano__stage.is-dragging {
	cursor: grabbing;
}

/**
 * The canvas is the drag target under the pointer, so it needs the same
 * declaration: an inherited touch-action does not apply, the used value is
 * taken from the element the touch lands on.
 */
.pano__canvas {
	touch-action: none;
	-webkit-user-drag: none;
	cursor: inherit;
}

/* The controls stay clickable rather than draggable. */
.pano__tool,
.pano__hotspots .hotspot {
	touch-action: manipulation;
	cursor: pointer;
}