/* ==========================================================================
   THE FILM PLAYER - shared by vola, gpay, marketplace and ai-website-builder.

   One component, like the navbar: four copies of a player is four players.
   The page owns the FRAME (size, radius, shadow, where it sits); this file
   owns everything inside it. Re-tint per page with the --film-* tokens,
   never by restyling .film-* directly.

   The browser's own controls are OFF on purpose. With them on, "click the
   picture to pause" means something different in every engine - Chrome and
   Firefox toggle natively, Safari does not, and a click on the native bar
   also reaches the video - so a hand-rolled toggle fought the browser's.
   With our own bar, a click on the picture is a click on the picture.
   ========================================================================== */
.film{
  --film-ink:#fff;
  --film-fill:#fff;
  --film-track:rgba(255,255,255,.28);
  --film-scrim:rgba(0,0,0,.62);
  position:relative;overflow:hidden;background:#000;
  -webkit-tap-highlight-color:transparent;
  aspect-ratio:16/9;
}
.film-v{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;cursor:pointer;background:#000;
}

/* THE BIG BUTTON. Shown whenever the film is not playing, hidden while it is.
   It is also the no-hover device's only affordance before the first press,
   so it has to read on a busy poster: a bare glyph, no disc behind it, held
   off bright frames by a soft shadow rather than a fill. */
.film-big{
  position:absolute;left:50%;top:50%;z-index:2;
  width:clamp(56px,6.4vw,84px);height:clamp(56px,6.4vw,84px);
  margin:0;padding:0;border:0;border-radius:50%;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  background:transparent;color:var(--film-ink);
  cursor:pointer;transition:opacity .25s ease,transform .25s ease;
}
.film-big svg{width:56%;height:56%;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.film-big .i-play{margin-left:8%}
.film-big:hover{transform:translate(-50%,-50%) scale(1.06)}
.film.is-playing .film-big{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.9)}

/* THE BAR. Over a scrim so the controls read on a white frame, and gone
   while the film plays untouched - it comes back on pointer movement,
   on focus, and whenever the film stops. */
.film-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:clamp(8px,1vw,14px);
  padding:clamp(28px,4vw,48px) clamp(10px,1.4vw,18px) clamp(8px,1vw,14px);
  background:linear-gradient(to top,var(--film-scrim),transparent);
  color:var(--film-ink);
  font:600 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
  transition:opacity .3s ease;
}
.film.is-idle .film-bar{opacity:0;pointer-events:none}
.film.is-idle{cursor:none}
.film.is-idle .film-v{cursor:none}

.film-btn{
  flex:none;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;background:transparent;color:inherit;cursor:pointer;
}
.film-btn:hover{background:rgba(255,255,255,.14)}
.film-btn svg{width:18px;height:18px;display:block}
.film-big:focus-visible,
.film-btn:focus-visible,
.film-seek:focus-visible{outline:2px solid var(--film-ink);outline-offset:2px}

/* Only one of each pair shows. */
.film .i-pause,
.film .i-exit,
.film .i-replay{display:none}
.film.is-playing .film-pp .i-play{display:none}
.film.is-playing .film-pp .i-pause{display:block}
.film.is-ended .film-big .i-play,
.film.is-ended .film-pp .i-play{display:none}
.film.is-ended .film-big .i-replay,
.film.is-ended .film-pp .i-replay{display:block}
.film.is-ended .film-big .i-replay{margin-left:0}
.film.is-full .film-fs .i-enter{display:none}
.film.is-full .film-fs .i-exit{display:block}

/* THE SCRUBBER. A range input, so keyboard and screen readers get seeking
   for free; the played part is a gradient stop driven by --p. */
.film-seek{
  --p:0%;
  flex:1;min-width:0;height:20px;margin:0;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
.film-seek::-webkit-slider-runnable-track{
  height:4px;border-radius:4px;
  background:linear-gradient(to right,var(--film-fill) var(--p),var(--film-track) var(--p));
}
.film-seek::-moz-range-track{height:4px;border-radius:4px;background:var(--film-track)}
.film-seek::-moz-range-progress{height:4px;border-radius:4px;background:var(--film-fill)}
.film-seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;
  border:0;border-radius:50%;background:var(--film-fill);
  transform:scale(0);transition:transform .15s ease;
}
.film-seek::-moz-range-thumb{
  width:14px;height:14px;border:0;border-radius:50%;background:var(--film-fill);
  transform:scale(0);transition:transform .15s ease;
}
.film-bar:hover .film-seek::-webkit-slider-thumb,
.film-seek:focus-visible::-webkit-slider-thumb{transform:scale(1)}
.film-bar:hover .film-seek::-moz-range-thumb,
.film-seek:focus-visible::-moz-range-thumb{transform:scale(1)}
@media (hover:none){
  .film-seek::-webkit-slider-thumb{transform:scale(1)}
  .film-seek::-moz-range-thumb{transform:scale(1)}
}

.film-t{flex:none;white-space:nowrap;opacity:.92}

/* A phone-width frame is ~190px tall: the full bar plus the big button would
   cover half of it. Thinner scrim, smaller hit targets (still 32px), and the
   big button only before the first press and at the end - mid-film the bar's
   own button is enough, and the picture itself is the pause control. */
@media (max-width:560px){
  .film-bar{gap:6px;padding:18px 6px 4px}
  .film-btn{width:32px;height:32px}
  .film-btn svg{width:16px;height:16px}
  .film-t .film-dur,.film-t .film-sep{display:none}
  .film-big{width:48px;height:48px}
  .film.is-started:not(.is-playing):not(.is-ended) .film-big{opacity:0;pointer-events:none}
}

/* Touch: every control answers a 44px finger without growing on screen. The
   buttons keep their 32-36px discs and take an invisible margin; the
   scrubber's input grows taller around its 4px track, and its thumb grows a
   little so it can be found under a fingertip. */
@media (pointer:coarse){
  .film-btn{position:relative}
  .film-btn::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .film-seek{height:44px;margin:-12px 0}
  .film-seek::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px}
  .film-seek::-moz-range-thumb{width:18px;height:18px}
}
/* The frame clips at its own edge, so a phone's bar needs room under the
   buttons for the lower half of that 44px. */
@media (pointer:coarse) and (max-width:560px){.film-bar{padding-bottom:10px}}

/* Buffering. A thin ring on the big-button spot, only while playback is
   genuinely waiting on the network. */
.film-wait{
  position:absolute;left:50%;top:50%;z-index:2;width:40px;height:40px;
  margin:-20px 0 0 -20px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
  animation:film-spin .8s linear infinite;
}
.film.is-waiting.is-playing .film-wait{opacity:1}
@keyframes film-spin{to{transform:rotate(360deg)}}

/* Full screen fills the display and shows the whole frame. */
.film:fullscreen{aspect-ratio:auto;width:100%;height:100%;border-radius:0}
.film:-webkit-full-screen{aspect-ratio:auto;width:100%;height:100%;border-radius:0}
.film:fullscreen .film-v{object-fit:contain}
.film:-webkit-full-screen .film-v{object-fit:contain}

@media (prefers-reduced-motion:reduce){
  .film-big,.film-bar,.film-wait{transition:none}
  .film-wait{animation-duration:2.4s}
}