/* A quiet opening: one outlined invitation (a pill, like the cube's Make It: home-agent-cube.css),
   and Play Video (after clickup.com). With
   a mouse, the whole footage is the Play Video button: a black pill follows the pointer in place of the cursor. Touch
   screens and keyboard focus show the same pill at rest over the footage. It opens the product film in a dialog. */
.worlds-action { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; margin-top: 24px; padding: 0 26px; border: 1px solid var(--rule-strong); border-radius: 999px; background: transparent; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0; pointer-events: auto; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.worlds-action:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.worlds-hero[data-film-title] .worlds-content h1 { opacity: 0; }
.worlds-hero[data-film-title] .worlds-film:not(:focus-visible) { opacity: 0; pointer-events: none; }

/* Play Video: at rest, the button is the pill itself, centred over the footage. */
.worlds-film { --film-rest: 44%; position: absolute; left: 50%; top: var(--film-rest); z-index: 2; display: block; width: auto; height: auto; padding: 0; border-radius: 16px; color: #fff; transform: translate(-50%, -50%); }
.worlds-film:focus-visible { outline: none; }
.worlds-film-cursor { display: block; pointer-events: none; }
.worlds-film-pill { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 16px; background: #000; box-shadow: 0 0 0 1px rgb(255 255 255 / 14%), 0 16px 40px rgb(0 0 0 / 35%); transition: transform 160ms ease; }
.worlds-film:focus-visible .worlds-film-pill { outline: 2px solid var(--accent); outline-offset: 4px; }
.worlds-film-icon { flex: none; width: 40px; height: 40px; }
.worlds-film-icon circle { fill: currentColor; }
.worlds-film-icon path { fill: #000; }
.worlds-film-label { font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 0; white-space: nowrap; }
/* With a mouse: the button covers the footage (below the title and Make your own) and the pill follows the
   pointer, growing in as it appears. Keyboard focus without the pointer rests the pill at the centre. The pill sits in
   the button's own box (site.js writes the pointer there as --film-x/-y), so it follows on a face the cube has
   shrunk too, and --film-k undoes that shrink so the pill keeps its size. */
@media (hover: hover) and (pointer: fine) and (forced-colors: none) {
  .worlds-film { inset: 0; z-index: auto; width: 100%; height: 100%; border-radius: 0; transform: none; cursor: none; }
  .worlds-film-cursor { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; transform: translate3d(var(--film-x, 0px), var(--film-y, 0px), 0) translate(-50%, -50%) scale(var(--film-k, 1)); transition: opacity 180ms ease; will-change: transform; }
  .worlds-film-pill { transform: scale(.85); }
  .worlds-film[data-pointer] .worlds-film-cursor { opacity: 1; }
  .worlds-film[data-pointer] .worlds-film-pill { transform: none; }
  .worlds-film:focus-visible:not([data-pointer]) .worlds-film-cursor { position: absolute; left: 50%; top: var(--film-rest); opacity: 1; transform: translate(-50%, -50%); }
  .worlds-film:focus-visible:not([data-pointer]) .worlds-film-pill { transform: none; }
}

/* The film: one large rounded frame over a dimmed page, with a round close button in the corner. */
.film-dialog { width: min(1080px, calc(100vw - 48px)); width: min(1080px, calc(100vw - 48px), calc((100svh - 112px) * 16 / 9)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 24px; background: #000; color: var(--ink); overflow: hidden; box-shadow: 0 32px 90px rgb(0 0 0 / 55%); }
.film-dialog::backdrop { background: rgb(0 0 0 / 70%); }
.film-dialog-player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.film-dialog-close { position: fixed; top: 20px; right: 20px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #fff; color: #18181b; }
.film-dialog-close svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.film-dialog-close:focus-visible { outline-offset: 3px; }
html.film-open { overflow: hidden; scrollbar-gutter: stable; }
@keyframes film-dialog-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .film-dialog[open], .film-dialog[open]::backdrop { animation: film-dialog-in 220ms ease-out; }
}
@media (pointer: coarse) {
  .film-dialog-close { width: 40px; height: 40px; }
}

@media (max-width: 680px), (max-width: 960px) and (orientation: portrait) {
  .worlds-action { margin-top: 22px; }
  .worlds-film { --film-rest: 60%; }
  .film-dialog { width: calc(100vw - 24px); border-radius: 14px; }
  .film-dialog-close { top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .worlds-content h1, .worlds-action, .worlds-film-cursor, .worlds-film-pill { transition: none; } }
@media (forced-colors: active) {
  .worlds-action { color: ButtonText; background: Canvas; border-color: ButtonText; opacity: 1; }
  .worlds-film-pill { color: ButtonText; background: Canvas; border: 1px solid ButtonText; box-shadow: none; }
  .worlds-film-icon path { fill: Canvas; }
}
@media print { .worlds-action, .worlds-film { display: none; } }
@media print { .worlds-hero[data-film-title] .worlds-content h1 { opacity: 1; transition: none; } }