/* Upgrade 20/10 · tempo. One press = one scene: a scene change takes ≤ 600 ms and every scene is complete within 1.2 s
   (app.js buildIn staggers the parts). Loaded last; overrides only timing, never layout. */
.scene{transition:opacity .35s var(--io),transform .45s var(--out),visibility 0s .45s}
.scene.active{transition:opacity .35s var(--io),transform .45s var(--out),visibility 0s}   /* LỆNH 14 §1: a 350 ms cross, both scenes ready */
:is(#s-problem,#s-evidence,#s-cause,#s-flow){transition:opacity .35s var(--io),transform .5s var(--out),filter .4s var(--io),visibility 0s .5s}
:is(#s-problem,#s-evidence,#s-cause,#s-flow).active{transition:opacity .35s var(--io),transform .55s cubic-bezier(.16,1,.3,1) .02s,filter .45s cubic-bezier(.35,0,.15,1) .02s,visibility 0s}
:is(#s-problem,#s-evidence,#s-cause,#s-flow).cn-out{transition:opacity .38s var(--io),transform .5s cubic-bezier(.5,0,.2,1),visibility 0s .5s}
.mk>span{transition:transform .55s var(--out),opacity .25s}
[data-b]{transition:opacity .45s var(--out),transform .55s var(--out)}
.pf2[data-b] img{transition-duration:.6s!important}
/* calm: was @media (prefers-reduced-motion:reduce); body.calm is set by app.js and can be turned off */
body.calm .scene,body.calm .scene.active,body.calm .scene.leaving,body.calm :is(#s-problem,#s-evidence,#s-cause,#s-flow),body.calm :is(#s-problem,#s-evidence,#s-cause,#s-flow).active,body.calm :is(#s-problem,#s-evidence,#s-cause,#s-flow).cn-out{transform:none!important;filter:none!important}
body.calm .scene{transition:opacity .3s linear,visibility 0s .3s!important}
body.calm .scene.active{transition:opacity .3s linear,visibility 0s!important}
body.calm .scene *{transition:none!important}
/* evidence viewer: a PL chip opens the real screenshot from the report's appendix (any key or a click closes it) */
#plz{position:absolute;inset:0;z-index:95;display:grid;place-items:center;background:rgba(3,8,20,.9);cursor:zoom-out}
#plz figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:20px}
#plz img{display:block;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(158,178,220,.25),0 40px 120px rgba(0,0,0,.6)}
#plz figcaption{font-size:24px;font-weight:500;color:#C6D3E8}

/* ---- performance (upgrade 20/10): fewer full-screen layers, nothing composited that is not seen ----
   · film grain removed (invisible on a projector, the most expensive layer); #cine-fx is gone
   · one vignette: #shade carries the stage vignette and the chain scenes' one (same edge darkness: 1 − (1 − .55)(1 − .42) ≈ .74)
   · #dim and #light2 leave compositing when transparent; #light is rastered small and scaled up (same smooth glow)
   · canvases are display:none while nothing is drawn on them (app.js) */
#shade{background:radial-gradient(ellipse at 50% 45%,transparent 56%,rgba(1,4,11,.74) 100%);opacity:.743;transition:opacity .8s}
#stage:is([data-scene="evidence"],[data-scene="cause"],[data-scene="flow"]) #shade{opacity:1}   /* problem: .72 in pitch-scene01.css */
#dim{visibility:hidden;transition:opacity 1.6s var(--io),visibility 0s 1.6s}
#dim.on{visibility:visible;transition:opacity 1.6s var(--io),visibility 0s}
#light2{visibility:hidden;transition:opacity 1.2s var(--io),visibility 0s 1.2s}
#stage.warm #light2{visibility:visible;transition:opacity 1.2s var(--io),visibility 0s}
/* the glow keeps its visible core (the old 1800 × 1400 layer was mostly a near-transparent tail): 1260 × 980, rastered at a quarter and scaled ×4 */
#light{width:315px;height:245px;margin:-122.5px 0 0 -157.5px;transform:translate(960px,420px) scale(4);
  background:radial-gradient(closest-side,rgba(46,98,210,.26),rgba(30,66,150,.08) 78.5%,transparent 100%)}
/* pre-warming the next chain scene (opacity .004) must not run its full-screen blur */
.scene.cn-warm{filter:none!important}
#frame{display:none}#frame.on{display:block}

/* effects off is never silent: the Safe mode label and the reduced-motion line on the opening screen, the label on the control bar */
#s-open .fx-note{position:absolute;left:0;right:0;top:40px;display:flex;justify-content:center;gap:16px;z-index:3;pointer-events:none}
#s-open .fx-note>*{pointer-events:auto}
.fx-safe{display:inline-flex;align-items:center;gap:14px;border:1px solid rgba(240,166,58,.55);background:rgba(7,12,22,.84);color:var(--white);font:inherit;font-size:24px;font-weight:500;line-height:1.2;padding:10px 10px 10px 22px;border-radius:999px;cursor:pointer}
.fx-safe i{width:10px;height:10px;border-radius:50%;background:var(--amber);flex:none}
.fx-safe span{margin-left:4px;padding:6px 18px 7px;border-radius:999px;background:rgba(240,166,58,.16);color:#FFD08A;font-weight:600}
.fx-safe:hover span,.fx-safe:focus-visible span{background:var(--amber);color:#160C00}
.fx-os{margin:0;display:inline-flex;align-items:center;gap:16px;padding:10px 10px 10px 24px;border-radius:999px;border:1px solid var(--hair-2);background:rgba(7,12,22,.84);color:var(--white);font-size:24px;line-height:1.2}
#fx-on{border:0;border-radius:999px;background:var(--blue);color:#06101F;font:inherit;font-size:24px;font-weight:600;line-height:1.2;padding:7px 20px 8px;cursor:pointer}
#fx-on:hover{background:#A9C9FF}
.fx-safe:focus-visible,#fx-on:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
#bar .tx.fx{color:#FFD08A}
#bar .tx.fx::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);margin-right:9px;vertical-align:2px}
/* LỆNH 14 §1 · the film never as a Windows overlay (DirectComposition): promoted at full opacity, its layer torn down as the scene is left
   stalled the present ~220 ms at the press after the film. At 0.999 it is composited like everything else (no visible difference). */
#demo-video{opacity:.999}