/* "Come back later" screen: the hot-air-balloon bear drifts and a few small
   pieces rise behind it. Pure CSS, so it costs nothing on a phone. */
.waiting-scene {
	position: relative;
	height: 200px;
	margin: 6px 0 4px;
	overflow: hidden;
}

.waiting-scene .floaty {
	position: absolute;
	bottom: -30px;
	opacity: 0;
	animation: floaty-rise linear infinite;
}

/* hot-air-balloon-bear.png is 2:3: at 116px wide it is 174px tall, which with
   top 10px and the 14px bob stays inside the 200px scene. */
.waiting-scene .hero {
	position: absolute;
	left: 50%;
	top: 10px;
	width: 116px;
	transform: translateX(-50%);
	animation: hero-bob 4.5s ease-in-out infinite;
	filter: drop-shadow(0 8px 10px rgba(58, 120, 189, 0.25));
}

@keyframes hero-bob {
	0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
	50%      { transform: translateX(-50%) translateY(-14px) rotate(2deg); }
}

@keyframes floaty-rise {
	0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
	12%  { opacity: 0.9; }
	88%  { opacity: 0.9; }
	100% { transform: translateY(-220px) rotate(12deg); opacity: 0; }
}

.closed-title {
	margin: 0;
	text-align: center;
	font: 700 1.7rem "Dancing Script", cursive;
}

.closed-text {
	margin: 6px 0 0;
	text-align: center;
	opacity: 0.85;
}