/* eShobuy player feedback — derived from cache-busted for. */
/* eShobuy — play/pause feedback. Loaded last. Palette unchanged. */

/* The whole frame is the play/pause surface, so it should say so on a
   desktop. On touch there is no cursor, and the mark below does the work. */
html body #view-reels .reel-slide{ cursor: pointer; }
html body #view-reels .reel-slide .reel-actions,
html body #view-reels .reel-slide .reel-info,
html body #view-reels .reel-slide button,
html body #view-reels .reel-slide a{ cursor: default; }
html body #view-reels .reel-slide button,
html body #view-reels .reel-slide a{ cursor: pointer; }

/* The pause mark.

   A tap that pauses with no feedback reads as "nothing happened", so people
   tap again — which resumes it. That is most of what "pause does not work"
   actually was. The mark confirms the state change and then gets out of the
   way, except while paused, when it stays as the standing indicator. */
.ferro-mark{
  position: absolute;
  top: 50%; left: 50%;
  width: 78px; height: 78px;
  margin: -39px 0 0 -39px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(12,16,22,.44);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14);
  opacity: 0;
  pointer-events: none;
  z-index: 11;
}
.ferro-mark::before{
  content: "";
  width: 30px; height: 30px;
  background: #fff;
}
.ferro-mark[data-kind="pause"]::before{
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 5h3v14H8zM13 5h3v14h-3z'/></svg>");
  mask: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 5h3v14H8zM13 5h3v14h-3z'/></svg>");
}
.ferro-mark[data-kind="play"]::before{
  -webkit-mask: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 5v14l11-7z'/></svg>");
  mask: center/contain no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 5v14l11-7z'/></svg>");
}

/* Resume flashes and fades — the state is confirmed, then the picture is
   handed back. Pause holds, because a paused video with nothing on it looks
   like a video that failed to load. */
.ferro-mark.is-flash{ animation: ferro-flash .58s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes ferro-flash{
  0%{ opacity: 0; transform: scale(.74) }
  20%{ opacity: 1; transform: scale(1) }
  62%{ opacity: 1; transform: scale(1) }
  100%{ opacity: 0; transform: scale(1.16) }
}
#view-reels .reel-slide.ferro-paused .ferro-mark{
  opacity: 1!important;
  transform: none!important;
  animation: none!important;
}

/* The old marks from earlier layers, so there is exactly one on screen. */
html body .ember-mark,
html body .prism-pause-mark,
html body .lens-play-flash{ display: none!important; }

@media (prefers-reduced-motion: reduce){
  .ferro-mark.is-flash{ animation: none; opacity: 1; }
}