/*
	ScratchSurface component - the canvas that sits over whatever is being revealed.
	The host page positions it; this file only owns the canvas' own behaviour.
*/

.cnvScratchSurface
{
	cursor:grab;
	display:block;
	height:100%;
	left:0px;
	opacity:0;
	position:absolute;
	top:0px;
	touch-action:none;
	transition:opacity 0.2s ease-in-out;
	width:100%;
	z-index:3;
}

.cnvScratchSurface.loaded
{
	opacity:1;
}

/*
	app.css sets "touch-action: pan-y pan-x" on ".iphone *" below 600px, which carries the same
	specificity as the class above - so the winner is whichever stylesheet the browser saw last.
	Losing that race let iOS read a scratch as a page pan and cancel the touch part way through the
	stroke. Naming the element puts this declaration out of reach of the tie.
*/
canvas.cnvScratchSurface
{
	touch-action:none;
}

.cnvScratchSurface:active
{
	cursor:grabbing;
}

.cnvScratchSurface.completed
{
	opacity:0;
	pointer-events:none;
	transition:opacity 0.5s ease-in-out;
}