/* Vook v4: editorial hero + performance pass (compositor-only motion) */

/* ---------- hero v4 ---------- */
.hero4{padding:130px 0 60px;position:relative;overflow:hidden}
.hero4:before{background:radial-gradient(40% 50% at 80% 30%,rgba(106,77,255,.16),transparent 70%),radial-gradient(35% 45% at 5% 10%,rgba(255,180,130,.13),transparent 70%)}
.h4g,.vk .e-con.h4g{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center;position:relative}
.hero4 .col,.vk .hero4 .e-con.col{display:flex;flex-direction:column;align-items:flex-start}
.hero4 .pill{gap:10px;padding:6px 14px 6px 6px}
.hero4 .pill .avs img{width:28px;height:28px;border-width:2px;margin-left:-8px}
.hero4 .pill .avs img:first-child{margin-left:0}
.hero4 .pill>span:last-child{display:inline-flex;align-items:center;gap:6px}
.hero4 .pill .stars svg{width:12px;height:12px}
.hero4 h1{font-size:clamp(54px,7.4vw,112px);line-height:.92;letter-spacing:-.05em;margin-top:28px;max-width:640px}
.hero4 h1 em{display:inline-block;padding-right:.04em}
.hero4 .sub{font-size:19px;color:var(--mute);max-width:500px;margin-top:26px}
.hero4 .ctas{margin-top:36px}
.hstats{display:flex;gap:0;margin-top:48px;padding-top:28px;border-top:1px solid var(--line);width:100%;max-width:520px}
.hstats div{flex:1;padding-right:18px}
.hstats div+div{padding-left:22px;border-left:1px solid var(--line)}
.hstats b{display:block;font:500 30px/1 var(--fh);letter-spacing:-.04em}
.hstats span{display:block;font-size:13.5px;color:var(--mute);margin-top:6px}

/* video wall */
.wall{position:relative;height:680px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;overflow:hidden;border-radius:32px;contain:layout paint}
.wall:before,.wall:after{content:'';position:absolute;left:0;right:0;height:120px;z-index:2;pointer-events:none}
.wall:before{top:0;background:linear-gradient(var(--bg),rgba(245,245,242,0))}
.wall:after{bottom:0;background:linear-gradient(rgba(245,245,242,0),var(--bg))}
.wcol{overflow:hidden}
.wtr{display:flex;flex-direction:column;gap:14px;will-change:transform;animation:wup 48s linear infinite;backface-visibility:hidden}
.wcol.c1 .wtr{animation-name:wdown;animation-duration:56s}
.wcol.c2 .wtr{animation-duration:42s}
.wcol.c1{margin-top:-60px}
@keyframes wup{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - 7px),0)}}
@keyframes wdown{from{transform:translate3d(0,calc(-50% - 7px),0)}to{transform:translate3d(0,0,0)}}
.vc{aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#e4e3de;flex:none}
.vc img{width:100%;height:100%;object-fit:cover}
.wall:hover .wtr{animation-play-state:paused}

/* live sales feed */
.feed{position:absolute;left:50%;bottom:60px;width:min(340px,86%);height:200px;transform:translateX(-50%);z-index:3}
.nt{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 12px;border-radius:20px;background:#fff;border:1px solid rgba(13,13,16,.06);box-shadow:0 1px 2px rgba(13,13,16,.05),0 24px 48px -20px rgba(30,20,90,.35);font-size:12.5px;color:var(--mute);opacity:0;transform:translate3d(0,-24px,0) scale(.96);transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .6s;will-change:transform,opacity}
.nt b{display:block;color:var(--ink);font-size:14px;font-weight:600}
.nt>div{flex:1;min-width:0}
.nt em{font-style:normal;font-size:11.5px;color:var(--mute2);align-self:flex-start;margin-top:2px}
.nt .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:17px;flex:none}
.nt.p0{opacity:1;transform:translate3d(0,0,0) scale(1);z-index:3}
.nt.p1{opacity:.85;transform:translate3d(0,74px,0) scale(.95);z-index:2}
.nt.p2{opacity:.5;transform:translate3d(0,138px,0) scale(.9);z-index:1}
.nt.gone{opacity:0;transform:translate3d(0,170px,0) scale(.86);z-index:0}

/* ---------- performance pass ---------- */
/* no backdrop blur except the nav */
.toast,.oc,.play,.pui,.cat{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.oc{background:#1d1d24}
.oc:hover{background:#25233a}
.play{background:rgba(13,13,16,.55)}
.cat{background:#fff}
/* replace animated masks with static edge fades */
.mq,.rvq{-webkit-mask:none!important;mask:none!important;position:relative}
.mq:before,.mq:after,.rvq:before,.rvq:after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.mq:before,.rvq:before{left:0;background:linear-gradient(90deg,var(--bg),rgba(245,245,242,0))}
.mq:after,.rvq:after{right:0;background:linear-gradient(270deg,var(--bg),rgba(245,245,242,0))}
.track{will-change:transform;backface-visibility:hidden}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* pause every loop while off screen */
.off,.off *{animation-play-state:paused!important}
/* lighter reveals */
.js .r{transform:translate3d(0,18px,0);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.js .r.in{transform:none}
.sw-word{will-change:transform,opacity}
/* sticky cases: transform only */
.case{transition:none;filter:none!important;contain:paint}
.sec.dark{transform:none!important}
/* cheaper shadows on moving cards */
.rv{box-shadow:0 1px 2px rgba(13,13,16,.04),0 10px 24px -16px rgba(13,13,16,.18)}
.live{animation:none;box-shadow:0 0 0 3px rgba(17,163,90,.18)}
/* premium grain */
body.vk:after{content:'';position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

@media(max-width:1080px){
 .h4g,.vk .e-con.h4g{grid-template-columns:1fr;gap:40px}
 .hero4 .col,.vk .hero4 .e-con.col{align-items:center;text-align:center}
 .hero4 h1{margin-left:auto;margin-right:auto}
 .hero4 .sub{margin-left:auto;margin-right:auto}
 .hero4 .ctas{justify-content:center}
 .hstats{margin-left:auto;margin-right:auto;text-align:left}
 .wall{height:560px;max-width:640px;width:100%;margin:0 auto}
}
@media(max-width:720px){
 .hero4{padding:112px 0 30px}
 .hero4 h1{font-size:clamp(48px,14vw,64px)}
 .hero4 .sub{font-size:16.5px}
 .hstats{margin-top:34px;padding-top:22px}
 .hstats b{font-size:23px}.hstats span{font-size:12px}
 .hstats div+div{padding-left:14px}.hstats div{padding-right:10px}
 .wall{height:440px;grid-template-columns:1fr 1fr;gap:10px;border-radius:24px}
 .wcol.c2{display:none}
 .wtr{gap:10px}
 .vc{border-radius:16px}
 .feed{bottom:36px;height:170px}
 .nt.p1{transform:translate3d(0,66px,0) scale(.95)}.nt.p2{transform:translate3d(0,122px,0) scale(.9)}
 .mq:before,.mq:after,.rvq:before,.rvq:after{width:48px}
}
@media(prefers-reduced-motion:reduce){.wtr{animation:none}}

.js .hero4 .r{animation:h4in 1.1s cubic-bezier(.22,1,.36,1) both}
@keyframes h4in{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
.js .hero4 h1.r{animation-delay:.06s}.js .hero4 .sub.r{animation-delay:.14s}.js .hero4 .ctas.r{animation-delay:.22s}.js .hero4 .hstats.r{animation-delay:.3s}.js .hero4 .wall.r{animation:wallin 1.4s cubic-bezier(.22,1,.36,1) .2s both}
@keyframes wallin{from{opacity:0;transform:translate3d(0,40px,0) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js .hero4 .r{animation:none;opacity:1;transform:none}}

/* tidy feed: iOS-style stack */
.feed{height:120px;bottom:70px}
.nt.p1{opacity:.9;transform:translate3d(0,16px,0) scale(.94)}
.nt.p2{opacity:.6;transform:translate3d(0,30px,0) scale(.88)}
.nt.gone{opacity:0;transform:translate3d(0,40px,0) scale(.84)}
.nt.p1>*,.nt.p2>*{opacity:0;transition:opacity .4s}
.nt.p0>*{opacity:1;transition:opacity .5s .2s}
.hero4 h1 em{padding-right:0}
.wall:before,.wall:after{height:150px}
@media(max-width:720px){.feed{height:110px;bottom:40px}.nt.p1{transform:translate3d(0,14px,0) scale(.94)}.nt.p2{transform:translate3d(0,26px,0) scale(.88)}}