/* Template film: what it adds to film.css (the window, cursor and click it shares with the landing film). */
.tfilm .tf-cam { position: absolute; top: 0; left: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
.tfilm .film-browser-body > iframe { position: absolute; top: 0; left: 0; }
.tfilm .tf-app-pane { left: 421px !important; top: 104px !important; }
.tfilm .tf-jira { position: relative; background: #fff; }
.tfilm .tf-jira iframe { transform-origin: 0 0; }
.tfilm .tf-side { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; box-shadow: -1px 0 0 #dadce0; border-left: 0; }
.tfilm .tf-spin { width: 16px; height: 16px; flex: none; display: grid; place-items: center; }
.tfilm .tf-spin .spin { animation: tf-spin 700ms linear infinite; }
@keyframes tf-spin { to { transform: rotate(360deg); } }
.tfilm .bar .rl.tf-busy { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .tfilm .tf-spin .spin { animation: none; } }
/* Before / After: a chip over the page, the same in every film. */
.tfilm .tf-chip { position: absolute; left: 610px; bottom: 30px; translate: -50% 0; z-index: 12; padding: 10px 22px; border-radius: 980px;
  font: 700 26px/32px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; letter-spacing: -.02em;
  background: #1d1d1f; color: #fff; box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); }
.tfilm .tf-chip.after { background: #f3ff7c; color: #1d1d1f; box-shadow: 0 0 0 2px #1d1d1f, 0 10px 30px -10px rgba(0,0,0,.35); }
.tfilm .tf-chip.pop { animation: tf-chip 460ms cubic-bezier(.34,1.45,.64,1) both; }
@keyframes tf-chip { from { transform: translateY(10px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tfilm .tf-chip.pop { animation: none; } }