/* Live screens (js/live.js): a product screen redrawn in HTML at its native
   size and scaled into the page. The canvas speaks the product's fonts, not the
   site's — it is a picture of someone else's interface. */

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/roboto.woff2) format('woff2'); }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/fonts/unbounded-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/fonts/unbounded.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url(/fonts/plex-sans-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url(/fonts/plex-sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.lv-stage { position: relative; overflow: hidden; }
.lv-stage > .lv-still { display: block; width: 100%; height: 100%; object-fit: cover; }
.lv-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--s, 1));
  opacity: 0; pointer-events: none; -webkit-font-smoothing: antialiased; }
.lv-stage.is-live > .lv-canvas { opacity: 1; }
.lv-stage.is-live > .lv-still { visibility: hidden; }

/* mouse arrow */
.lv-cur { position: absolute; left: 0; top: 0; z-index: 20; width: 0; height: 0; opacity: 0; transition: opacity .3s; }
.lv-cur.is-on { opacity: 1; }
.lv-cur svg { position: absolute; left: -3px; top: -2px; width: 28px; height: 28px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); transition: transform .12s; transform-origin: 3px 2px; }
.lv-cur.is-down svg { transform: scale(.86); }
/* finger: a soft dot, like iOS touch indicators in screen recordings */
.lv-touch { position: absolute; left: 0; top: 0; z-index: 20; width: 0; height: 0; opacity: 0; transition: opacity .3s; }
.lv-touch.is-on { opacity: 1; }
.lv-touch::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(24,29,48,.22); box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 6px 16px rgba(24,29,48,.18); transition: transform .12s; }
.lv-touch.is-down::before { transform: scale(.8); background: rgba(24,29,48,.32); }
.lv-ripple { position: absolute; left: 0; top: 0; z-index: 19; width: 0; height: 0; pointer-events: none; }
.lv-ripple::before { content: ""; position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid rgba(24,29,48,.35); animation: lv-ring .6s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes lv-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* the scene's own entrances; a scene adds .lv-in to reveal */
.lv-rise { opacity: 0; translate: 0 18px; transition: opacity .5s, translate .7s cubic-bezier(.16,1,.3,1); }
.lv-pop { opacity: 0; scale: .7; transition: opacity .3s, scale .45s cubic-bezier(.34,1.56,.64,1); }
.lv-fade { opacity: 0; transition: opacity .45s; }
.lv-in { opacity: 1; translate: 0 0; scale: 1; }
.is-pressed { filter: brightness(.88); scale: .97; transition: filter .12s, scale .12s; }