/* ============ A film that asks for one click ==========================
   Shared by the home (the trailer) and the demo page (the screen film).
   The film runs muted. On a mouse the native cursor is hidden over it and
   a frosted disc follows the pointer instead, carrying a speaker: crossed
   while the sound is off, with waves once it is on. Touch has no pointer,
   so it keeps the normal cursor and gets a state badge in the corner. The
   volume follows how much of the film is on screen (film.js). */
.film-stage { --ease:cubic-bezier(0.22,1,0.36,1); --tan:#c5a28c;
  display:block; position:relative; width:100%; margin:0; padding:0; border:0; background:#000;
  border-radius:14px; overflow:hidden; aspect-ratio:16/9;
  box-shadow:rgba(19,18,16,.38) 0 34px 70px -32px; cursor:pointer; }
.film-video { display:block; width:100%; height:100%; object-fit:cover; }
.film-stage:focus-visible { outline:2px solid var(--tan); outline-offset:4px; }

.film-cursor { position:absolute; left:0; top:0; width:54px; height:54px; margin:-27px 0 0 -27px;
  display:grid; place-items:center; border-radius:50%; pointer-events:none;
  background:rgba(20,19,17,.28); border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:rgba(0,0,0,.35) 0 10px 30px -10px, inset rgba(255,255,255,.12) 0 1px 0;
  opacity:0; transform:scale(.7); transition:opacity .22s var(--ease), transform .22s var(--ease); }
.film-cursor.is-in { opacity:1; transform:none; }
.film-stage:active .film-cursor.is-in { transform:scale(.88); }
.film-cursor svg { width:22px; height:22px; color:#fff; display:block; }
.film-cursor .tc-on { display:none; }
.film-stage[aria-pressed="true"] .tc-off { display:none; }
.film-stage[aria-pressed="true"] .tc-on { display:block; }
@media (hover:hover) and (pointer:fine) { .film-stage { cursor:none; } }

/* the badge only where there is no pointer to dress */
.film-state { display:none; position:absolute; right:.9rem; bottom:.9rem; padding:.34rem .7rem; border-radius:100px;
  background:rgba(20,19,17,.62); color:rgba(236,233,226,.86); border:1px solid rgba(236,233,226,.2);
  font-family:Satoshi,'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:.64rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
@media (hover:none) { .film-state { display:block; } }