/* 04 – the long edit, the page's signature. A laptop: words on the left (headline, the request, the whole talk's numbers
   and the explainer link), the clip on the right with one time bar under it and Before / After under that. A phone: the
   same top to bottom, the request right above the clip so both share the screen.
   The bar has two rows. Row 1: the 29 raw seconds as segments with real gaps; the red ones are what was cut. Row 2:
   outlined chips that say what each red piece is. When the edit plays, the red pieces fall into their chips and fill
   them, and row 1 closes up to 14 s; the logo's yellow stick marks the joint. Every box is placed by
   js/04-longedit.js (--x / --y / --w / --rot per piece), which also plays every move frame by frame so that no two
   pieces ever touch on the way. The fallen pieces lie level, exactly in their chips (art director, v12). */
.lx-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.lx-top h2 { max-width: 14ch; }
.lx-top .lead { max-width: 26em; }
.lx-ask { margin-top: var(--s4); }
.lx-demo { margin-top: var(--s4); min-width: 0; }
.lx-bot { margin-top: var(--s4); }
@media (min-width: 980px) {
  .lx-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; grid-template-areas: "top demo" "ask demo" "bot demo"; column-gap: var(--s7); }
  .lx-top { grid-area: top; }
  .lx-ask { grid-area: ask; justify-self: end; }
  .lx-bot { grid-area: bot; align-self: start; }
  .lx-demo { grid-area: demo; align-self: center; margin-top: 0; }
}

/* The clip */
.lx-v { aspect-ratio: 16 / 9; border-radius: var(--r-media); box-shadow: var(--sh-3); }
.lx-v .tag span { display: inline-block; transition: opacity .2s ease; }
.lx-v .tag.is-swap span { opacity: 0; transition: none; }
.lx-v .tag { transition: background-color .2s ease, color .2s ease; }
.lx-v .tag.is-cutpart { background: var(--red); color: #fff; }
/* The cut: the logo's yellow slash (19°, solid) sweeps across the frame at every switch between raw and edit */
.lx-cut { position: absolute; top: -12%; bottom: -12%; left: 0; width: 9%; z-index: 4; pointer-events: none; background: var(--yellow); transform: translateX(-260%) skewX(-19deg); }
.lx-v.is-cutting .lx-cut { animation: lx-sweep .7s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes lx-sweep { from { transform: translateX(-260%) skewX(-19deg); } to { transform: translateX(1400%) skewX(-19deg); } }
.lx-sound { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 16px/1 var(--font); color: #fff; background: rgba(17, 18, 16, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 0; border-radius: var(--r-pill); padding: 0 16px 0 13px; cursor: pointer; transition: background-color .2s; }
.lx-sound:hover { background: rgba(17, 18, 16, .82); }
.lx-sound .ico { width: 18px; height: 18px; }

/* The bar: row 1 the time line, row 2 the chips. --bh a row's height, --rg the gap between the rows. */
.lx-tl { --bh: 52px; --rg: 14px; position: relative; height: calc(var(--bh) * 2 + var(--rg)); margin-top: 26px; }
.lx-pc, .lx-chip, .lx-ghost { position: absolute; left: 0; top: 0; height: var(--bh); box-sizing: border-box; }
.lx-pc { width: var(--w, 0px); border-radius: 6px; display: grid; place-items: center;
  transform: translate(var(--x, 0px), calc(var(--y, 0px) + var(--lift, 0px))) rotate(var(--rot, 0deg)); transition: background-color .25s ease; will-change: transform, width; }
.lx-pc.k { background: var(--green-3); z-index: 1; }
.lx-pc.k1 { border-radius: 12px 6px 6px 12px; }
.lx-pc.k2 { border-radius: 6px 12px 12px 6px; }
.lx-tl.is-cut .lx-pc.k1 { border-radius: 12px 0 0 12px; }
.lx-tl.is-cut .lx-pc.k2 { border-radius: 0 12px 12px 0; }
.lx-pc.x { background: var(--red); color: #fff; z-index: 2; cursor: pointer; }
/* A red piece (or its chip) plays that stumble in the raw take; the hit area is at least 44 × 44 px however short the
   bar or narrow the piece (the false start is 35–38 px wide in the open bar on a phone), centred on what you see.
   The narrow false start widens only to its left, over the kept green piece (nothing to press there), so Dead air
   beside it keeps a whole 44 px too (centred, the false start took 2 px of it: 42 px at 375, QA r3). */
.lx-pc.x.lx-narrow { z-index: 3; }
.lx-pc.x::after, .lx-chip::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.lx-pc.x.lx-narrow::after { left: auto; right: 0; transform: translateY(-50%); }
.lx-pc.x:hover { background: #a9311f; }
.lx-pc.x:focus-visible, .lx-chip:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lx-pc.x.is-down { border-radius: var(--r-thumb); box-shadow: var(--sh-2); }
/* A piece's words show only once it lies in its chip (wide enough for them); in the bar the chip below says it */
.lx-lb { display: block; padding: 0 12px; font: 600 16px/1 var(--font); white-space: nowrap; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.lx-pc.is-label .lx-lb { opacity: 1; }
.lx-tl .ls { display: none; }
/* While the raw take plays, the piece under the playhead lifts and its chip lights up */
.lx-pc.x.is-now { --lift: -5px; background: #a9311f; }
/* The chips: where each red piece will lie, outlined, with its name */
.lx-chip { display: grid; place-items: center; width: var(--w, 0px); border: 2px dashed rgba(194, 61, 42, .5); border-radius: var(--r-thumb); color: var(--red);
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rot, 0deg)); transition: opacity .2s ease, background-color .25s ease, border-color .25s ease; }
.lx-chip b { display: block; padding: 0 12px; font: 600 16px/1 var(--font); white-space: nowrap; }
.lx-chip { cursor: pointer; }
.lx-chip:hover { border-color: var(--red); }
.lx-chip.is-now { background: var(--red-soft); border-color: var(--red); }
.lx-tl.is-down .lx-chip { opacity: 0; }
/* Closed: a dashed ghost keeps the old length, and the logo's yellow stick marks the joint where the cut was. The
   ghost's opacity follows the green end as it closes up (set frame by frame in js/04-longedit.js). */
.lx-ghost { width: var(--gw, 0px); border: 2px dashed var(--line-2); border-radius: 12px; opacity: 0; }
.lx-join { position: absolute; left: -3px; top: -7px; width: 6px; height: calc(var(--bh) + 14px); background: var(--yellow); z-index: 3; transform: translateX(var(--jx, 0px)) rotate(19deg) scaleY(0); transition: transform .3s var(--ease); pointer-events: none; }
.lx-tl.is-closed .lx-join { transform: translateX(var(--jx, 0px)) rotate(19deg); }
/* The bar's length, at its right end: 29 s, then 14 s. They hand over while the bar closes up (opacity set frame by
   frame with the width in js/04-longedit.js), so the bar never reads 29 s at 14 s long. */
.lx-end { position: absolute; left: 0; top: 0; height: var(--bh); display: grid; align-items: center; padding-left: 14px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; transform: translateX(var(--ex, 0px)); }
.lx-end span { grid-area: 1 / 1; }
.lx-end .e-cut { opacity: 0; color: var(--green-3); }
/* Playhead: driven by the video's clock. It stands 8 px above the bar (its knob on top) and only 3 px below it, so it
   never reaches the chips or the fallen pieces in row 2 (--rg is 12–14 px). */
.lx-head { position: absolute; left: -1.5px; top: -8px; width: 3px; height: calc(var(--bh) + 11px); border-radius: 2px; background: var(--ink); z-index: 4; pointer-events: none; opacity: 0; transform: translateX(var(--hx, 0px)); transition: opacity .3s ease; }
.lx-head::before { content: ""; position: absolute; left: -4.5px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.lx-tl.is-live .lx-head { opacity: 1; }
.lx-tl.is-moving .lx-head { opacity: 0; transition-duration: .1s; }

/* Before / After, with the logo's yellow stick between them instead of an arrow */
.lx-ba { display: flex; align-items: center; gap: 16px; margin-top: var(--s4); }
.lx-ba button { display: flex; align-items: center; gap: 10px; min-height: 56px; min-width: 150px; padding: 0 20px; border-radius: var(--r-ctl); border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.lx-ba button:hover { border-color: var(--ink-2); }
.lx-ba .k { font-size: 17px; font-weight: 600; color: var(--muted); transition: color .2s; }
.lx-ba b { font-size: 28px; line-height: 1; letter-spacing: -0.03em; font-weight: 700; white-space: nowrap; }
.lx-ba button.is-on { border-color: var(--green); background: var(--green); color: var(--green-ink); }
.lx-ba button.is-on .k { color: rgba(246, 244, 238, .78); }
.lx-slash { width: 6px; height: 44px; background: var(--yellow); transform: rotate(19deg); flex: none; }

/* The whole video, one line: the proof that it isn't a trick of 29 seconds */
.lx-run { display: grid; gap: 6px; margin: 0; max-width: 24em; }
.lx-run b { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 750; color: var(--ink); white-space: nowrap; }
.lx-run > span { font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }   /* > : text-wrap would undo .nw inside */
.lx-bot .link { margin-top: var(--s1); }

/* For the curious: the 29 seconds as a script, and the same 29 seconds as a small bar under it. Opened, the cuts are
   struck through one by one and each lights its red piece of the bar; the retake is kept; then the red pieces close
   up and the bar goes from 29 s to 14 s, the logo's yellow stick at the joint (NC.explain in js/04-longedit.js).
   Without the animation (no JS, reduced motion) it shows the struck script and the open bar at once. */
.lx-x { display: grid; gap: 10px; }
.lx-lines > * { text-wrap: pretty; }
.lx-xl { margin: 0; font-size: 17px; line-height: 1.42; color: var(--ink); }
.lx-xl .q { background-image: linear-gradient(var(--red), var(--red)); background-repeat: no-repeat; background-size: 0 2px; background-position: 0 58%; transition: background-size .55s var(--ease), color .3s ease; }
.lx-xl.x .q { background-size: 100% 2px; color: var(--muted); }
.lx-xl .why { display: inline-block; margin-left: 0; padding: 2px 10px; border-radius: var(--r-pill); background: var(--red-soft); color: var(--red); font-size: 16px; font-weight: 600; white-space: nowrap; transition: opacity .3s ease, transform .3s var(--ease); }
.lx-xl .why.keep { background: var(--green-soft); color: var(--green); }
.lx-x.is-anim .lx-xl.x:not(.is-struck) .q { background-size: 0 2px; color: var(--ink); }
.lx-x.is-anim .lx-xl:not(.is-struck):not(.is-kept) .why { opacity: 0; transform: translateY(4px); }
/* The bar: each piece as long as its seconds (--g), 3 px of card between pieces; the label follows its end */
.lx-xb { --u: calc((100cqw - 72px) / 29.443); container-type: inline-size; display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.lx-xbar { display: flex; flex: none; height: 30px; }
.lx-xbar i { flex: none; height: 100%; width: calc(var(--g) * var(--u)); margin-left: 3px; border-radius: 5px; transition: width .6s var(--ease), margin .6s var(--ease), opacity .4s ease, background-color .25s ease; }
.lx-xbar i:first-child { margin-left: 0; border-radius: 9px 5px 5px 9px; }
.lx-xbar i:last-child { position: relative; border-radius: 5px 9px 9px 5px; }
.lx-xbar i.k { background: var(--green-3); }
.lx-xbar i.x { background: var(--red); }
.lx-x.is-anim .lx-xbar i.x:not(.is-on) { background: rgba(194, 61, 42, .22); }
.lx-x.is-closed .lx-xbar i.x { width: 0; margin-left: 0; opacity: 0; }
.lx-xbar i:last-child::before { content: ""; position: absolute; left: -4px; top: -5px; width: 5px; height: calc(100% + 10px); background: var(--yellow); transform: rotate(19deg) scaleY(0); transition: transform .3s var(--ease) .55s; }
.lx-x.is-closed .lx-xbar i:last-child::before { transform: rotate(19deg); }
.lx-xb b { display: grid; font-size: 20px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
/* 29 s leaves as the bar starts to close and 14 s comes in while it is still closing: never both at once */
.lx-xb b span { grid-area: 1 / 1; transition: opacity .2s ease; }
.lx-xb .e-cut { opacity: 0; color: var(--green-3); }
.lx-x.is-closed .lx-xb .e-raw { opacity: 0; }
.lx-x.is-closed .lx-xb .e-cut { opacity: 1; transition: opacity .25s ease .22s; }

@media (max-width: 979px) {
  .lx-top h2 { max-width: 18ch; }
  .lx-br { display: none; }
}
@media (max-width: 719px) {
  /* "It cuts the long video" is 334 px at 36px: a 375 phone has 335. WebKit sets it a pixel or two wider and wrapped
     the headline to three lines; let it reach 6 px into the gutter instead (nothing is drawn there). */
  .lx-top h2 { margin-right: -6px; }
  .lx-demo { margin-top: var(--s3); }
  .lx-tl { --bh: 44px; --rg: 12px; margin-top: 22px; }
  .lx-end { font-size: 20px; padding-left: 10px; }
  .lx-tl .lf { display: none; } .lx-tl .ls { display: inline; }
  .lx-chip b, .lx-lb { padding: 0 10px; }
  .lx-ba { gap: 12px; margin-top: var(--s3); }
  .lx-ba button { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; justify-content: center; }
  .lx-ba .k { font-size: 16px; }
  .lx-ba b { font-size: 24px; }
  .lx-slash { height: 40px; }
  .lx-bot { margin-top: var(--s4); }
  .lx-xl { font-size: 16px; line-height: 1.38; }
  .lx-xbar { height: 26px; }
}
@media (max-width: 719px) and (max-height: 760px) {
  /* A short phone (375×667, or a 390 phone under Safari's bars): at the natural stop the headline, the request, its
     reply and the whole demo – clip, bar, chips and Before / After – share the screen. The lead goes (the chips and
     the reply say the same), the headline steps down to 32 px; the bar keeps its 44 px rows, so every red piece and
     chip stays a full tap target. */
  .lx-top h2 { font-size: 32px; }
  .lx-top .lead { display: none; }
  .lx-ask { margin-top: var(--s3); }
  .lx-demo { margin-top: var(--s2); }
  .lx-tl { margin-top: 14px; }
  .lx-ba { margin-top: var(--s2); }
}
@media (max-width: 719px) and (max-height: 700px) {
  /* the explainer sheet on a short phone: the script and its bar on one sheet */
  .lx-x { gap: 4px; }
  .lx-xl .why { padding: 1px 8px; }
  .lx-xb { margin-top: 2px; }
  .lx-xbar { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-pc, .lx-chip, .lx-head, .lx-join, .lx-ghost, .lx-lb, .lx-xl .q, .lx-xl .why, .lx-xbar i, .lx-xbar i::before, .lx-xb b span { transition: none !important; }
  .lx-cut { display: none; }
}