/* =========================================================================
   The film on the rebuilt landing page (views/partials/landing-film-v3.php,
   driven by assets/js/film-v3.js). The phone frame, the address bar and the
   results pictures (.rv-*) are landing.css's and landing-v3.css's; this is
   the scenes around them. Everything is sized in cqw (the screen is 100cqw
   wide and 192cqw tall) and placed in % of the screen's height, so the film
   is the same picture on the laptop's phone and the phone's phone.

   What moves is transform and opacity, plus three small things that are
   cheap: the typed search text's clip, the button's shine (a background
   position) and the turning outlines (a rotated square under a ring mask).
   ========================================================================= */

.fm .reel-view { background: var(--surface); }
.fm-scene { position: absolute; inset: 0; opacity: 0; background: var(--surface); }
.fm-scene[data-s="rapor"] { opacity: 1; }
/* While the film is paused (off screen, a hidden tab, reduced motion) its
   CSS-driven turns stop too. */
.fm.is-paused *,
.fm.is-paused *::before,
.fm.is-paused *::after { animation-play-state: paused !important; }

.fm-h {
  position: absolute; left: 8cqw; right: 8cqw; top: 6%;
  margin: 0;
  font-size: 7.6cqw; font-weight: 800; letter-spacing: -.035em; line-height: 1.1;
  color: var(--ink);
}
.fm-sub { position: absolute; left: 8cqw; right: 8cqw; top: 11.2%; margin: 0; font-size: 3.9cqw; font-weight: 600; color: var(--muted); }
.fm-crest { flex: none; width: 9cqw; height: 9cqw; object-fit: contain; }

/* ---- 1 · the rapor ------------------------------------------------------- */
.fm-sheet {
  position: absolute; left: 5cqw; right: 5cqw; top: 19%;
  padding: 4.8cqw 3.6cqw;
  border-radius: 4.5cqw;
  background: var(--surface-2);
  box-shadow: 0 6cqw 12cqw -8cqw rgba(var(--shadow-rgb), .55);
}
.fm-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 10.2cqw); gap: 2.6cqw 1.5cqw; align-items: center; }
.fm-gh { font-size: 3.2cqw; font-weight: 700; color: var(--muted); text-align: center; }
.fm-gh:first-child { text-align: left; }
.fm-gs { min-width: 0; font-size: 3.7cqw; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-gv {
  display: grid; place-items: center;
  height: 8.8cqw;
  border-radius: 2.2cqw;
  background: var(--surface);
}
.fm-gv b { font-size: 4.2cqw; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
/* The viewfinder: four corners in the accent. */
.fm-corner { position: absolute; width: 7cqw; height: 7cqw; border: .8cqw solid var(--primary); }
.fm-corner--tl { left: -2.4cqw; top: -2.4cqw; border-right: 0; border-bottom: 0; border-top-left-radius: 3cqw; }
.fm-corner--tr { right: -2.4cqw; top: -2.4cqw; border-left: 0; border-bottom: 0; border-top-right-radius: 3cqw; }
.fm-corner--bl { left: -2.4cqw; bottom: -2.4cqw; border-right: 0; border-top: 0; border-bottom-left-radius: 3cqw; }
.fm-corner--br { right: -2.4cqw; bottom: -2.4cqw; border-left: 0; border-top: 0; border-bottom-right-radius: 3cqw; }
.fm-beam {
  position: absolute; left: 2cqw; right: 2cqw; top: 0; height: .7cqw;
  border-radius: 1cqw;
  background: linear-gradient(90deg, transparent, var(--primary) 20%, #93c5fd 50%, var(--primary) 80%, transparent);
  box-shadow: 0 0 3cqw .6cqw rgba(59, 130, 246, .45);
}
.fm-flash { position: absolute; inset: 0; border-radius: inherit; background: #fff; }
.fm-read {
  position: absolute; left: 50%; top: 56%;
  display: inline-flex; align-items: center; gap: 1.6cqw;
  margin: 0; padding: 2cqw 4.4cqw;
  border-radius: 99px;
  background: var(--primary-soft); color: var(--accent-ink-2);
  font-size: 4cqw; font-weight: 800; white-space: nowrap;
  translate: -50% 0;
}
.fm-read i { font-size: 5cqw; }
/* The camera's shutter, pressed for the photo. */
.fm-shutter {
  position: absolute; left: 50%; top: 72%;
  width: 17cqw; height: 17cqw; margin-left: -8.5cqw;
  border-radius: 50%;
  border: 1.1cqw solid var(--ink);
  display: grid; place-items: center;
}
.fm-shutter i { width: 12cqw; height: 12cqw; border-radius: 50%; background: var(--ink); }

/* ---- 2 · the picks ---------------------------------------------------------- */
.fm-search {
  position: absolute; left: 6cqw; right: 6cqw; top: 12%;
  display: flex; align-items: center; gap: 2.4cqw;
  height: 11cqw; padding: 0 4cqw;
  border-radius: 99px;
  background: var(--surface-2);
  box-shadow: 0 0 0 .35cqw var(--line-strong) inset;
  font-size: 4.3cqw; font-weight: 600; color: var(--ink);
}
.fm-search > .ph { font-size: 4.8cqw; color: var(--muted); }
.fm-search.is-focus, .fm-focus { box-shadow: 0 0 0 .5cqw var(--primary) inset; }
.fm-type { white-space: nowrap; }
.fm-caret { width: .5cqw; height: 5.4cqw; margin-left: -1.6cqw; border-radius: 1cqw; background: var(--primary); }
.fm-ph { position: absolute; left: 11.6cqw; color: var(--muted); }
.fm-opts {
  position: absolute; left: 6cqw; right: 6cqw; top: 19%;
  padding: 1.4cqw;
  border-radius: 4cqw;
  background: var(--surface);
  box-shadow: 0 0 0 .3cqw var(--line) inset, 0 6cqw 12cqw -7cqw rgba(var(--shadow-rgb), .6);
  transform-origin: 50% 0;
}
.fm-opt { display: flex; align-items: center; gap: 2.8cqw; padding: 2.4cqw 2.6cqw; border-radius: 2.8cqw; }
.fm-opt:not(.is-first) { padding-left: 14.4cqw; }
.fm-opt span, .fm-pick-row span { display: grid; min-width: 0; }
.fm-opt b, .fm-pick-row b { font-size: 4.1cqw; font-weight: 800; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-opt i, .fm-pick-row span i { font-size: 3.1cqw; font-style: normal; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-opt.is-first { background: transparent; }
.fm-pick {
  position: absolute; left: 6cqw; right: 6cqw;
  padding: 3.2cqw 3.6cqw 3.6cqw;
  border-radius: 4.5cqw;
  background: var(--surface-2);
}
.fm-pick--1 { top: 33%; }
.fm-pick--2 { top: 49%; }
.fm-pick-n { display: block; margin-bottom: 1.8cqw; font-size: 3.2cqw; font-weight: 800; color: var(--accent-ink); }
.fm-pick-row { display: flex; align-items: center; gap: 3cqw; }
.fm-pick-row span { flex: 1 1 auto; }
.fm-ok { flex: none; font-size: 6.4cqw; color: var(--primary); }

/* The button: a pill in the accent, with a light that crosses it and an
   outline that runs round it (the subscribe button's), and a press. */
.fm-go {
  position: absolute; left: 50%; top: 71%;
  display: inline-flex; align-items: center; justify-content: center;
  height: 13cqw; padding: 0 6.4cqw;
  border-radius: 99px;
  background: var(--primary); color: #fff;
  font-size: 4.6cqw; font-weight: 800; white-space: nowrap;
  translate: -50% 0;
  box-shadow: 0 4cqw 8cqw -4cqw rgba(37, 99, 235, .6);
}
.fm-go-t { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 1.8cqw; }
.fm-cost { display: inline-flex; align-items: center; gap: .6cqw; padding: .6cqw 1.8cqw; border-radius: 99px; background: rgba(255, 255, 255, .2); font-size: 3.2cqw; }
.fm-go-shine {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0 40%, rgba(255, 255, 255, .45) 50%, transparent 60% 100%) no-repeat;
  background-size: 260% 100%;
  background-position: 100% 0;
}
.fm-go-ring {
  position: absolute; inset: -1.5cqw; z-index: 0;
  border-radius: 99px;
  padding: .8cqw;
  overflow: hidden; overflow: clip;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
}
.fm-go-ring::before,
.fm-card-ring::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 130cqw; height: 130cqw; margin: -65cqw 0 0 -65cqw;
  background: conic-gradient(transparent 0deg 210deg, rgba(147, 197, 253, .7) 280deg, var(--primary) 330deg, #bfdbfe 350deg, transparent 360deg);
  animation: fmTurn 1.1s linear infinite;
}
@keyframes fmTurn { to { transform: rotate(360deg); } }

/* A finger: the grey dot a screen recording draws where it is touched. */
.fm-tap {
  position: absolute; left: 0; top: 0; z-index: 9;
  width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  border: .5cqw solid color-mix(in srgb, var(--ink) 30%, transparent);
  opacity: 0;
}

/* ---- 4 · the wait: the real card (apply.css .an-*), a phone's size -------- */
.fm-card {
  position: absolute; left: 6cqw; right: 6cqw; top: 13%;
  padding: 6cqw 5cqw 5.4cqw;
  border-radius: 5cqw;
  background: var(--surface);
  box-shadow: 0 0 0 .3cqw var(--line) inset;
  font-size: 3.7cqw;
  text-align: center;
}
.fm-card-ring {
  position: absolute; inset: -.6cqw;
  border-radius: 5.4cqw;
  padding: .7cqw;
  overflow: hidden; overflow: clip;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
}
.fm-card-ring::before { animation-duration: 2.2s; }
.fm-stage { position: relative; height: 9em; margin: 0 auto 1.4em; }
.fm-layer { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.fm-card .an-chips i,
.fm-card .an-crowd i { opacity: 0; }
.fm-card .an-steps li { opacity: .55; }
.fm-card .an-bar { margin-top: 1.1em; }
.fm-card .an-bar i { transition: none; }
.fm-card .an-check path { stroke-dashoffset: 40; }

/* ---- 5-7 · the answers (.rv-* from landing.css and landing-v3.css) -------- */
.fm-crowd, .fm-gauge, .fm .rv-pair { position: absolute; inset: 0; }
.fm .rv-pick { opacity: 1; }
.fm .rv-prow-new { opacity: 0; }

/* ---- 8 · the end card ------------------------------------------------------- */
.fm-end { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.fm-end-mark { width: 21cqw; height: 21cqw; }
.fm-end-word { margin: 4cqw 0 0; font-size: 8cqw; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.fm-end-word b { font-weight: 800; color: var(--primary); }
.fm-end-say { margin: 1.6cqw 0 0; font-size: 4.6cqw; font-weight: 700; color: var(--muted); }
.fm-go--end { position: relative; left: auto; top: auto; translate: none; margin-top: 7cqw; }

/* A slow phone: the outlines stand still. */
.pk-lite .fm-go-ring::before,
.pk-lite .fm-card-ring::before { animation: none; }