/* 3 Bears Coffee: story stall (STALL-CONTRACT.md). Motion lives in js/stall.js. */
#story { overflow-x: clip; }
.story-stall { position: relative; }
.stall-stage { position: relative; width: 100%; max-width: 600px; margin: 0 auto; }
.stall-art { display: block; width: 100%; height: auto; overflow: visible; }
/* the exact spot the bird's feet touch: top centre of the awning roof (x 270, y 96 of 600x520) */
.stall-perch {
  position: absolute; left: calc(45% - 40px); top: 18.4615%; width: 80px; height: 2px;
  pointer-events: none; visibility: hidden;
}
html.js [data-stall]:not([data-ready]) .stall-art { visibility: hidden; }

/* idle once built: awning flutter and sign sway (cups are iced, so no steam) */
.stall-art .st-flutter, .stall-art .st-sway { transform-box: view-box; }
.stall-art .st-flutter { transform-origin: 270px 126px; }
.stall-art .st-sway { transform-origin: 270px 168px; }
[data-stall][data-built] .st-flutter { animation: stFlutter 3.4s ease-in-out infinite; }
[data-stall][data-built] .st-sway { animation: stSway 4.6s ease-in-out infinite; }
@keyframes stFlutter {
  0%, 100% { transform: scaleY(1) skewX(0deg); }
  30% { transform: scaleY(1.03) skewX(.7deg); }
  65% { transform: scaleY(.99) skewX(-.5deg); }
}
@keyframes stSway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(1.2deg); } 75% { transform: rotate(-1.2deg); } }

@media (max-width: 900px) {
  .stall-stage { max-width: 470px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-stall][data-built] .st-flutter, [data-stall][data-built] .st-sway { animation: none; }
}