/* CHIN-SU slice (N1-N6): the stage is 1920 x 1080, shown 1:1 or smaller (never enlarged); clips play under an HTML text layer.
   Editorial layout (owner's feedback 30/10): the picture owns the frame (3D >= 60 %), one text column on a soft scrim (black 55 % to
   nothing), no boxes. Eyebrow 14 px uppercase with a red rule; titles 52-60 px, at most two lines, each line slides up out of a mask;
   figures 110-140 px light (Geist, tabular) rolling digit by digit; small uppercase labels; thin rules between figures; a quiet source
   line with outline chips. Lucide line icons (ISC), stroke 1.75, cream or chili red. Motion 300-800 ms on one curve, no bounce. */
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(fonts/inter-vietnamese-500-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(fonts/inter-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(fonts/inter-vietnamese-700-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(fonts/inter-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-weight:100 900;font-display:swap;src:url(fonts/geist-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/geist-latin-wght-normal.woff2) format("woff2")}

:root{color-scheme:dark;--e:cubic-bezier(.2,.8,.2,1);--chili:#E8402F;--cream:#F3EBDD;--ink:#fff;--soft:rgba(243,235,221,.82);--mute:rgba(243,235,221,.6);--rule:rgba(243,235,221,.2)}
html,body{margin:0;height:100%;background:#000;color:#fff;overflow:hidden;font-family:"Inter","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:#000;cursor:none}
#vid,#stills{position:absolute;inset:0}
.nq-vid{position:absolute;inset:0;width:1920px;height:1080px;display:block;opacity:0;visibility:hidden;object-fit:cover;pointer-events:none;background:#000}
.nq-vid.on{opacity:1;visibility:visible}
.still{position:absolute;inset:0;width:1920px;height:1080px;object-fit:cover;opacity:0;transition:opacity .5s linear}
.still.on{opacity:1}
body:not(.safe) #stills .still{display:none}
body.safe #vid{display:none}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* a beat's words: in .3 s after the main motion stops (slice.js), each part on its own delay (--d) */
.bt{position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s var(--e),visibility 0s .4s}
.bt.on{opacity:1;visibility:visible;transition:opacity .3s var(--e),visibility 0s}
.scrim{position:absolute;pointer-events:none}
.scrim.sl{left:0;top:0;width:1240px;height:1080px;background:linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.46) 34%,rgba(0,0,0,.18) 62%,rgba(0,0,0,0) 100%)}
/* deeper, for a column over a bright daylight picture (N4's white wall) */
.scrim.sl.k{background:linear-gradient(90deg,rgba(4,4,6,.8) 0,rgba(4,4,6,.72) 44%,rgba(4,4,6,.34) 66%,rgba(4,4,6,0) 100%)}
.scrim.sr{right:0;top:0;width:1180px;height:1080px;background:linear-gradient(270deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.46) 36%,rgba(0,0,0,.18) 64%,rgba(0,0,0,0) 100%)}
.scrim.sr.k{background:linear-gradient(270deg,rgba(4,4,6,.8) 0,rgba(4,4,6,.72) 44%,rgba(4,4,6,.34) 66%,rgba(4,4,6,0) 100%)}
.scrim.sb{left:0;bottom:0;width:1920px;height:560px;background:linear-gradient(0deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.36) 40%,rgba(0,0,0,0) 100%)}
.scrim.st{left:0;top:0;width:1920px;height:380px;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.25) 52%,rgba(0,0,0,0) 100%)}

/* eyebrow: a red rule grows 0 -> 48 px, then the words */
.eb{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:600 14px/1 "Inter",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.eb i{display:block;width:0;height:2px;background:var(--chili);transition:width .5s var(--e)}
.bt.on .eb i{width:48px}
/* titles: each line slides up out of its mask (500 ms, 80 ms apart) */
.ttl{margin:0;font:700 56px/1.12 "Inter",sans-serif;letter-spacing:-.02em;color:var(--ink);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.l>span{display:block;transform:translateY(108%);transition:transform .5s var(--e)}
.bt.on .l>span{transform:none}
.l:nth-child(2)>span{transition-delay:80ms}.l:nth-child(3)>span{transition-delay:160ms}.l:nth-child(4)>span{transition-delay:240ms}
.nb{white-space:nowrap}

/* figures: label, the number rolling digit by digit (600-800 ms), a short meta line; thin rules between; one after another (--d) */
.figs{margin-top:34px}
.fig{padding:18px 0 16px;border-top:1px solid var(--rule);opacity:0;transform:translateY(12px);transition:opacity .4s var(--e) var(--d,0ms),transform .5s var(--e) var(--d,0ms)}
.fig:first-child{border-top:0;padding-top:0}
.bt.on .fig{opacity:1;transform:none}
.fl{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:600 14px/1.2 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.fl .ic{font-size:20px;color:var(--chili)}
.n{display:flex;align-items:baseline;margin:0;font:300 124px/1 "Geist","Inter",sans-serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--ink);white-space:nowrap}
.n u{text-decoration:none;margin-left:16px;font:500 30px/1 "Inter",sans-serif;letter-spacing:-.01em;color:var(--soft)}
.n .dg{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.n .rl{display:flex;flex-direction:column;transform:translateY(0);transition:transform .72s var(--e)}
.n .rl b{display:block;height:1em;font-weight:inherit}
.bt.on .n .rl{transform:translateY(calc(var(--v) * -1em))}
.n .sp{display:inline-block}
.fm{margin:12px 0 0;font:500 15px/1.35 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* source: one compact line at the foot, outline chips */
.src{position:absolute;left:96px;right:96px;bottom:34px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font:500 14px/1.35 "Inter",sans-serif;color:rgba(243,235,221,.6);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.chip{padding:3px 8px;border-radius:999px;font:600 11.5px/1.2 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,235,221,.72);box-shadow:inset 0 0 0 1px rgba(243,235,221,.28)}

/* HUD: chapter with its icon, six progress dots */
#hud{position:absolute;z-index:2;left:96px;top:44px;display:flex;align-items:center;gap:22px;opacity:0;transition:opacity .45s var(--e);pointer-events:none}
#hud.on{opacity:1}
#hud .ch{margin:0;display:flex;align-items:center;gap:10px;font:600 15px/1 "Inter",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 3px rgba(0,0,0,.7),0 1px 12px rgba(0,0,0,.6)}
#hud .ch .ic{font-size:18px;color:var(--chili)}
#hud .dots{display:flex;gap:7px;margin:0;padding:0;list-style:none}
#hud .dots li{width:6px;height:6px;border-radius:50%;background:rgba(243,235,221,.3)}
#hud .dots li.done{background:rgba(243,235,221,.6)}
#hud .dots li.now{width:20px;border-radius:3px;background:var(--cream)}

/* pins: a dot on the thing, a thin stem, the words above it (no box); scale .96 -> 1 with the fade */
.pin{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.pin .pt{position:absolute;left:0;bottom:46px;transform:translateX(-50%) scale(.96);transform-origin:50% 100%;width:max-content;max-width:460px;text-align:center;opacity:0;
  transition:opacity .4s var(--e) var(--d,0ms),transform .5s var(--e) var(--d,0ms);text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 22px rgba(0,0,0,.65)}
.bt.on .pin .pt,.pin.win.on .pt{opacity:1;transform:translateX(-50%) scale(1)}
.pin::after{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 4px rgba(243,235,221,.2);opacity:0;transition:opacity .3s var(--e) var(--d,0ms)}
.pin::before{content:"";position:absolute;left:-.5px;bottom:8px;width:1px;height:34px;background:linear-gradient(0deg,rgba(243,235,221,.8),rgba(243,235,221,.2));transform:scaleY(0);transform-origin:50% 100%;transition:transform .4s var(--e) var(--d,0ms)}
.bt.on .pin::after,.pin.win.on::after{opacity:1}
.bt.on .pin::before,.pin.win.on::before{transform:none}
.pk{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font:600 26px/1.15 "Inter",sans-serif;letter-spacing:-.005em;color:var(--ink)}
.pk .ic{font-size:24px;color:var(--chili)}
.pc{margin:6px 0 0;font:500 19px/1.3 "Inter",sans-serif;color:var(--soft)}
.ics{display:flex;justify-content:center;gap:12px;margin:0 0 10px;font-size:26px;color:var(--cream)}
.pin.win{opacity:1}
/* a pin whose words hang to the left of its stem (it stands near the text column) */
.pin.lt .pt{left:auto;right:-22px;transform:scale(.96);transform-origin:100% 100%;text-align:right}
.bt.on .pin.lt .pt{transform:scale(1)}
.pin.lt .pk{justify-content:flex-end}

/* N1: one quiet kicker, foot left, sliding up out of its mask */
.b-n1 .kick{position:absolute;left:112px;bottom:96px;margin:0;font:600 20px/1.2 "Inter",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);text-shadow:0 1px 14px rgba(0,0,0,.6)}

/* N2: the cover title in the left column; the subject (two lines) set large, its first and last words smaller around it */
.b-n2 .col{position:absolute;left:112px;top:240px;width:900px}
.b-n2 .ttl{font-size:58px;line-height:1.08;letter-spacing:-.015em}
.b-n2 .ttl .pre>span,.b-n2 .ttl .post>span{font:600 24px/1.3 "Inter",sans-serif;letter-spacing:.06em;color:var(--soft)}
.b-n2 .ttl .pre{margin-bottom:14px}.b-n2 .ttl .post{margin-top:16px}
.b-n2 .sub{display:flex;align-items:center;gap:12px;margin:40px 0 0;font:500 24px/1.3 "Inter",sans-serif;color:var(--cream);opacity:0;transition:opacity .5s var(--e) .5s}
.b-n2 .sub .ic{font-size:24px;color:var(--chili)}
.bt.on .sub{opacity:1}

/* N3: the question centred at the foot, line by line */
.b-n3 .q{position:absolute;left:0;right:0;bottom:150px;text-align:center;font-size:56px}
.b-n3 .q .l:nth-child(2)>span{transition-delay:220ms}

/* N4: left column; the line to the trucks draws after the second figure, then its dot breathes */
.b-n4 .col{position:absolute;left:112px;top:128px;width:820px}
.b-n4 .ttl{font-size:54px}
.b-n4 .n{font-size:112px}
.lead{position:absolute;inset:0;width:1920px;height:1080px;overflow:visible;pointer-events:none}
.lead .ln,.lead .sh{fill:none;stroke:var(--cream);stroke-width:2;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .4s var(--e) 1.45s}
.lead .sh{stroke:rgba(0,0,0,.5);stroke-width:5}
.lead .dt{fill:var(--cream);stroke:rgba(0,0,0,.55);stroke-width:3;paint-order:stroke;opacity:0;transition:opacity .3s var(--e) 1.8s}
.lead .pl{fill:none;stroke:var(--cream);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.bt.on .lead .ln,.bt.on .lead .sh{stroke-dashoffset:0}
.b-n4 .fig p,.b-n5 .fig p{text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 18px rgba(0,0,0,.35)}
.b-n4 .fm,.b-n5 .fm{color:var(--soft)}
.bt.on .lead .dt{opacity:1}
.bt.on .lead .pl{animation:breathe 2.4s var(--e) 2.1s infinite}
@keyframes breathe{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

/* N5: right column */
.b-n5 .col{position:absolute;right:96px;top:170px;width:728px}
.b-n5 .src{justify-content:flex-end}
.b-n5 .ttl{font-size:54px}
.b-n5 .n{font-size:140px}

/* N6: title top centre, the groups hang on the bottles */
.b-n6 .ttl{position:absolute;left:0;right:0;top:92px;text-align:center;font-size:56px}

/* start screen, help, notes panel, presenter view */
#start{position:absolute;inset:0;display:grid;place-items:center;background:#000;transition:opacity .6s var(--e)}
#start p{margin:0;font:600 18px/1.4 "Inter",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);text-align:center}
#start b{display:block;margin-bottom:14px;font:700 40px/1.2 "Inter",sans-serif;letter-spacing:-.01em;text-transform:none;color:#fff}
body.go #start{opacity:0;pointer-events:none}
#notes{position:fixed;right:16px;bottom:16px;width:min(520px,calc(100vw - 32px));box-sizing:border-box;padding:18px 20px;border-radius:14px;background:rgba(12,14,18,.94);box-shadow:0 0 0 1px rgba(255,255,255,.12);font:500 18px/1.4 "Inter",sans-serif;color:#EDE7DC;z-index:5}
#notes[hidden]{display:none}
#notes h2{margin:0 0 6px;font:600 13px/1.2 "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
#notes .now{margin:0 0 12px;font-size:22px;font-weight:600;color:#fff}
#notes .nx{margin:0;color:#C9C2B6}
#help{position:fixed;left:16px;bottom:16px;margin:0;font:500 14px/1.5 "Inter",sans-serif;color:rgba(243,235,221,.75);z-index:5}
#help[hidden]{display:none}
#help kbd{font:600 13px/1 "Inter",sans-serif;padding:3px 6px;border-radius:5px;background:rgba(255,255,255,.1)}
body.presenter #stage{display:none}
body.presenter #pv{display:block}
#pv{display:none;padding:28px;font:500 22px/1.4 "Inter",sans-serif;color:#EDE7DC;background:#08090B;min-height:100%;box-sizing:border-box}
#pv .b{font:700 64px/1 "Inter",sans-serif;color:#fff}
#pv .now{margin:18px 0;font:600 34px/1.3 "Inter",sans-serif;color:#fff}
#pv .nx{color:#C9C2B6}
#pv .clk{font:600 28px/1 "Inter",sans-serif;color:var(--mute);font-variant-numeric:tabular-nums}
#pv button{font:600 20px "Inter",sans-serif;padding:14px 22px;margin:20px 12px 0 0;border:0;border-radius:10px;background:#B8321F;color:#fff;cursor:pointer}
@media (prefers-reduced-motion:reduce){.bt,.l>span,.fig,.eb i,.n .rl,.pin .pt,.pin::before,.lead .ln,.lead .sh,.still,#start{transition:none!important}.bt.on .lead .pl{animation:none}}