/* Tap script screen: a fake app screen that acts itself out, a soft grey touch dot gliding to buttons and pressing them
   while the screen reacts, on a loop (Square's homepage "click into place" explorer runs Rive files that do this).
   Plus the stage Square shows them on: each screen floats on its own photo; switching crossfades the panels (.2s) while
   the new screen settles from 90% (.5s decelerate), and only the shown screen plays. */
.tss-screen { position: relative; overflow: hidden; }
.tss-dot {
  --tss-dot: 36px;
  position: absolute; left: 0; top: 0; width: var(--tss-dot); height: var(--tss-dot); margin: calc(var(--tss-dot) / -2) 0 0 calc(var(--tss-dot) / -2);
  border-radius: 50%; background: rgba(150, 150, 150, .42); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset;
  pointer-events: none; z-index: 50; opacity: 0; will-change: transform;
  transition: opacity .3s ease, scale .12s ease-out, background-color .12s ease-out;
}
.tss-dot.is-on { opacity: 1; }
.tss-dot.is-down { scale: .82; background: rgba(120, 120, 120, .55); transition-duration: .3s, .1s, .1s; }

.tss-stage { --tss-swap: .2s; --tss-ease: cubic-bezier(.4, 0, .2, 1); --tss-settle: .5s; --tss-settle-ease: cubic-bezier(0, 0, .2, 1); --tss-from: .9;
  position: relative; display: grid; overflow: hidden; }
.tss-panel { grid-area: 1 / 1; position: relative; display: grid; place-items: center; opacity: 0; visibility: hidden;
  transition: opacity var(--tss-swap) var(--tss-ease), visibility 0s linear var(--tss-swap); }
.tss-panel.is-active { opacity: 1; visibility: visible; transition: opacity var(--tss-swap) var(--tss-ease), visibility 0s; }
.tss-ground { position: absolute; inset: 0; }
.tss-ground > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.tss-float { position: relative; z-index: 1; transform: scale(var(--tss-from)); transition: transform var(--tss-settle) var(--tss-settle-ease); }
.tss-panel.is-active .tss-float { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .tss-panel, .tss-float, .tss-dot { transition: none !important; } .tss-float { transform: none; } }