/* MeemGo Video Portfolio: 9:16 reels carousel. Builds on style.css (same palette, header, footer). */
.vp{background:var(--forest)}
.vp #ambBtn{display:none}
.vp-hero{position:relative;padding:calc(var(--hh) + 54px) var(--pad) 34px;overflow:hidden;isolation:isolate;background:radial-gradient(110% 90% at 85% 0%,#1f5239 0%,transparent 60%),var(--forest)}
.vp-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.vp-bg svg{position:absolute;right:-20vmax;top:-26vmax;width:90vmax;height:90vmax;animation:vpspin 100s linear infinite}
.vp-bg circle{fill:none;stroke:#B5E875;stroke-opacity:.13;stroke-width:1.2}.vp-bg .d{stroke-dasharray:3 12;stroke-opacity:.26}
.vp-bg i{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(181,232,117,.35),transparent);transform:translateY(-100%);animation:vpfall 7s linear infinite}
.vp-bg i:nth-of-type(1){left:12%}.vp-bg i:nth-of-type(2){left:46%;animation-delay:-2.6s;animation-duration:9s}.vp-bg i:nth-of-type(3){left:78%;animation-delay:-5s;animation-duration:8s}
@keyframes vpspin{to{transform:rotate(360deg)}}
@keyframes vpfall{to{transform:translateY(100%)}}
.crumbs{display:flex;gap:10px;align-items:center;font-size:.86rem;font-weight:600;color:var(--muted);margin-bottom:26px;flex-wrap:wrap;opacity:0;animation:vprise .8s .1s var(--ease) forwards}
.crumbs a{text-decoration:none;padding:6px 0}.crumbs a:hover{color:var(--lime)}
.vp-hero h1{font-size:clamp(2.7rem,8.4vw,7.4rem);line-height:.94;letter-spacing:-.045em;font-weight:800;margin:0 0 .3em}
.vp-hero h1 .l{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.06em}
.vp-hero h1 .l>span{display:block;transform:translateY(110%);animation:vpup 1.1s var(--ease) forwards}
.vp-hero h1 .l:nth-child(2)>span{animation-delay:.18s;color:var(--lime);text-transform:uppercase;letter-spacing:-.02em}
@keyframes vpup{to{transform:none}}
@keyframes vprise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.vp-hero .sub{font-size:clamp(1.15rem,2vw,1.7rem);font-weight:700;margin:0 0 10px;opacity:0;animation:vprise .9s .6s var(--ease) forwards}
.vp-hero .lead2{color:var(--muted);max-width:56ch;margin:0;font-size:1.05rem;opacity:0;animation:vprise .9s .8s var(--ease) forwards}

.vp-main{padding:10px var(--pad) 40px}
.vtabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.vtabs button{border:1px solid var(--line);background:rgba(245,248,240,.03);border-radius:999px;padding:0 16px;min-height:44px;font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;gap:8px;transition:background .3s,color .3s,border-color .3s}
.vtabs button i{font-style:normal;font-size:.7rem;opacity:.6}
.vtabs button:hover{border-color:var(--lime)}
.vtabs button[aria-pressed=true]{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.vtabs button.zero{opacity:.55}
@media (max-width:760px){.vtabs{flex-wrap:nowrap;overflow-x:auto;margin:6px calc(var(--pad)*-1) 6px;padding:2px var(--pad);scrollbar-width:none}.vtabs::-webkit-scrollbar{display:none}.vtabs button{flex:none}}

.vstage{--ch:min(calc(100svh - 300px),640px);--cw:calc(var(--ch)*9/16);position:relative;margin:0 calc(var(--pad)*-1);overflow:hidden;touch-action:pan-y;cursor:grab;padding:64px 0 44px;min-height:calc(var(--ch) + 260px);transition:opacity .3s}
.vstage.drag{cursor:grabbing}
.vstage.swap{opacity:0}
.vstage:focus-visible{outline-offset:-4px}
.vstage::before,.vstage::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:6;pointer-events:none}
.vstage::before{left:0;background:linear-gradient(90deg,var(--forest),transparent)}.vstage::after{right:0;background:linear-gradient(-90deg,var(--forest),transparent)}
.vtrack{display:flex;align-items:flex-start;gap:30px;will-change:transform;transition:transform .85s var(--ease);width:max-content}
.vstage.drag .vtrack{transition:none}
.vcard{width:var(--cw);flex:none;transform:scale(.82);opacity:.42;transition:transform .85s var(--ease),opacity .6s;transform-origin:50% calc(var(--ch) / 2);position:relative}
.vcard.near{opacity:.72;transform:scale(.9)}
.vcard.act{opacity:1;transform:scale(1.06);z-index:3}
.vc-frame{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#0a1a12;border:1px solid var(--line);transition:border-color .5s,box-shadow .6s}
.vcard.act .vc-frame{border-color:var(--lime);box-shadow:0 0 0 1px rgba(181,232,117,.5),0 0 46px -6px rgba(181,232,117,.38),0 40px 70px -24px rgba(0,0,0,.85)}
.vcard:not(.act) .vc-frame{box-shadow:0 30px 50px -26px rgba(0,0,0,.7);cursor:pointer}
.vc-poster,.vc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#07130d;display:block}
.vc-poster{transition:opacity .5s;z-index:1}
.vc-media{position:absolute;inset:0;z-index:2}
.vc-frame.live .vc-poster{opacity:0}
.vc-frame::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(180deg,transparent,rgba(6,16,11,.85));z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}
.vcard.act .vc-frame::after{opacity:1}
.vc-cat{position:absolute;left:12px;top:12px;z-index:4;background:rgba(16,41,30,.82);backdrop-filter:blur(8px);border:1px solid var(--line);color:var(--ow);font-size:.7rem;font-weight:700;padding:5px 11px;border-radius:999px;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-big{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;border-radius:50%;background:rgba(181,232,117,.94);border:0;z-index:5;display:grid;place-items:center;opacity:0;pointer-events:none;transform:scale(.8);transition:opacity .3s,transform .4s var(--ease);box-shadow:0 10px 40px -8px rgba(181,232,117,.6)}
.vc-big svg{width:24px;height:24px;fill:var(--ink);margin-left:3px}
.vcard.act:not(.playing) .vc-big{opacity:1;pointer-events:auto;transform:none}
.vcard:not(.act) .vc-big{opacity:.0}
.vcard:not(.act) .vc-frame::before{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(16,41,30,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4.5l9 5.5-9 5.5z' fill='%23B5E875'/%3E%3C/svg%3E") center/20px no-repeat;border:1px solid var(--line);z-index:5}
.vc-bar{position:absolute;left:12px;right:12px;bottom:56px;height:3px;border-radius:3px;background:rgba(245,248,240,.22);z-index:5;overflow:hidden;opacity:0;transition:opacity .4s}
.vc-bar i{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 10px var(--lime)}
.vc-ctrls{position:absolute;left:8px;right:12px;bottom:6px;z-index:5;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .4s}
.vcard.act .vc-bar,.vcard.act .vc-ctrls{opacity:1}
.vcard:not(.act) .vc-ctrls,.vcard:not(.act) .vc-bar{pointer-events:none}
.vc-ctrls button{width:44px;height:44px;border-radius:50%;border:0;background:none;display:grid;place-items:center}
.vc-ctrls button:hover{background:rgba(245,248,240,.12)}
.vc-ctrls svg{width:20px;height:20px;stroke:var(--ow);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vc-ctrls .pp .i-play{display:none}.vcard:not(.playing) .pp .i-play{display:block}.vcard:not(.playing) .pp .i-pause{display:none}
.vc-ctrls .snd2 .i-on{display:none}.vc-ctrls.on .snd2 .i-on{display:block}.vc-ctrls.on .snd2 .i-off{display:none}
.vc-dur{margin-left:auto;font:700 .74rem ui-monospace,Menlo,Consolas,monospace;color:var(--ow);opacity:.9}
.vc-info{padding:16px 6px 0;text-align:center;opacity:0;transition:opacity .5s;min-height:92px}
.vcard.act .vc-info{opacity:1}
.vc-info h3{margin:0 0 3px;font-size:1.05rem;letter-spacing:-.015em}
.vc-info p{margin:0 0 10px;color:var(--muted);font-size:.8rem;font-weight:600}
.vcard:not(.act) .vc-cta{pointer-events:none}
.vcard.err .vc-frame::after{opacity:1}
.vc-err{position:absolute;inset:auto 12px 70px;z-index:6;background:rgba(16,41,30,.92);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.78rem;text-align:center}

.vctl{display:flex;align-items:center;justify-content:center;gap:18px;margin:8px auto 0;max-width:560px}
.varrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(245,248,240,.04);display:grid;place-items:center;flex:none;transition:background .25s,border-color .25s,transform .2s}
.varrow:hover{border-color:var(--lime);background:rgba(181,232,117,.12)}.varrow:active{transform:scale(.92)}
.varrow svg{width:18px;height:18px;stroke:var(--ow);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vprog{flex:1;display:flex;flex-direction:column;gap:8px;align-items:center;min-width:0}
.vcnt{font:700 .8rem ui-monospace,Menlo,Consolas,monospace;color:var(--lime)}
.vprog .vbar{width:100%;height:3px;border-radius:3px;background:rgba(245,248,240,.14);overflow:hidden}
.vprog .vbar i{display:block;height:100%;width:100%;background:var(--lime);transform-origin:0 50%;transition:transform .8s var(--ease)}
.vpips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:6px}
.vpips b{width:6px;height:6px;border-radius:50%;background:rgba(245,248,240,.25);transition:all .4s var(--ease)}
.vpips b.on{width:22px;border-radius:4px;background:var(--lime)}
.vhint{min-height:1.4em;text-align:center;font-size:.82rem;color:var(--muted);margin:10px 0 0}
.vempty{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;padding:24px;z-index:7;cursor:default}
.vempty[hidden],.vloading[hidden]{display:none}
.vempty b{font-size:1.3rem}.vempty span{color:var(--muted);max-width:44ch}
.vloading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);z-index:7}

.vp-all{padding:50px var(--pad) 60px;background:linear-gradient(180deg,#0d2218,#0a1d14);border-top:1px solid var(--line-soft)}
.vp-all h2{font-size:clamp(1.7rem,3.4vw,2.6rem);letter-spacing:-.035em;margin:0 0 .25em}
.sub2{color:var(--muted);margin:0 0 22px}
.rgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.rgrid button{display:block;width:100%;text-align:left;border:0;background:none;padding:0;border-radius:16px}
.rgrid .th{display:block;aspect-ratio:9/16;border-radius:16px;overflow:hidden;position:relative;border:1px solid var(--line);background:#0a1a12;transition:border-color .3s,transform .5s var(--ease),box-shadow .4s}
.rgrid img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.rgrid button:hover .th,.rgrid button:focus-visible .th{border-color:var(--lime);transform:translateY(-4px);box-shadow:0 24px 40px -20px rgba(0,0,0,.8)}
.rgrid button:hover img{transform:scale(1.05)}
.rgrid .th::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(6,16,11,.9))}
.rgrid .d{position:absolute;right:8px;top:8px;z-index:2;background:rgba(16,41,30,.85);font:700 .68rem ui-monospace,Menlo,monospace;padding:3px 8px;border-radius:999px}
.rgrid .tt{position:absolute;left:10px;right:10px;bottom:9px;z-index:2;font-weight:700;font-size:.82rem;line-height:1.2}
.rgrid .tt small{display:block;color:var(--lime);font-size:.68rem;margin-top:2px}
.rgrid li.cur .th{border-color:var(--lime);box-shadow:0 0 28px -8px rgba(181,232,117,.5)}
.vp-cta{padding:84px var(--pad);text-align:center;background:var(--emerald)}
.vp-cta h2{font-size:clamp(2rem,5vw,4rem);letter-spacing:-.04em;margin:0 0 .2em}.vp-cta h2 .serif{color:var(--lime)}
.vp-cta p{color:var(--muted);font-size:1.15rem;margin:0 0 26px}

@media (max-width:760px){
  .vstage{--cw:min(70vw,300px);--ch:calc(var(--cw)*16/9);min-height:calc(var(--ch) + 230px)}
  .vtrack{gap:16px}
  .vcard.act{transform:scale(1.03)}
  .vp-hero{padding-top:calc(var(--hh) + 30px)}
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.vp-hero h1 .l>span{transform:none}.crumbs,.vp-hero .sub,.vp-hero .lead2{opacity:1;animation:none}.vp-bg svg,.vp-bg i{animation:none}.vtrack,.vcard{transition-duration:.01ms}}

/* ---- home-page embedding ---- */
.vhome{position:relative;padding:90px var(--pad) 14px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--forest),var(--forest))}
.vhome h2{font-size:clamp(2.2rem,5.2vw,5rem);line-height:1;letter-spacing:-.035em;font-weight:800;margin:0 0 .3em}
.vhome h2 .serif{color:var(--lime)}
.vhome .vsub{font-size:clamp(1.05rem,1.6vw,1.4rem);color:var(--muted);margin:0}
.vhome-cta{padding:10px var(--pad) 70px;text-align:center;background:#0a1d14}
.vhome-cta .wrap{display:flex;justify-content:center}
.vp-main{position:relative;z-index:1}