/* wester.live motion v1: animations only (no restyling) */
:root{--ease:cubic-bezier(.22,.8,.24,1);--spring:cubic-bezier(.34,1.4,.5,1)}

/* entrances */
header{animation:pv-down .6s var(--ease) both}
#cnav{animation:pv-up .7s var(--ease) .15s both}
#menu:not([hidden]),#adx,.ddm:not([hidden]){animation:pv-pop .28s var(--ease) both}
#menu{transform-origin:top right}

/* press feedback */
.ib,.langb,.btn,.chip,.pill,#cnav a{transition:transform .25s var(--spring),background .25s var(--ease)}
.ib:active,.langb:active,.btn:active,.chip:active,.pill:active{transform:scale(.93)}
#cnav a:active{transform:scale(.88)}
.card:active .pw{transform:scale(.97)}
.card .pw{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card .pw img{transition:transform .6s var(--ease)}
#cnav a.act .i{animation:pv-bump .45s var(--spring)}
@media (hover:hover){.card:hover .pw img{transform:scale(1.05)}}

/* scroll reveal (see polish-v1.js) */
.pv-on .pv-r{opacity:0;transform:translate(var(--rx,0px),var(--ry,20px)) scale(.97);
  transition:opacity .6s var(--ease),transform .7s var(--ease)}
.pv-on .pv-r.pv-in{opacity:1;transform:none}

/* welcome popup: same compact look as Cove Anime. Share + Install outlined, Anime filled */
#sp #spact{flex-wrap:wrap}
#sp #spact .sp-s{background:transparent;color:#ececf1;border-color:#ffffff26}
#sp #spact .sp-s.sp-an{background:#ececf1;color:#0c0c0f;border-color:transparent;text-decoration:none}

@keyframes pv-down{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes pv-up{from{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pv-pop{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pv-bump{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* Carousel rows + Show all (v2) */
section h2 .sab{margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:6px 8px 6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:#fff;font:600 12px Inter,sans-serif;cursor:pointer;transition:transform .25s var(--spring),background .2s}
section h2 .sab .i{width:14px;height:14px}
section h2 .sab:active{transform:scale(.93);background:rgba(255,255,255,.14)}
section>h2,.dds h2{opacity:1!important;transform:none!important}
.cvf-w{overflow:hidden;border-radius:20px;height:clamp(140px,40vw,250px)}
.cvf-t{display:flex;height:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none;transform:translate3d(var(--dx,0px),0,0);transition:transform .5s cubic-bezier(.22,.9,.24,1)}
.cvf-t.cvf-d{transition:none}
.cvf-c{position:relative;flex:none;height:100%;width:26%;margin-right:10px;border-radius:20px;overflow:hidden;background:#14141c;color:#fff!important;display:block;-webkit-tap-highlight-color:transparent;transition:width .62s cubic-bezier(.22,.9,.24,1),margin .62s cubic-bezier(.22,.9,.24,1),opacity .45s ease;will-change:width;transform:translateZ(0);backface-visibility:hidden}
.cvf-c.cvf-a{width:72%}
.cvf-c.cvf-h{width:0;margin-right:0;opacity:0;pointer-events:none}
.cvf-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .55s ease,transform .8s cubic-bezier(.22,.9,.24,1);-webkit-user-drag:none;pointer-events:none}
.cvf-b{opacity:0;transform:scale(1.06)}.cvf-pi{opacity:1}
.cvf-a .cvf-b{opacity:1;transform:none}.cvf-a .cvf-pi{opacity:0}
.cvf-g{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.85))}
.cvf-c .sc,.cvf-c .bm{position:absolute;z-index:2;top:9px;color:#fff!important}
.cvf-c .sc{left:9px;background:rgba(0,0,0,.55)}
.cvf-c .bm{right:9px;left:auto;background:rgba(0,0,0,.55)}
.cvf-p .bm{display:none}
.cvf-n{position:absolute;left:12px;right:10px;bottom:11px;z-index:2;min-width:0}
.cvf-c .cvf-n h3{color:#fff!important;margin:0;font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;transition:font-size .5s cubic-bezier(.22,.9,.24,1)}
.cvf-c .cvf-n p{color:rgba(255,255,255,.72)!important;margin:3px 0 0;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1}
.cvf-a .cvf-n h3{font-size:clamp(17px,5vw,24px);font-weight:800;letter-spacing:-.3px}
.cvf-a .cvf-n p{font-size:12px}
.cvf-live .cvf-t,.cvf-t.cvf-live{transition:none}
.cvf-live .cvf-c{transition:none!important;will-change:width}
.cvf-live .cvf-c img{transition:none!important;transform:none}
.cvf-live .cvf-c .bm{display:block;opacity:var(--a,0)}
.cvf-live .cvf-c.cvf-p .bm,.cvf-live .cvf-c.cvf-h .bm{pointer-events:none}
.cvf-live .cvf-c .cvf-n h3{font-size:calc(12.5px + var(--a,0)*(clamp(17px,5vw,24px) - 12.5px));font-weight:700;transition:none}
.cvf-live .cvf-c .cvf-n p{font-size:calc(10.5px + var(--a,0)*1.5px)}
.hs{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
#sa{position:fixed;inset:0;z-index:60;background:var(--g1);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 14px 90px;animation:saIn .38s var(--ease) both}
#sa.out{animation:saOut .26s var(--ease) both}
.sah{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 0 10px;background:rgba(7,7,11,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.sah h2{margin:0;font-size:18px;font-weight:800}.sah h2:before{display:none}
.sah button{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:#fff;display:grid;place-items:center;transition:transform .25s var(--spring)}
.sah button:active{transform:scale(.9)}
.sag .card,.sag .card.rk{width:auto}
@keyframes saIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes saOut{to{opacity:0;transform:translateY(16px) scale(.98)}}

/* ===== v2 home redesign ===== */
section h2:before,.dds h2:before{display:none!important;content:none!important}
section h2,.dds h2{gap:6px}
section h2 .sab{border:0!important;background:none!important;box-shadow:none!important;padding:2px 0 2px 8px!important;font-size:11.5px!important;font-weight:500!important;gap:1px!important;color:rgba(255,255,255,.7)!important}
section h2 .sab .i{width:12px;height:12px}
section h2 .sab:active{background:none!important;transform:none;opacity:.6}
.card.pc{width:calc((100% - 20px)/3);min-width:104px}
.card.pc .pw{border-radius:14px;aspect-ratio:2/3}
.card.pc .pt{position:absolute;left:0;right:0;bottom:0;padding:34px 8px 8px;z-index:2;color:#fff;min-width:0;
 background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));
 -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);
 -webkit-mask-image:linear-gradient(to top,#000 0,#000 35%,rgba(0,0,0,.55) 65%,transparent 100%);mask-image:linear-gradient(to top,#000 0,#000 35%,rgba(0,0,0,.55) 65%,transparent 100%)}
.card.pc .pt h3{margin:0!important;display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px!important;font-weight:700;line-height:1.25;color:#fff!important}
.card.pc .pt p{margin:2px 0 0!important;font-size:10.5px!important;color:rgba(255,255,255,.75)!important;opacity:1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.pc .sc{font-size:11px;padding:2px 7px;top:7px;left:7px}
.card.pc .bm{width:28px;height:28px;top:7px;right:7px;border-radius:9px}
.hsk{height:230px;border-radius:14px;margin:0 0 18px}
@media(min-width:760px){.card.pc{width:190px}}

/* ===== browse by platform (two endless rows) ===== */
.plat{margin-top:8px;overflow:hidden}
.pmq{display:flex;flex-direction:column;gap:14px;overflow:hidden;padding:6px 0 10px;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.pmr{overflow:hidden}
.pmt{display:flex;width:max-content;will-change:transform;animation:pmL 38s linear infinite;backface-visibility:hidden;transform:translate3d(0,0,0)}
.pmr.b .pmt{animation-name:pmR;animation-duration:44s}
@keyframes pmL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes pmR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.pf{flex:none;background:none;border:0;padding:10px 26px;color:rgba(255,255,255,.62);font-size:21px;line-height:1;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s}
.pf:active{color:#fff}
.pf-nf{font-family:"Bebas Neue",Impact,sans-serif;font-size:27px;letter-spacing:2px}
.pf-dp{font-family:Cinzel,Georgia,serif;font-weight:600;letter-spacing:1px}
.pf-hb{font-family:"Archivo Black",Inter,sans-serif;letter-spacing:-.5px}
.pf-pv{font-family:Outfit,Inter,sans-serif;font-weight:700;text-transform:lowercase}
.pf-ap{font-family:Inter,sans-serif;font-weight:600;letter-spacing:-.3px}
.pf-hu{font-family:Poppins,Inter,sans-serif;font-weight:800;text-transform:lowercase;font-size:24px}
.pf-pm{font-family:Montserrat,Inter,sans-serif;font-weight:600;letter-spacing:.5px}
.pf-pc{font-family:Quicksand,Inter,sans-serif;font-weight:700}
.pf-cr{font-family:Nunito,Inter,sans-serif;font-weight:800}
.pf-dc{font-family:Montserrat,Inter,sans-serif;font-weight:600;text-transform:lowercase}
