/* BookedTok: Piper's three flips, laid over the phone frame ahead of the site's own flips. */
#bt{position:absolute;inset:0;z-index:9000;background:#000;overflow:hidden;cursor:default;
  transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .45s;touch-action:none;-webkit-user-select:none;user-select:none}
#bt.gone{transform:translateY(-100%);opacity:0;pointer-events:none}
#bt .bt-track{position:absolute;inset:0;transition:transform .45s cubic-bezier(.4,0,.2,1)}
#bt .bt-flip{position:absolute;left:0;right:0;height:100%;overflow:hidden;background:#111}
#bt .bt-flip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111 center/cover no-repeat}
#bt .bt-top{position:absolute;top:14px;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:18px;
  font:600 16px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:rgba(255,255,255,.6);
  text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}
#bt .bt-top .on{color:#fff;position:relative}
#bt .bt-top .on::after{content:"";position:absolute;left:30%;right:30%;bottom:-7px;height:2px;background:#fff;border-radius:2px}
#bt.opening .bt-top,#bt.opening .bt-sound{opacity:0}
#bt .bt-stack{position:absolute;left:0;right:0;top:24%;height:31%;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;pointer-events:none}
#bt .bt-btn{opacity:0;transform:translateY(10px);pointer-events:none;
  padding:17px 30px;min-width:240px;border:0;border-radius:999px;background:#fe2c55;color:#fff;white-space:nowrap;
  font:700 19px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  box-shadow:0 6px 24px rgba(0,0,0,.45);transition:opacity .35s,transform .35s;cursor:pointer}
#bt .bt-btn.show{opacity:1;transform:none;pointer-events:auto}
#bt .bt-sound{position:absolute;right:14px;bottom:18px;z-index:4;width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;transition:opacity .3s;cursor:pointer}
#bt .bt-sound svg{width:22px;height:22px}
#bt .bt-sound .wave{display:none}
#bt.loud .bt-sound .wave{display:inline}
#bt.loud .bt-sound .cross{display:none}
#bt .bt-open{position:absolute;inset:0;z-index:5;background:#000;transition:opacity .5s}
#bt .bt-open video{width:100%;height:100%;object-fit:cover}
#bt .bt-open.done{opacity:0;pointer-events:none}
#bt .bt-swipe{text-align:center;opacity:0;transition:opacity .35s;pointer-events:none;
  font:600 14px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
#bt .bt-swipe span{display:block;width:14px;height:14px;margin:0 auto 8px;border-left:3px solid #fff;border-top:3px solid #fff;
  transform:rotate(45deg);animation:bt-bob 1s ease-in-out infinite}
#bt .bt-swipe.show{opacity:1}
@keyframes bt-bob{50%{margin-bottom:14px;margin-top:-6px}}
#bt .bt-play{position:absolute;left:50%;top:50%;z-index:8;width:132px;height:132px;margin:-66px 0 0 -66px;padding:0;
  border:0;border-radius:50%;background:rgba(254,44,85,.92);box-shadow:0 10px 40px rgba(0,0,0,.55),0 0 0 10px rgba(254,44,85,.22);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .35s,transform .35s;
  animation:bt-breathe 2.2s ease-in-out infinite}
#bt .bt-play svg{width:64px;height:64px;margin-left:8px}
#bt .bt-play.gone{opacity:0;transform:scale(1.3);pointer-events:none;animation:none}
@keyframes bt-breathe{0%,100%{box-shadow:0 10px 40px rgba(0,0,0,.55),0 0 0 10px rgba(254,44,85,.22)}50%{box-shadow:0 10px 40px rgba(0,0,0,.55),0 0 0 22px rgba(254,44,85,.08)}}

/* ---- TikTok's frame over Piper's flips: the site's tabs, search, rail and bottom bar sit on top and answer for her ---- */
body.bt-tt .video > .top-tabs, body.bt-tt .video > .search, body.bt-tt .video > .search-menu,
body.bt-tt .video > .actions, body.bt-tt .video > .navbar{z-index:9100}
body.bt-tt .comments-panel, body.bt-tt #shareOverlay, body.bt-tt #profileOverlay, body.bt-tt #waitlistOverlay{z-index:9600}
#bt.bk-on{z-index:9500}
body.bt-tt #bt .bt-top, body.bt-tt #bt .bt-sound{display:none}
#bt .bt-info{position:absolute;left:14px;right:80px;bottom:78px;z-index:3;color:#fff;text-align:left;pointer-events:auto;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
#bt.bk-on .bt-info,#bt.opening .bt-info{visibility:hidden}
#bt .bt-user{font-size:17px;font-weight:700;margin-bottom:6px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
#bt .bt-cap{font-size:14px;line-height:1.35;margin-bottom:10px;text-shadow:0 1px 3px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
#bt .bt-cap.open{-webkit-line-clamp:unset;display:block}
#bt .bt-cap .tag{font-weight:700}
#bt .bt-music{display:flex;align-items:center;gap:6px;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.7);max-width:220px;overflow:hidden}
#bt .bt-tick{overflow:hidden;white-space:nowrap;flex:1}
#bt .bt-tick span{display:inline-block;padding-left:100%;animation:bt-tick 9s linear infinite}
@keyframes bt-tick{to{transform:translateX(-100%)}}
#bt .bt-toast{position:absolute;left:50%;top:44%;z-index:30;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;
  padding:12px 18px;border-radius:10px;font:600 15px/1.3 -apple-system,BlinkMacSystemFont,sans-serif;white-space:nowrap;transition:opacity .4s}
#bt .bt-toast.out{opacity:0}
#bt .bk-prof{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:6px}
#bt .bk-prof img{width:96px;height:96px;border-radius:50%;border:3px solid #fe2c55;object-fit:cover}
#bt .bk-prof-at{font-weight:700;opacity:.8}
#bt .bk-prof-stats{display:flex;gap:22px;font-size:13px;opacity:.85}
#bt .bk-prof-stats span{display:flex;flex-direction:column;align-items:center}
#bt .bk-prof-stats b{font-size:17px}
@media (max-width:1024px){ #bt .bt-info{bottom:60px;left:12px;right:62px} }
@media (min-width:761px) and (max-width:1024px){ #bt .bt-info{bottom:80px;left:18px;right:84px} }