/* =============================================================
   ft-film.css — Section 01 "The Tax, Itemized" autoplay film
   /fragmentation-tax · August 2026

   From the Claude Design film handoff. Linked after
   fragmentation-tax.css and before v12.css. Scoped to .ftf-sec;
   consumes tokens.css vars only. Film-mode states are gated on
   .ftf-on (added by ft-film.js when motion is allowed) — no JS /
   reduced motion renders the complete static statement (definition
   + 42% stat + bill) with zero movement.

   MERGE NOTES — three changes from the handoff as delivered:
   · The .ftf-sec .ft-eyebrow / .ft-h2 fallbacks are pruned. The page
     already styles both, and the handoff's h2 (600 weight, larger
     clamp) would have made this the only section heading on the page
     heavier than its neighbours — sections 02–05 sit at 500, which is
     also what [data-v12] h2 asks for.
   · The <bud-grid> behind the scene is gone (Rob, 10 Aug) — the
     constellation is already a field of squares and the motif read as
     noise under it. Its .ftf-motif rule went with it. If it ever comes
     back, the host element MUST also carry .motif-stage: <bud-grid>'s
     pixels take both their absolute positioning and their per-pixel
     opacity from `.motif-stage .bud-pix`, and outside that ancestor
     the field renders as full-opacity inline blocks.
   · .ftf-sec zeroes the .ft-sec padding it inherits — the stage brings
     its own — and the stage max-width drops 1200→1160px so section 01
     aligns with every other section's .ft-wrap.
   ============================================================= */

.ftf-sec{ position:relative; padding:0; }
.ftf-stage{ max-width:1160px; margin:0 auto; padding:44px 32px 48px; display:flex; flex-direction:column; }

/* ---------- film area ---------- */
/* Static layout (default): definition + consequence flow full-width under the
   headline, then constellation + statement side by side. */
.ftf-film{ position:relative; flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,480px); gap:20px 48px; align-items:center; padding-top:18px; }
.ftf-rail{ display:contents; }
.ftf-item{ display:none; }
.ftf-item.is-def, .ftf-item.is-src{ display:block; grid-column:1/-1; }
.ftf-viz{ position:relative; min-width:0; }
.ftf-viz svg{ width:100%; height:auto; display:block; }

/* ---------- rail: beat captions + figures ---------- */
.ftf-cap{ font-size:clamp(20px,2.1vw,26px); line-height:1.4; font-weight:500; color:var(--fg2); margin:0; text-wrap:pretty; }
.ftf-cap b{ font-weight:600; color:var(--fg1); }
.ftf-item.is-def .ftf-cap{ font-size:clamp(16px,1.55vw,19px); line-height:1.65; font-weight:400; max-width:52ch; }
.ftf-k{ display:flex; align-items:center; gap:10px; font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--fg3); margin:0 0 16px; }
.ftf-k::before{ content:""; flex:none; width:8px; height:8px; background:var(--bud-red); }
.ftf-fig{ font-size:clamp(42px,4.4vw,60px); font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--bud-red); font-variant-numeric:tabular-nums; margin:0 0 14px; white-space:nowrap; }
.ftf-fig small{ font-size:.42em; font-weight:600; color:var(--fg2); margin-left:5px; letter-spacing:0; }
.ftf-fig.ftf-fig-sm{ font-size:clamp(34px,3.4vw,44px); color:var(--fg1); }
.ftf-why{ font-size:14px; line-height:1.55; color:var(--fg2); margin:0; max-width:38ch; }
.ftf-cite{ color:var(--fg3); font-size:12px; letter-spacing:.04em; }

/* micro-visualizations */
.ftf-steps{ display:flex; gap:6px; margin:0 0 16px; }
.ftf-steps span{ font-size:13px; font-variant-numeric:tabular-nums; color:var(--fg3); border:1px solid var(--border); padding:6px 9px; transition:color .18s var(--ease-out-expo), border-color .18s var(--ease-out-expo), background .18s var(--ease-out-expo); }
.ftf-steps span.on{ color:var(--bud-red); border-color:rgba(240,71,106,.45); background:var(--bud-red-soft); }
.ftf-tok{ display:flex; gap:5px; margin:0 0 16px; }
.ftf-tok i{ width:15px; height:15px; background:var(--bud-electric-2); opacity:.85; transition:background .25s var(--ease-out-expo), opacity .25s var(--ease-out-expo), transform .25s var(--ease-out-expo); }
.ftf-tok i.burn{ background:var(--bud-red); opacity:1; transform:scale(1.12); }
.ftf-mis{ display:flex; align-items:flex-end; gap:16px; margin:0 0 16px; }
.ftf-mis > span{ display:flex; flex-direction:column; gap:8px; }
.ftf-mis em{ font-style:normal; font-size:11px; letter-spacing:.04em; color:var(--fg3); white-space:nowrap; }
.ftf-mis .q{ width:13px; height:13px; background:var(--bud-electric-2); }
.ftf-mis .f{ width:150px; height:88px; border:1px solid rgba(240,71,106,.55); background:var(--bud-red-soft); transform-origin:bottom left; }
.ftf-mis .arr{ font-size:14px; color:var(--fg3); padding-bottom:22px; }

/* ---------- the statement (real content — static resting state) ---------- */
.ftf-stmt-wrap{ position:relative; }
.ftf-stmt{ width:min(620px,100%); background:var(--bg-alt); border:1px solid var(--border-strong); border-top:2px solid var(--bud-red); box-shadow:var(--shadow-4); padding:22px 28px 24px; }
.ftf-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ftf-stmt-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--border-strong); }
.ftf-stmt-head b{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg1); }
.ftf-stmt-head b::before{ content:""; flex:none; width:8px; height:8px; background:var(--bud-red); }
.ftf-stmt-head span{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg3); }
.ftf-stmt dl{ margin:0; }
.ftf-row{ display:grid; grid-template-columns:1fr auto; align-items:baseline; row-gap:0; padding:13px 0 11px; border-bottom:1px dashed var(--border); }
.ftf-row dt{ font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3); }
.ftf-row .ftf-val{ margin:0; font-size:clamp(24px,2.4vw,32px); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.05; color:var(--bud-red); }
.ftf-row .ftf-val small{ font-size:13px; font-weight:600; color:var(--fg2); margin-left:3px; }
.ftf-row .ftf-rwhy{ grid-column:1/-1; margin:0; font-size:12px; line-height:1.5; color:var(--fg3); }
.ftf-stmt-total{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:18px; padding:14px 16px; background:var(--bud-red-soft); border:1px solid rgba(240,71,106,.35); }
.ftf-stmt-total b{ display:inline-flex; align-items:center; gap:10px; font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--fg1); white-space:nowrap; }
.ftf-stmt-total b::before{ content:""; flex:none; width:8px; height:8px; background:var(--bud-red); }
.ftf-stmt-total span{ font-size:10px; letter-spacing:.05em; line-height:1.5; color:var(--fg2); text-align:right; }

/* ---------- replay control (film mode only, shown at rest) ---------- */
.ftf-replay{ display:none; }
.ftf-on .ftf-replay{ display:inline-flex; position:absolute; left:32px; bottom:20px; z-index:4; align-items:center; gap:8px; font-family:inherit; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg2); background:transparent; border:1px solid var(--border-strong); padding:9px 14px; cursor:pointer; transition:background var(--duration-sm) var(--ease-out-expo), color var(--duration-sm) var(--ease-out-expo), border-color var(--duration-sm) var(--ease-out-expo); }
.ftf-on .ftf-replay:hover{ background:var(--accent-muted); color:var(--fg1); }
.ftf-replay[hidden]{ display:none !important; }

/* ---------- film mode (JS + motion allowed): fixed stage, autoplay ---------- */
.ftf-on .ftf-stage{ position:relative; height:clamp(560px,82vh,760px); overflow:hidden; }
.ftf-on .ftf-film{ grid-template-columns:400px minmax(0,1fr); align-items:stretch; }
.ftf-on .ftf-rail{ display:grid; align-content:center; position:relative; z-index:2; grid-column:1; grid-row:1; }
.ftf-on .ftf-item{ display:block; grid-area:1/1; opacity:0; transform:translateY(14px); max-width:380px; align-self:center; }
.ftf-on .ftf-viz{ grid-column:2; grid-row:1; display:flex; align-items:center; }
.ftf-on .ftf-viz svg{ width:100%; height:100%; max-height:100%; }
.ftf-on .ftf-stmt-wrap{ grid-column:2; grid-row:1; z-index:3; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; visibility:hidden; }
.ftf-on .ftf-stmt{ pointer-events:auto; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ftf-stage{ padding:28px 20px 36px; }
  .ftf-film{ grid-template-columns:1fr; gap:20px; }
  .ftf-on .ftf-stage{ height:clamp(560px,88vh,720px); }
  .ftf-on .ftf-film{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) minmax(250px,auto); gap:14px; }
  .ftf-on .ftf-viz{ grid-column:1; grid-row:1; }
  .ftf-on .ftf-viz svg{ max-height:40vh; }
  .ftf-on .ftf-rail{ grid-column:1; grid-row:2; align-content:start; }
  .ftf-on .ftf-item{ align-self:start; }
  .ftf-on .ftf-stmt-wrap{ grid-column:1; grid-row:1/-1; }
  .ftf-on .ftf-replay{ left:20px; bottom:14px; }
  .ftf-fig{ font-size:clamp(36px,10vw,48px); }
  .ftf-mis .f{ width:120px; height:70px; }
  .ftf-stmt{ padding:16px 18px 16px; }
  .ftf-stmt-total{ flex-direction:column; align-items:flex-start; gap:6px; }
  .ftf-stmt-total span{ text-align:left; }
}

/* ---------- reduced motion: full content, zero movement ---------- */
@media (prefers-reduced-motion: reduce){
  .ftf-sec .ftf-stage{ position:static !important; height:auto !important; overflow:visible !important; }
  .ftf-sec .ftf-rail{ display:contents !important; }
  .ftf-sec .ftf-item{ display:none !important; }
  .ftf-sec .ftf-item.is-def, .ftf-sec .ftf-item.is-src{ display:block !important; opacity:1 !important; transform:none !important; grid-column:1/-1 !important; }
  .ftf-sec .ftf-stmt-wrap{ position:static !important; opacity:1 !important; visibility:visible !important; display:block !important; transform:none !important; }
  .ftf-sec .ftf-stmt-head, .ftf-sec .ftf-row, .ftf-sec .ftf-stmt-total{ opacity:1 !important; transform:none !important; }
  .ftf-sec .ftf-viz{ opacity:1 !important; }
  .ftf-sec .ftf-replay{ display:none !important; }
}