/* Example 5, "The Columns": a white stage. The logo films blend into it (their own white backdrop multiplies away). The page's scroll is the
   clock: a brand plays in the middle, its products fly in, they form a column that shrinks and docks to the start edge; at the end the
   logos become a tab bar and a tab opens its products. */
.cols{position:relative;background:#fff}
.cstage{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;background:#fff;color:#16181A;isolation:isolate}
.light .bar{color:#16181A}
.light .bar .lang{border-color:rgba(22,24,26,.4)}
.light .bar .lang:hover{background:#16181A;color:#fff}
.cstage .intro .nm{color:#16181A}
.cstage .intro .sb{color:#7a7062}
.cstage .intro .tg{color:#9a7b3a}
.world{position:absolute;inset:0;pointer-events:none}
.world .plate{background:none;box-shadow:none;border-radius:0;mix-blend-mode:multiply;overflow:hidden;z-index:30}
.world .pv{background:none}
.world .still{position:absolute;display:block;max-width:none;object-fit:fill;pointer-events:none}
.world .pk{left:0;top:0;z-index:10}
.world .pk img,.world .pk svg{filter:drop-shadow(0 8px 12px rgba(40,30,10,.22))}
.world .pk .gr{display:none}
.pk .lb{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;text-align:center;font:400 12.5px/1.35 var(--ui);color:#16181A;opacity:0;pointer-events:none}
html[lang=en] .pk .lb{font:500 13px/1.3 var(--serif);letter-spacing:.06em}
.tabbar{position:absolute;opacity:0;background:#f4f1ea;border:1px solid #e6dcc6;border-radius:18px;box-shadow:0 10px 30px rgba(60,40,10,.08)}
.heads{position:absolute;inset:0;pointer-events:none}
.hd{position:absolute;opacity:0;display:flex;flex-direction:column;justify-content:center;gap:10px}
.hd .hn{font-size:clamp(30px,4vw,56px);line-height:1.15;color:#16181A}
.hd .hl{font-size:clamp(18px,2vw,26px);color:#16181A;line-height:1.3}
.hd .agent{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:300 13px/1 var(--ui);color:#7a7062}
html[lang=en] .hd .agent{font:500 12px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase}
.hd .chip{font:400 12.5px/1 var(--ui);padding:7px 13px;border-radius:99px;border:1px solid rgba(22,24,26,.25);background:#faf7f0;color:#16181A}
html[lang=en] .hd .chip{font:500 12px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase}
.tabs{position:absolute;inset:0;pointer-events:none;z-index:40}
.tab{position:absolute;pointer-events:none;border-radius:10px;cursor:pointer}
.tab.live{pointer-events:auto}
.tab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tmark{position:absolute;width:4px;border-radius:2px;background:linear-gradient(var(--gold-hi),var(--gold));opacity:0;z-index:35}
.cue{position:absolute;left:0;right:0;bottom:11%;text-align:center;font:300 13px/1 var(--ui);color:#7a7062;pointer-events:none;display:grid;justify-items:center;gap:12px}
html[lang=en] .cue{font:500 12px/1 var(--serif);letter-spacing:.3em;text-transform:uppercase}
.cue i{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);animation:cue 1.8s var(--ease) infinite;transform-origin:50% 0}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.ctl{position:absolute;bottom:20px;inset-inline-end:var(--gut);z-index:41;display:flex;align-items:center;gap:10px;color:#16181A}
.ctl .rb{border-color:rgba(22,24,26,.35)}
.ctl .rb:hover{background:rgba(22,24,26,.08)}
.eight{font:400 12px/1 var(--ui);padding:10px 14px;border-radius:99px;border:1px solid rgba(22,24,26,.3);color:#16181A}
html[lang=en] .eight{font:500 11px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase}
.eight[aria-pressed=true]{background:#16181A;color:#fff}
.prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(22,24,26,.08)}
.prog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transform-origin:0 50%;transform:scaleX(0)}
html[dir=rtl] .prog i{transform-origin:100% 50%}
.cstage .splash{background:#fff}
.calm .cue i{display:none}
.snd{display:none}