/* The bag-builder film.
 *
 * Shared by the /faq hero, the /bag pages and video/bag.html, which renders it to
 * MP4 - so it has to look right at 16:9, 4:5 and 9:16 off one layout. Every size
 * is a custom property set inline by bag-film.js from the frame dimensions; there
 * are no fixed pixel sizes in here for anything that has to scale.
 *
 * Namespaced b-* throughout. The faq film learned this the hard way: it used
 * names like .rung and .scene, the site had 38 rules of its own on those, and the
 * film rendered correctly in the video harness (which loads no site CSS) while
 * breaking on the page. Nothing here may collide with styles.css.
 */

.bfilm {
  position: relative; overflow: hidden; box-sizing: border-box;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(126, 143, 255, .18), transparent 60%),
    radial-gradient(90% 70% at 10% 96%, rgba(232, 121, 249, .12), 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);
  --glass-2: rgba(146, 170, 214, .12);
}

/* Scene shell. Every scene is absolutely positioned and cross-faded by opacity,
   so there is never a reflow between frames - a reflow at frame N would make
   frame N+1 land somewhere slightly different and the video would judder. */
.b-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  box-sizing: border-box;
}
.b-scene.mid { align-items: center; text-align: center; }
/* The three tool scenes centre their block. Left-aligned, the bag sat against the
   padding with a third of the frame empty to its right. */
.b-scene.tool { align-items: center; }

.b-kick {
  font-size: var(--kick); font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sky-300); margin-bottom: calc(var(--gap) * .9);
}
.b-h1 {
  font-size: var(--h1); font-weight: 700; letter-spacing: -.035em; line-height: 1.03;
  max-width: var(--measure); margin: 0;
}
.b-sub {
  font-size: var(--sub); line-height: 1.45; color: var(--film-2);
  max-width: var(--measure); margin: var(--gap) 0 0;
}
.b-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 two-number comparison in scene 2. The point of the whole film is that these
   are different numbers, so they are set side by side and the second is the one
   that lights up. */
.b-vs { display: flex; gap: var(--vsGap); align-items: stretch; margin-top: calc(var(--gap) * 1.4); }
.b-vs-col {
  flex: 1; padding: var(--vsPad); border-radius: var(--r); box-sizing: border-box;
  background: var(--glass); border: 1px solid var(--hair);
}
.b-vs-col.lit {
  background: linear-gradient(150deg, rgba(96, 165, 250, .16), rgba(167, 139, 250, .12));
  border-color: rgba(147, 197, 253, .45);
}
.b-vs-lab {
  font-size: var(--vsLab); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--film-3);
}
.b-vs-col.lit .b-vs-lab { color: var(--sky-300); }
.b-vs-num {
  display: block; margin-top: calc(var(--gap) * .5);
  font-size: var(--vsNum); font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.b-vs-note { display: block; margin-top: calc(var(--gap) * .35); font-size: var(--vsNote); color: var(--film-3); }

/* ------------------------------------------------------- the mock tool */

/* Not a screen recording. The film has to be renderable at any t - the capture
   harness asks for frame 214 directly - and a recording cannot be seeked that way,
   let alone re-laid-out for three aspect ratios. So the tool is rebuilt here from
   the site's own CSS values and driven by the clock. */
.b-ui {
  display: flex; flex-direction: var(--uiDir); gap: var(--uiGap);
  align-items: var(--uiAlign); box-sizing: border-box;
  width: 100%; max-width: var(--uiMax);
}
.b-bagwrap {
  flex: none; width: var(--bagW);
  padding: calc(var(--gap) * .55); box-sizing: border-box;
  border-radius: var(--r); background: var(--glass); border: 1px solid var(--hair);
}
.b-bagsvg { display: block; width: 100%; height: auto; }
.b-side {
  flex: 1; min-width: 0; width: 100%;
  display: flex; flex-direction: column; gap: calc(var(--gap) * .55);
}

.b-search {
  position: relative; display: flex; align-items: center; box-sizing: border-box;
  height: var(--inputH); padding: 0 calc(var(--gap) * .7);
  border-radius: var(--rSm); background: var(--glass-2);
  border: 1px solid var(--hair); font-size: var(--rowName);
}
.b-search.on { border-color: rgba(147, 197, 253, .6); }
.b-caret {
  display: inline-block; width: 2px; height: calc(var(--rowName) * 1.15);
  margin-left: 2px; background: var(--sky-300); vertical-align: middle;
}
.b-ph { color: var(--film-3); }

.b-drop {
  display: flex; align-items: center; gap: calc(var(--gap) * .5);
  padding: calc(var(--gap) * .45) calc(var(--gap) * .6); box-sizing: border-box;
  border-radius: var(--rSm); background: rgba(13, 18, 28, .96);
  border: 1px solid rgba(147, 197, 253, .4);
}
.b-drop.hot { background: rgba(96, 165, 250, .16); }

.b-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--gap) * .3); }
.b-row {
  display: flex; align-items: center; gap: calc(var(--gap) * .5);
  padding: calc(var(--gap) * .4) calc(var(--gap) * .55); box-sizing: border-box;
  border-radius: var(--rSm);
  background: rgba(96, 165, 250, .09);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .26);
}
.b-pip {
  flex: none; display: grid; place-items: center;
  width: var(--pip); height: var(--pip); border-radius: 50%;
  background: linear-gradient(120deg, var(--sky-400), var(--lilac-400));
  color: #0b0f16; font-size: var(--pipTxt); font-weight: 700;
}
.b-nm { flex: 1; min-width: 0; font-size: var(--rowName); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-sub2 { display: block; font-size: var(--rowMeta); font-weight: 400; color: var(--film-3); margin-top: 2px; }
.b-pr { flex: none; font-size: var(--rowPrice); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sky-200, #bfdbfe); }

/* The toggle, and the total under it. In the film the toggle is what carries
   scene 5: the same bag, re-priced, without anything else on screen moving. */
.b-toggle {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  white-space: nowrap;
  gap: 0; padding: calc(var(--gap) * .18); box-sizing: border-box;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--hair);
  width: var(--togW); font-size: var(--togTxt); font-weight: 600;
}
.b-toggle-ind {
  position: absolute; top: calc(var(--gap) * .18); bottom: calc(var(--gap) * .18);
  left: calc(var(--gap) * .18); width: calc(50% - var(--gap) * .18);
  border-radius: 999px; background: linear-gradient(100deg, var(--sky-400), var(--lilac-400));
}
/* :not() matters here. The indicator is a span inside .b-toggle, so a bare
   `.b-toggle span` rule overrode its position:absolute, turned it into a third grid
   item and pushed one of the two labels out of the pill entirely. */
.b-toggle > span:not(.b-toggle-ind) {
  position: relative; z-index: 1; text-align: center; padding: calc(var(--gap) * .3) 0;
}
.b-toggle .dim { color: var(--film-2); }
.b-toggle .lit { color: #0b0f16; }

.b-total { display: flex; align-items: baseline; gap: calc(var(--gap) * .6); }
.b-total b {
  font-size: var(--totalNum); font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.b-total i { font-style: normal; font-size: var(--rowMeta); color: var(--film-3); }
.b-tlab {
  font-size: var(--vsLab); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--film-3);
}

/* -------------------------------------------------------------- furniture */

/* The ramp and the mark sit OUTSIDE .b-scene and never fade, so the loop point is
   never a fully black frame. */
.b-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;
}
.b-mark {
  position: absolute; left: var(--pad); bottom: var(--wmBot);
  display: flex; align-items: center; gap: calc(var(--gap) * .45);
}
.b-mark .w {
  font-size: var(--wm); font-weight: 700; letter-spacing: -.02em;
}
.b-mark .s { font-size: var(--wmSub); letter-spacing: .18em; text-transform: uppercase; color: var(--film-3); }
.b-url { font-size: var(--url); font-weight: 700; letter-spacing: -.03em; }

/* Bag tubes, matching the site so the film and the tool are recognisably the same
   thing. Geometry is mirrored from src/bag.js - see the note there. */
.bt-body { fill: rgba(146, 170, 214, .09); stroke: var(--hair); stroke-width: 1.5; }
.bt-cuff, .bt-seam, .bt-pocket { fill: none; stroke: var(--hair); stroke-width: 1.2; }
.bt-strap { fill: none; stroke: var(--film-3); stroke-width: 8; stroke-linecap: round; opacity: .4; }
.bt-legs { fill: none; stroke: var(--film-3); stroke-width: 3.5; stroke-linecap: round; opacity: .32; }
.bt-well { fill: rgba(8, 12, 19, .55); stroke: var(--hair); stroke-width: 1.2; stroke-dasharray: 3 3; }
.bt-lab {
  font-size: 8px; letter-spacing: .16em; text-transform: uppercase;
  fill: var(--film-3); font-family: ui-monospace, SFMono-Regular, monospace;
}
.bt-txt { font-size: 11px; font-weight: 700; fill: #0b0f16; }
.bt-txt.set { fill: #dce4f5; }

/* ---------------------------------------------------------------- light theme
   See faq-film.css for why html[...] and not :where(). */
html[data-theme="light"] .bfilm {
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(63, 121, 180, .14), transparent 60%),
    radial-gradient(90% 70% at 10% 96%, 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); --glass-2: rgba(16, 40, 66, .09);
}
html[data-theme="light"] .b-vs-col.hot { background: linear-gradient(150deg, rgba(47,109,179,.10), rgba(120,93,166,.08)); border-color: rgba(47,109,179,.45); }
html[data-theme="light"] .b-drop { background: rgba(255,255,255,.97); border-color: rgba(47,109,179,.4); box-shadow: 0 10px 30px rgba(16,40,66,.14); }
html[data-theme="light"] .b-drop.hot { background: rgba(47,109,179,.10); }
html[data-theme="light"] .b-row.on { background: rgba(47,109,179,.08); box-shadow: inset 0 0 0 1px rgba(47,109,179,.3); }
html[data-theme="light"] .b-pip, html[data-theme="light"] .b-toggle .lit { color: #fff; }