/* --------------------------------------------------------------------------
   Hotspot with ripple.

   Ported from the zoho tour (css/nano.buttons.css). The ring is a child
   element of the hotspot rather than a second krpano hotspot, which means:

     - it is concentric with the icon by construction, so no angular offset
       has to be calculated to line the two up;
     - krpano's scale tween on hover grows the whole hotspot, so the icon and
       the ring scale together.

   Tune the ripple here, not in tour.xml - it is pure CSS.
   -------------------------------------------------------------------------- */

.hb__hotspot {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	cursor: pointer;
}

.hb__hotspot .dot {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("../skin/vtourskin_hotspot.png");
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.hb__hotspot .pulse {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/* keep the border inside the box, otherwise the ring is 2px wider than the icon
	   and ends up a pixel off-centre */
	box-sizing: border-box;
	border: 1px solid #ffffff;
	border-radius: 50%;
	transform-origin: center center;
	animation: hbPulse 2s ease-out infinite;
	pointer-events: none;
}

/* Starts just inside the icon's edge so the ring appears to come out from
   behind it, then fades out well before it gets large. */
@keyframes hbPulse {
	0%   { transform: scale(0.85); opacity: 0; }
	25%  { transform: scale(1.00); opacity: 0.65; }
	100% { transform: scale(1.60); opacity: 0; }
}

/* The zoho tour also breathes the icon itself - uncomment to get that too.
.hb__hotspot .dot {
	animation: hbBreathe 2s ease-in-out infinite;
}
@keyframes hbBreathe {
	0%, 100% { transform: scale(0.96); }
	50%      { transform: scale(1.04); }
}
*/