/* VoxCourt motion layer (step 14): progress bar, reveal, parallax glow, image switcher, ticker, tilt. Progressive: nothing hides unless JS added html.vcm */
#vcm-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#36d6d0,#7be8e2);z-index:2147483000;pointer-events:none;box-shadow:0 0 12px rgba(54,214,208,.6)}
#vcm-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:#0b2a44;color:#36d6d0;font:800 20px/1 Inter,Arial,sans-serif;cursor:pointer;z-index:2147482000;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s;box-shadow:0 8px 24px rgba(4,24,43,.35)}
#vcm-top.on{opacity:1;visibility:visible;transform:none}#vcm-top:hover{background:#36d6d0;color:#04182b}
html.vcm .vcm-r{opacity:0;translate:0 28px;transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--vcm-d,0ms),translate .7s cubic-bezier(.2,.7,.2,1) var(--vcm-d,0ms)}
html.vcm .vcm-r.vcm-in{opacity:1;translate:0 0}
.vcm-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:0;mix-blend-mode:screen}
.vcm-fx i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.34;will-change:transform}
.vcm-fx i:nth-child(1){width:420px;height:420px;right:-80px;top:-120px;background:#36d6d0;transform:translate3d(calc(var(--vcm-mx,0)*30px),calc(var(--vcm-py,0)*-.5px),0)}
.vcm-fx i:nth-child(2){width:340px;height:340px;right:22%;bottom:-160px;background:#2f6fb5;transform:translate3d(calc(var(--vcm-mx,0)*-40px),calc(var(--vcm-py,0)*-.9px),0)}
.vcm-fx svg{position:absolute;right:-30px;top:10%;width:50%;height:auto;opacity:.12;transform:translate3d(0,calc(var(--vcm-py,0)*-.35px),0)}
.vcm-fx svg *{fill:none;stroke:#7be8e2;stroke-width:2}
/* how it works: image switcher */
.vc-how{display:flex!important;flex-direction:column}
.vcm-how-art{position:relative;flex:1 1 auto;min-height:230px;margin-top:18px;border-radius:18px;overflow:hidden;background:#04182b;aspect-ratio:800/520;max-height:420px;align-self:stretch;box-shadow:0 18px 40px -18px rgba(4,24,43,.55)}
.vcm-how-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 1.2s ease}
.vcm-how-art img.on{opacity:1;transform:scale(1)}
.vc-how-grid article{cursor:pointer;transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}
.vc-how-grid article.vcm-active{border-color:#36d6d0!important;background:#eafafa!important;box-shadow:0 8px 22px -10px rgba(29,143,138,.55)}
.vc-how-grid article.vcm-active b{background:#36d6d0!important;color:#04182b!important}
/* ticker */
.vcm-ticker{overflow:hidden;margin:14px 0 6px;padding:11px 0;border-radius:999px;background:#0b2a44;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.vcm-track{display:flex;width:max-content;animation:vcm-run 38s linear infinite}
.vcm-ticker:hover .vcm-track{animation-play-state:paused}
.vcm-track span{display:inline-flex;align-items:center;gap:14px;padding-right:14px;font:800 13px/1 Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#cfe9ee;white-space:nowrap}
.vcm-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:#36d6d0}
@keyframes vcm-run{to{transform:translateX(-50%)}}
/* hover life */
html.vcm .vc-sport-grid a{transform:perspective(900px) rotateX(var(--vcm-rx,0deg)) rotateY(var(--vcm-ry,0deg)) translateY(var(--vcm-ty,0px));transition:transform .25s ease,box-shadow .25s ease;will-change:transform;overflow:hidden}
html.vcm .vc-sport-grid a img{transition:transform .8s ease}
html.vcm .vc-sport-grid a:hover{--vcm-ty:-6px;box-shadow:0 22px 40px -18px rgba(4,24,43,.6)}
html.vcm .vc-sport-grid a:hover img{transform:scale(1.07)}
html.vcm :is(.matches-grid,.highlights-grid,.vc-grid,.overview-grid,.role-grid)>*{transition:transform .25s ease,box-shadow .25s ease}
html.vcm :is(.matches-grid,.highlights-grid,.vc-grid,.overview-grid,.role-grid)>*:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(4,24,43,.45)}
html.vcm .vc-feature-strip>*{transition:background .25s}
html.vcm .vc-feature-strip>*:hover{background:#f1fbfb}
@media (max-width:900px){.vcm-how-art{min-height:200px;max-height:320px}.vcm-fx svg{display:none}#vcm-top{right:12px;bottom:12px}}
@media (prefers-reduced-motion:reduce){html.vcm .vcm-r{opacity:1!important;translate:none!important;transition:none!important}.vcm-track{animation:none}.vcm-how-art img{transition:none}#vcm-progress{display:none}}
/* fix: stored Studio offset pushed "How it works" off-screen on phones */
html:not(#vcA) body :is(.vc-how,.vc-home-finder){translate:none!important}