/* scenes A: 07:00 brief, 11:00 split, 13:00 wheel (v12) */
@keyframes aIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes aType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes aPop{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes aShim{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(420%) skewX(-18deg)}}
@keyframes aFillBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes aFade{to{opacity:0;transform:translateY(-8px)}}
@keyframes aUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes aBlink{50%{opacity:0}}
@keyframes aPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
@keyframes aRing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes aPress{0%,100%{transform:none}40%,70%{transform:scale(.96)}}
@keyframes aGlow{0%,100%{opacity:0}40%,70%{opacity:1}}
@keyframes aCur{
 0%{transform:translate(68cqw,240px);opacity:0}
 6%{transform:translate(64cqw,215px);opacity:1}
 24%{transform:translate(150px,74px)}
 56%{transform:translate(150px,74px)}
 68%{transform:translate(64px,140px)}
 86%{transform:translate(96px,152px)}
 94%{transform:translate(84px,146px)}
 100%{transform:translate(92px,150px);opacity:1}}

.bf{position:relative;display:flex;flex-direction:column;gap:20px;overflow:hidden;width:100%}
.bfl{display:flex;align-items:center;gap:14px;color:#fff}
.bfl .btx{display:inline-block;white-space:nowrap}
.bfl .bkc{display:inline-flex}
.shim{position:absolute;top:0;bottom:0;left:0;width:22%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(111,224,174,.16),transparent);opacity:0}
.ch.on .bfl{animation:aIn .6s var(--ease) both;animation-delay:calc(.3s + 1.2s*var(--i))}
.ch.on .bfl .btx{animation:aType .75s linear both;animation-delay:calc(.45s + 1.2s*var(--i))}
.ch.on .bfl .bkc{animation:aPop .35s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:var(--d)}
.ch.on .shim{opacity:1;animation:aShim 1.8s var(--ease) 5.4s both}

.sp{display:grid;grid-template-columns:100%;row-gap:18px;width:100%}
.sp p{margin:0;max-width:none}
.spq{color:#fff}
.sprows{display:flex;flex-direction:column;gap:12px;height:120px;grid-row:2;grid-column:1}
.spr{display:flex;align-items:center;gap:14px}
.spr span{width:76px;color:var(--mut)}
.spr i{position:relative;flex:1;height:3px;border-radius:2px;background:var(--hl);overflow:hidden}
.spr i::after{content:"";position:absolute;inset:0;background:var(--g);transform-origin:left}
.spa{display:flex;align-items:center;gap:10px;color:#fff;grid-row:2;grid-column:1;align-self:center;opacity:0}
.ch.on .spq{animation:aUp .6s var(--ease) .1s both}
.ch.on .spr{animation:aIn .5s var(--ease) both}
.ch.on .spr:nth-child(1){animation-delay:.6s}.ch.on .spr:nth-child(2){animation-delay:.8s}.ch.on .spr:nth-child(3){animation-delay:1s}
.ch.on .spr i::after{animation:aFillBar var(--t) cubic-bezier(.45,.05,.4,1) 1.2s both;will-change:transform}
.ch.on .sprows{animation:aFade .7s var(--ease) 4.6s forwards}
.ch.on .spa{animation:aUp .6s var(--ease) 5s both}

.wd{position:absolute;inset:0;overflow:hidden;container-type:size}
.wbar{height:34px;border-bottom:1px solid var(--hl);display:flex;align-items:center;gap:6px;padding:0 20px}
.wbar b{width:7px;height:7px;border-radius:50%;background:var(--hl)}
.wfield{position:absolute;left:24px;right:104px;top:56px;height:36px;border-bottom:1px solid rgba(255,255,255,.22);display:flex;align-items:center}
.wtype{display:inline-block;white-space:nowrap;color:#fff;padding-right:4px;max-width:100%;position:relative}
.wtype::after{content:"";position:absolute;right:0;top:3px;bottom:3px;width:1.5px;background:var(--g);animation:aBlink 1s steps(1) infinite}
.wbtn{position:absolute;left:24px;top:116px;padding:8px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.22);color:#fff}
.wok{position:absolute;left:24px;top:168px;display:flex;align-items:center;gap:10px;color:var(--soft);white-space:nowrap}
.wok em{font-style:normal}
.wph{position:absolute;right:24px;top:56px;width:52px;height:100px;border:1.5px solid rgba(255,255,255,.28);border-radius:11px}
.wph i{position:absolute;left:8px;right:8px;height:3px;border-radius:2px;background:var(--hl)}
.wph i:nth-child(1){top:14px}.wph i:nth-child(2){top:24px;right:20px}
.wph u{position:absolute;left:8px;right:8px;top:62px;height:12px;border-radius:4px;border:1px solid rgba(255,255,255,.28)}
.wph s{position:absolute;left:50%;top:68px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1.5px solid var(--g);opacity:0}
.wcur{position:absolute;left:0;top:0;transform:translate(68cqw,240px);opacity:0;will-change:transform;width:20px;height:20px;fill:#fff;stroke:var(--bg);stroke-width:.8;z-index:3}
.wnt{position:absolute;left:24px;bottom:22px;margin:0;display:flex;align-items:center;gap:10px;color:var(--mut);max-width:none;font-size:16px;line-height:24px}
.wnt b{position:relative;width:7px;height:7px;border-radius:50%;background:var(--g)}
.wnt b::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--g);animation:aPulse 1.6s ease-out infinite}
.wbtn::after,.wph u::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(111,224,174,.2);opacity:0}
.wph u{box-sizing:border-box}
.ch.on .wtype{animation:aType 1.9s linear 1.8s both}
.ch.on .wcur{animation:aCur 8.2s var(--ease) .2s both}
.ch.on .wbtn,.ch.on .wph u{animation:aPress .6s var(--ease) 5.55s both}
.ch.on .wbtn::after,.ch.on .wph u::after{animation:aGlow .6s var(--ease) 5.55s both}
.ch.on .wph s{animation:aRing .9s ease-out 5.6s both}
.ch.on .wok{animation:aUp .5s var(--ease) 6s both}
.ch:not(.on) .wok{opacity:0}
.ch.arm:not(.on) .wcur,.ch.arm:not(.on) .wok{opacity:0}

@media (max-width:640px){
 .wfield{left:20px;right:20px}.wph{display:none}.wok{left:20px}
 .wnt{left:20px;bottom:18px}.wbtn{left:20px}
}
@media (prefers-reduced-motion:reduce){
 .bfl,.bfl .btx,.bfl .bkc,.spq,.spr,.spr i::after,.spa,.wtype,.wbtn,.wok,.wph u,.wph s,.wcur,.wnt b{animation:none!important}
 .sprows{opacity:0}.shim{display:none}.wcur{transform:translate(92px,150px);opacity:1}.wtype::after{display:none}.spa{opacity:1}
}
.vz:has(.wd){position:relative}