/* Vook v12: work grid teaser fade + play cursor + in-card mute */
.wgw{position:relative}
.wfade{position:absolute;left:-2px;right:-2px;bottom:-2px;height:58%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:6;
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 38%);mask-image:linear-gradient(180deg,transparent 0%,#000 38%);
 background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 55%,#fff 100%)}
.wfade .cta{position:relative;z-index:2;margin-top:70px;padding:0 30px!important;height:52px}
.wfn{position:relative;margin-top:70px;font:600 14px/1 var(--fb);color:#555;background:#fff;border-radius:999px;padding:8px 14px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.wfn+.cta{margin-top:0}
.wkmore{display:none}
/* in-card controls: mute sits in the corner, play becomes the cursor */
.ctl{left:auto;right:14px;top:14px;transform:none;background:none;padding:0}
.ctl .pl{display:none}
.ctl .mute{width:38px;height:38px;background:rgba(255,255,255,.92);cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),background .2s ease}
.ctl .mute:active{transform:scale(.92)}
.ctl .mute .on-off{display:none}

.wv.muted .ctl .mute:after{content:'';position:absolute;width:14px;height:1.8px;background:#000;transform:rotate(45deg);border-radius:2px;left:50%;top:50%;margin:-1px 0 0 -7px}
.ctl .mute{position:relative}
.wvi:after{opacity:.35}
@media(hover:hover) and (pointer:fine){
 .wvi{cursor:none}
 .wvi:hover .ctl{transform:none}
 .wvi .ctl .mute{cursor:pointer}
}
/* touch: keep a visible play button centred */
@media(hover:none){.ctl{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);background:rgba(40,40,40,.55);padding:4px}.ctl .pl{display:grid}}
.vcur{position:fixed;left:0;top:0;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#fff;display:grid;place-items:center;z-index:200;pointer-events:none;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .3s cubic-bezier(.23,1,.32,1);box-shadow:0 10px 30px -10px rgba(0,0,0,.35)}
.vcur.show{opacity:1;transform:scale(1)}
.vcur svg{width:24px;height:24px;margin-left:3px}
.vcur.pause svg.p1{display:none}.vcur:not(.pause) svg.p2{display:none}
.vcur span{position:absolute;bottom:-26px;font:700 11px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5);white-space:nowrap}
@media(max-width:720px){.wfade{height:46%}.wfade .cta,.wfn{margin-top:40px}}
