/* The Watermelon Party demo card (templates/feed/_demo_film_card.html): the
   film fills the card edge to edge on black, no panel, no words over it. */
.demo-film-card > .tb-card__inner { background: #000; }
.demo-film-face { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; background: #000; }
.demo-film { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #000; isolation: isolate; }
.demo-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; background: #000; }
.demo-film__video::-webkit-media-controls { display: none !important; }
.demo-film__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.demo-film__tap { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.demo-film__tap:focus-visible { outline: 3px solid #f2e841; outline-offset: -3px; }
.demo-film__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 3px #f2e841 inset; transition: opacity .25s ease; }
.demo-film__play::before { content: ""; position: absolute; left: 34px; top: 26px; border-left: 26px solid #f2e841;
  border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.demo-film.is-playing .demo-film__play { opacity: 0; }
.demo-film__sound { position: absolute; top: 14px; right: 14px; padding: 8px 16px; border-radius: 999px; background: #f2e841; color: #000;
  font: 700 14px/1 "Plus Jakarta Sans", system-ui, sans-serif; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.demo-film.is-muted .demo-film__sound { opacity: 1; }