/* The weekly price-guide film.
 *
 * Same contract as bag-film and faq-film: every size is a custom property set
 * inline by price-film.js from the frame dimensions, so one layout serves 16:9,
 * 4:5 and 9:16, and every position is a function of t so the capture harness can
 * ask for frame 214 directly.
 *
 * Namespaced p-* / pf-*. Checked against styles.css, because the FAQ film shipped
 * a collision that the video harness could not possibly show - it loads no site
 * CSS, so the contact sheets looked perfect while the page was broken.
 */

.pfilm {
  position: relative; overflow: hidden; box-sizing: border-box;
  background:
    radial-gradient(120% 80% at 82% 6%, rgba(126, 143, 255, .20), transparent 60%),
    radial-gradient(90% 70% at 6% 98%, rgba(232, 121, 249, .13), transparent 62%),
    #080c13;
  font-family: 'Inter var', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #eef2fb;
  --film-2: #aab6cf;
  --film-3: #6f7c94;
  --sky-400: #60a5fa;
  --sky-300: #93c5fd;
  --lilac-400: #a78bfa;
  --pink-400: #f472b6;
  --hair: rgba(158, 178, 214, .22);
  --glass: rgba(146, 170, 214, .07);
}

.p-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  box-sizing: border-box;
}
.p-scene.mid { align-items: center; text-align: center; }

.p-kick {
  font-size: var(--kick); font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sky-300); margin-bottom: calc(var(--gap) * .8);
}
.p-h1 { font-size: var(--h1); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; margin: 0; max-width: var(--measure); }
.p-sub { font-size: var(--sub); line-height: 1.45; color: var(--film-2); max-width: var(--measure); margin: var(--gap) 0 0; }
.p-grad {
  background: linear-gradient(96deg, var(--sky-300), var(--lilac-400) 58%, var(--pink-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- the number reel */

/* Digits on a strip that slides, rather than a number that is rewritten. A counter
   that simply changes value reads as a text update; a reel reads as a machine
   arriving at an answer, and it costs one transform per digit. */
.p-reel { display: inline-flex; gap: var(--reelGap); vertical-align: baseline; }
.p-reel-col {
  position: relative; overflow: hidden; width: var(--reelW); height: var(--reelH);
}
.p-reel-strip { position: absolute; left: 0; top: 0; width: 100%; }
.p-reel-strip span {
  display: block; height: var(--reelH); line-height: var(--reelH);
  font-size: var(--reelF); font-weight: 700; letter-spacing: -.04em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.p-reel-sep { font-size: var(--reelF); font-weight: 700; letter-spacing: -.04em; opacity: .5; }

/* ---- the shop dots */

.p-shops { display: flex; flex-wrap: wrap; gap: var(--dotGap); max-width: var(--measure); margin-top: var(--gap); }
.p-dot {
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--glass); border: 1px solid var(--hair);
}
.p-dot.on {
  background: linear-gradient(120deg, var(--sky-400), var(--lilac-400));
  border-color: transparent;
}

/* ---- the bar race */

.p-bars { display: flex; flex-direction: column; gap: var(--barGap); width: 100%; max-width: var(--measure); }
.p-bar { display: grid; grid-template-columns: var(--barLab) 1fr auto; align-items: center; gap: var(--barPad); }
.p-bar-name { font-size: var(--barName); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.p-bar-track { position: relative; height: var(--barH); border-radius: 999px; background: var(--glass); overflow: hidden; }
.p-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--sky-400), var(--lilac-400));
}
/* The interquartile range drawn inside the bar - the median is a point, and the
   half of the market either side of it is the more useful fact. */
.p-bar-iqr { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.14); }
.p-bar-val { font-size: var(--barVal); font-weight: 700; font-variant-numeric: tabular-nums; min-width: var(--barValW); text-align: right; }
.p-bar-n { display: block; font-size: var(--barN); font-weight: 400; color: var(--film-3); }

/* ---- confetti */

/* Deterministic: every particle's position comes from its index and t, never from
   Math.random(), because frame 214 has to look the same on every render or the
   video flickers. */
.p-conf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.p-conf i { position: absolute; display: block; border-radius: 1px; }

/* ---- the ball */

.p-ball { position: absolute; }

/* ---- furniture */

.p-ramp {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--ramp);
  background: linear-gradient(90deg, var(--sky-400), var(--lilac-400) 55%, var(--pink-400));
  opacity: .9;
}
.p-mark { position: absolute; left: var(--pad); bottom: var(--wmBot); display: flex; align-items: center; gap: calc(var(--gap) * .45); }
.p-mark .w { font-size: var(--wm); font-weight: 700; letter-spacing: -.02em; }
.p-mark .s { font-size: var(--wmSub); letter-spacing: .18em; text-transform: uppercase; color: var(--film-3); }
.p-stamp {
  position: absolute; right: var(--pad); bottom: var(--wmBot);
  font-size: var(--wmSub); letter-spacing: .14em; text-transform: uppercase; color: var(--film-3);
}
.p-url { font-size: var(--url); font-weight: 700; letter-spacing: -.03em; }

/* ---------------------------------------------------------------- light theme
   See faq-film.css for why html[...] and not :where(). */
html[data-theme="light"] .pfilm {
  background:
    radial-gradient(120% 80% at 82% 6%, rgba(63, 121, 180, .14), transparent 60%),
    radial-gradient(90% 70% at 6% 98%, rgba(157, 61, 116, .10), transparent 62%),
    #f7f9fc;
  box-shadow: inset 0 0 0 1px rgba(16, 40, 66, .10);
  color: #101a25;
  --film-2:#4b5c6d; --film-3:#6b7482;
  --sky-400:#2f6db3; --sky-300:#3f79b4; --sky-200:#305c8a;
  --lilac-400:#785da6; --pink-400:#9d3d74;
  --hair: rgba(16, 40, 66, .16); --glass: rgba(16, 40, 66, .05);
}
html[data-theme="light"] .pfilm .p-bar-iqr { background: rgba(16, 40, 66, .14); }
/* The ball and its trail are drawn near-white for the dark frame; an edge keeps
   the ball a ball on a pale one. */
html[data-theme="light"] .pfilm .p-ball { filter: drop-shadow(0 0 1px rgba(16, 40, 66, .7)); }