/*
Space Vanta Theme 1.0 · Privilege · VISUAL EFFECTS
File: public/privilege/privilege-fx.css

RESPONSIBILITY: decoration and motion ONLY (ambient field, emblem, specular light, title metal,
reveal, view transition, coming-soon panel, draw sequence). No layout, no state.
Everything here is gated by .is-fx (added by privilege-fx.js); without it the page still renders fully.
Layout / components / responsive live in privilege.css.
*/

/* ---------- title: brushed-metal sheen + blue slice ---------- */
.sv-privilege__title:not(.is-split){background:linear-gradient(100deg,#6f7780,#eceff2 30%,#6a727c 50%,#f7f8fa 70%,#7e8690);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pvsheen 8s linear infinite}
.sv-privilege__title:not(.is-split) .sv-privilege__t--cut{background:linear-gradient(100deg,var(--pv-blue),#8fd0ff);-webkit-background-clip:text;background-clip:text;color:transparent;clip-path:polygon(0 38%,100% 30%,100% 62%,0 70%);animation:pvcut 6s ease-in-out infinite}

/* ---------- static depth: grain, light, crop marks, specular, brushed edge ---------- */
.sv-privilege__field::after{content:"";position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
.sv-privilege__field::before{content:"";position:absolute;left:0;top:0;width:640px;height:640px;background:radial-gradient(circle,rgba(47,123,255,.14),transparent 65%);transform:translate3d(calc(var(--lx-p,600px) - 320px),calc(var(--ly-p,260px) - 320px),0);will-change:transform}
[data-pv-view]::before{content:"";position:absolute;inset:16px calc(var(--pv-pad) - 14px);pointer-events:none;
background:
 linear-gradient(var(--pv-blue),var(--pv-blue)) 0 0/16px 1px no-repeat,linear-gradient(var(--pv-blue),var(--pv-blue)) 0 0/1px 16px no-repeat,
 linear-gradient(var(--pv-blue),var(--pv-blue)) 100% 0/16px 1px no-repeat,linear-gradient(var(--pv-blue),var(--pv-blue)) 100% 0/1px 16px no-repeat,
 linear-gradient(var(--pv-blue),var(--pv-blue)) 0 100%/16px 1px no-repeat,linear-gradient(var(--pv-blue),var(--pv-blue)) 0 100%/1px 16px no-repeat,
 linear-gradient(var(--pv-blue),var(--pv-blue)) 100% 100%/16px 1px no-repeat,linear-gradient(var(--pv-blue),var(--pv-blue)) 100% 100%/1px 16px no-repeat;opacity:.45}
.sv-privilege__bubble::before,.sv-privilege__prize::before,.sv-privilege__note::before,.sv-privilege__member::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:radial-gradient(260px circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.8),transparent 62%);opacity:0;transition:opacity .4s}
.sv-privilege__bubble:hover::before,.sv-privilege__prize:hover::before,.sv-privilege__note:hover::before,.sv-privilege__member:hover::before{opacity:1}
.sv-privilege__bubble::after,.sv-privilege__prize::after,.sv-privilege__note::after,.sv-privilege__member::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(100deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px)}
.sv-privilege__note,.sv-privilege__member{position:relative}
.sv-privilege__bubble.is-on::after{box-shadow:inset 0 0 0 1px rgba(47,123,255,.0)}
.sv-privilege__btn{position:relative;overflow:hidden}
.sv-privilege__btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(160,200,255,.55) 50%,transparent 65%);transform:translateX(-130%)}
.sv-privilege__btn:hover::after{transform:translateX(130%);transition:transform .8s}

/* ---------- emblem: the logo's shards, splitting and re-forming ---------- */
.sv-privilege__emblem{position:absolute;left:50%;top:50%;width:min(92vmin,780px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;z-index:-1;opacity:.4}
.sv-privilege__emblem svg{width:100%;height:100%;overflow:visible;}
.sv-privilege__emblem polygon{stroke:rgba(47,123,255,.7);stroke-width:.8;transform:translate(calc(var(--k,0)*var(--vx)*1px),calc(var(--k,0)*var(--vy)*1px)) rotate(calc(var(--k,0)*var(--vr)*1deg));transform-origin:200px 200px}
.sv-privilege__emblem polygon:nth-child(odd){fill:url(#pvm1)}
.sv-privilege__emblem polygon:nth-child(even){fill:url(#pvm2)}
.sv-privilege__emblem .edge{filter:drop-shadow(0 0 6px rgba(47,123,255,.9))}

/* ---------- reveal (staggered) ---------- */
.sv-privilege.is-fx .sv-privilege__rv{opacity:0;transform:translateY(22px);transition:opacity .9s calc(var(--i,0)*.08s),transform .9s calc(var(--i,0)*.08s) cubic-bezier(.2,.8,.2,1)}
.sv-privilege.is-fx .sv-privilege__rv.is-in{opacity:1;transform:none}
.sv-privilege__decode{font-variant-numeric:tabular-nums}

/* ---------- ambient field ---------- */
/* ---- field: static depth + dynamic split ---- */
.sv-privilege__field{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(900px 620px at 14% 6%,rgba(255,216,172,.42),transparent 62%),radial-gradient(800px 620px at 92% 38%,rgba(255,196,168,.24),transparent 62%),radial-gradient(1000px 720px at 42% 104%,rgba(240,226,200,.55),transparent 62%)}
.sv-privilege__grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(var(--pv-line) 1px,transparent 1px),linear-gradient(90deg,var(--pv-line) 1px,transparent 1px);background-size:72px 72px;-webkit-mask:radial-gradient(ellipse at 50% 20%,#000,transparent 75%);mask:radial-gradient(ellipse at 50% 20%,#000,transparent 75%)}
.sv-privilege__axis{position:absolute;background:linear-gradient(var(--pv-blue),transparent);opacity:.35}
.sv-privilege__axis--v{left:50%;top:0;bottom:0;width:1px}
.sv-privilege__axis--h{top:14%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--pv-blue),transparent)}
.sv-privilege__scan{position:absolute;left:0;right:0;height:140px;top:-140px;background:linear-gradient(transparent,rgba(47,123,255,.055),transparent);animation:pvscan 16s linear infinite}
@keyframes pvscan{to{transform:translateY(calc(100vh + 140px))}}
@keyframes pvsheen{to{background-position:-250% 0}}
@keyframes pvcut{0%,100%{transform:translateX(0);clip-path:polygon(0 38%,100% 30%,100% 62%,0 70%)}45%{transform:translateX(.05em);clip-path:polygon(0 20%,100% 36%,100% 50%,0 40%)}55%{transform:translateX(-.05em);clip-path:polygon(0 56%,100% 48%,100% 80%,0 72%)}}
.sv-privilege__art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(110,170,255,.5) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.sv-privilege__prize.is-center .sv-privilege__art::after{animation:pvshine 5s infinite}
@keyframes pvshine{40%,100%{transform:translateX(120%)}}
/* ================= v3: one view at a time ================= */
/* coming-soon panel */
.sv-privilege__devno{font-size:72px;line-height:1;font-weight:500;background:var(--pv-graphite);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(47,123,255,.4))}
.sv-privilege__devstat{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.22em;color:var(--pv-blue)}
.sv-privilege__devstat::before{content:"";width:6px;height:6px;background:var(--pv-blue);box-shadow:0 0 10px var(--pv-blue);animation:pvblink 1.2s steps(2) infinite}
@keyframes pvblink{50%{opacity:.15}}
.sv-privilege__devbar{position:relative;width:100%;height:2px;background:var(--pv-line);overflow:hidden}
.sv-privilege__devbar::after{content:"";position:absolute;top:0;bottom:0;width:34%;background:linear-gradient(90deg,transparent,var(--pv-blue),transparent);animation:pvbar 1.8s ease-in-out infinite}
@keyframes pvbar{from{left:-34%}to{left:100%}}

/* ================= DRAW SEQUENCE (members) ================= */
.sv-privilege__draw{position:fixed;inset:0;z-index:10000;display:grid;grid-template-rows:auto 1fr auto;color:#fff;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#1d2838 0,#0a0d13 72%);opacity:0;animation:pvin .5s forwards}
@keyframes pvin{to{opacity:1}}
.sv-privilege__draw::before{content:"";position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(120,170,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.16) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:radial-gradient(circle at 50% 45%,#000,transparent 70%);mask:radial-gradient(circle at 50% 45%,#000,transparent 70%)}
.sv-privilege__dhud{position:relative;display:flex;justify-content:space-between;padding:calc(20px + env(safe-area-inset-top,0px)) 24px 0;font-size:11px;letter-spacing:.26em;color:#9fb4d4}
.sv-privilege__dhud [data-d-status]{color:#fff}
.sv-privilege__dstage{position:relative;display:grid;place-items:center;perspective:1100px}
.sv-privilege__dwrap{position:relative;width:0;height:0;transform-style:preserve-3d;animation:pvring .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes pvring{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
.sv-privilege__dring{position:relative;width:0;height:0;transform-style:preserve-3d}
.sv-privilege__draw.is-reveal .sv-privilege__dring{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.sv-privilege__face{position:absolute;left:0;top:0;height:232px;margin-top:-116px;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;backface-visibility:hidden;-webkit-backface-visibility:hidden;color:var(--pv-text);background:var(--pv-glass);border:1px solid #fff;transition:opacity .5s,scale .7s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.sv-privilege__face .sv-privilege__art{inset:8px 8px 74px}
.sv-privilege__face h3{position:relative;font-size:14px;font-weight:500}
.sv-privilege__face span{position:relative;font-size:10px;letter-spacing:.14em;color:var(--pv-blue)}
.sv-privilege__draw.is-spin .sv-privilege__face{filter:blur(1.3px)}
.sv-privilege__face.is-front{box-shadow:0 0 0 1px var(--pv-blue),0 0 34px rgba(47,123,255,.75)}
.sv-privilege__draw.is-reveal .sv-privilege__face{opacity:.1}
.sv-privilege__draw.is-reveal .sv-privilege__face.is-win{opacity:1;scale:1.2;box-shadow:0 0 0 1px var(--pv-blue),0 0 70px rgba(47,123,255,.9)}
.sv-privilege__dcore{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px;border-radius:50%;background:radial-gradient(circle,rgba(47,123,255,.7),transparent 70%);animation:pvcore 1.6s ease-in-out infinite alternate}
@keyframes pvcore{to{transform:scale(1.5);opacity:.5}}
.sv-privilege__dbeam{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,#8fc0ff,transparent);opacity:0}
.sv-privilege__draw.is-spin .sv-privilege__dbeam{opacity:.9;animation:pvbeam 1.1s linear infinite}
@keyframes pvbeam{from{transform:translateY(-130px)}to{transform:translateY(130px)}}
.sv-privilege__dshard{position:absolute;left:50%;top:50%;width:84px;height:64px;margin:-32px -42px;background:var(--pv-metal);filter:drop-shadow(0 0 12px rgba(47,123,255,.8));animation:pvconv .85s cubic-bezier(.5,0,.2,1) both}
.sv-privilege__dshard:nth-of-type(odd){clip-path:polygon(0 100%,50% 0,100% 70%)}
.sv-privilege__dshard:nth-of-type(even){clip-path:polygon(0 20%,100% 0,70% 100%)}
@keyframes pvconv{from{transform:translate(var(--sx),var(--sy)) rotate(var(--r));opacity:1}80%{opacity:1}to{transform:translate(0,0) scale(.1);opacity:0}}
.sv-privilege__draw.is-reveal .sv-privilege__dshard{animation:pvburst 1s cubic-bezier(.1,.7,.2,1) both}
@keyframes pvburst{from{transform:translate(0,0) scale(.2);opacity:1}to{transform:translate(var(--bx),var(--by)) rotate(var(--r)) scale(1.1);opacity:0}}
.sv-privilege__dflash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#fff,rgba(47,123,255,.6) 40%,transparent 70%);opacity:0;pointer-events:none}
.sv-privilege__draw.is-reveal .sv-privilege__dflash{animation:pvflash .8s ease-out}
@keyframes pvflash{0%{opacity:.95}100%{opacity:0}}
.sv-privilege__dresult{position:relative;text-align:center;padding:0 24px calc(32px + env(safe-area-inset-bottom,0px));opacity:0;transform:translateY(24px);pointer-events:none}
.sv-privilege__draw.is-reveal .sv-privilege__dresult{opacity:1;transform:none;pointer-events:auto;transition:opacity .7s .45s,transform .7s .45s}
.sv-privilege__dresult p{margin:6px auto 18px;max-width:28em;color:#9fb4d4;font-size:13px}
.sv-privilege__dresult h2{font-size:clamp(26px,5vw,40px);font-weight:500;line-height:1.1}
.sv-privilege__dresult .sv-privilege__eyebrow{color:#7fb0ff;margin:0}
@media (max-width:767px){
 .sv-privilege__face{height:196px;margin-top:-98px}
 .sv-privilege__face .sv-privilege__art{inset:8px 8px 66px}
 .sv-privilege__dcore{width:120px;height:120px;margin:-60px}
 .sv-privilege__draw.is-reveal .sv-privilege__face.is-win{scale:1.12}
}

/* ---------- view transition: three shard strips ---------- */
.sv-privilege__wipe{position:fixed;inset:0;z-index:9000;pointer-events:none}
.sv-privilege__wipe i{position:absolute;inset:0;clip-path:polygon(-40% 0,-40% 0,-60% 100%,-60% 100%)}
.sv-privilege__wipe i:nth-child(1){background:linear-gradient(115deg,#d9cdbd,#f3ece0)}
.sv-privilege__wipe i:nth-child(2){background:linear-gradient(115deg,#2F7BFF,#8fd0ff)}
.sv-privilege__wipe i:nth-child(3){background:linear-gradient(115deg,#1d2430,#4f565f 70%,#2a2f35)}
.sv-privilege__wipe.is-run i{animation:pvwipe .8s cubic-bezier(.7,0,.3,1) both}
.sv-privilege__wipe.is-run i:nth-child(2){animation-delay:.07s}
.sv-privilege__wipe.is-run i:nth-child(3){animation-delay:.14s}
@keyframes pvwipe{0%{clip-path:polygon(-40% 0,-40% 0,-60% 100%,-60% 100%)}48%,52%{clip-path:polygon(-40% 0,140% 0,120% 100%,-60% 100%)}100%{clip-path:polygon(140% 0,140% 0,120% 100%,120% 100%)}}

/* ---------- draw sequence extras ---------- */
.sv-privilege__ddial{position:absolute;left:50%;top:50%;width:min(88vmin,660px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(rgba(143,192,255,.55) 0 .45deg,transparent .45deg 6deg);-webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 67%,transparent 68%);mask:radial-gradient(circle,transparent 63%,#000 64%,#000 67%,transparent 68%);animation:pvdial 14s linear infinite}
.sv-privilege__ddial+.sv-privilege__ddial{width:min(66vmin,500px);animation-direction:reverse;opacity:.7}
.sv-privilege__draw.is-spin .sv-privilege__ddial{animation-duration:2.2s}
@keyframes pvdial{to{rotate:360deg}}
.sv-privilege__dhud [data-d-hex]{font-variant-numeric:tabular-nums;color:#7fb0ff}
.sv-privilege__draw.is-reveal .sv-privilege__dresult h2{animation:pvchroma .9s ease-out}
@keyframes pvchroma{0%{text-shadow:-5px 0 rgba(255,70,130,.7),5px 0 rgba(70,210,255,.7);transform:translateX(3px)}100%{text-shadow:0 0 0 transparent;transform:none}}
.sv-privilege__draw.is-spin .sv-privilege__dstage::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}


/* =====================================================================
   v4 · TITLE: per-letter metal, traveling sheen, proximity lift, glitch cuts, assemble
   ===================================================================== */
.sv-privilege__title.is-split{position:relative;white-space:nowrap}
.sv-privilege__title .l{position:relative;display:inline-block;white-space:pre;color:transparent;
 background:linear-gradient(100deg,#4d545c 0%,#9aa1a9 20%,#f2f4f6 34%,#6b727a 50%,#444a52 70%,#8d949c 85%,#4d545c 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
 animation:pvletter 9s linear infinite;animation-delay:calc(var(--li,0)*.16s);
 transform:translate3d(0,calc(var(--p,0)*-14px),0) rotate(calc(var(--p,0)*var(--lr,0)*1deg));
 filter:drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 3px 5px rgba(74,54,36,.2));transition:transform .25s cubic-bezier(.2,.8,.2,1)}
@keyframes pvletter{0%{background-position:130% 0}22%,100%{background-position:-130% 0}}
.sv-privilege__title .l::before,.sv-privilege__title .l::after{content:attr(data-c);position:absolute;left:0;top:0;white-space:pre;opacity:0;pointer-events:none}
.sv-privilege__title .l::after{color:transparent;background:linear-gradient(100deg,var(--pv-blue),#9fd6ff);-webkit-background-clip:text;background-clip:text;clip-path:polygon(0 38%,100% 30%,100% 62%,0 70%)}
.sv-privilege__title .l::before{color:rgba(255,70,130,.3);mix-blend-mode:multiply;clip-path:polygon(0 12%,100% 0,100% 40%,0 52%)}
.sv-privilege__title .l.is-cut::after{animation:pvlcut .46s steps(1,end) both}
.sv-privilege__title .l.is-cut::before{animation:pvlcut2 .46s steps(1,end) both}
@keyframes pvlcut{0%{opacity:1;translate:.08em 0;clip-path:polygon(0 22%,100% 34%,100% 52%,0 40%)}34%{opacity:1;translate:-.07em 0;clip-path:polygon(0 58%,100% 46%,100% 82%,0 70%)}67%{opacity:1;translate:.04em 0;clip-path:polygon(0 8%,100% 0,100% 28%,0 36%)}100%{opacity:0;translate:0 0}}
@keyframes pvlcut2{0%{opacity:1;translate:-.05em 0}50%{opacity:1;translate:.05em 0}100%{opacity:0;translate:0 0}}
.sv-privilege__title.is-assemble .l{animation:pvletter 9s linear infinite calc(var(--li,0)*.16s),pvlin 1s cubic-bezier(.2,.8,.2,1) calc(var(--li,0)*.07s) both}
@keyframes pvlin{from{translate:calc(var(--lx,0)*1px) calc(var(--ly,0)*1px);rotate:calc(var(--lrot,0)*1deg);opacity:0;filter:blur(10px)}to{translate:0 0;rotate:0deg;opacity:1;filter:blur(0)}}
.sv-privilege__halo{position:absolute;left:50%;top:50%;width:min(86vw,820px);aspect-ratio:2/1;translate:-50% -50%;z-index:-1;pointer-events:none;filter:blur(48px);opacity:.8;
 background:conic-gradient(from 0deg,rgba(47,123,255,0),rgba(47,123,255,.42),rgba(255,214,176,.6),rgba(47,123,255,0) 62%);border-radius:46% 54% 60% 40%/50% 40% 60% 50%;animation:pvhalo 18s linear infinite;will-change:transform}
@keyframes pvhalo{50%{scale:1.12 .9}to{rotate:360deg}}

/* =====================================================================
   v4 · PRIZE RAIL: floating spatial scroll (driven by --s signed distance, --f focus 0..1 from privilege.js)
   ===================================================================== */
.sv-privilege.is-fx .sv-privilege__prize{
 transform:perspective(900px) translate3d(calc(var(--s,0)*-34px),0,calc(var(--f,0)*90px - 40px)) rotateY(calc(var(--s,0)*-32deg)) scale(calc(.86 + var(--f,0)*.18));
 opacity:calc(.42 + var(--f,0)*.58);transition:box-shadow .5s;box-shadow:0 34px 44px -28px rgba(74,54,36,.5),inset 0 1px 0 #fff}
.sv-privilege.is-fx .sv-privilege__prize.is-near{animation:pvbob 7s ease-in-out infinite;animation-delay:calc(var(--bi,0)*-1.6s)}
.sv-privilege.is-fx .sv-privilege__prize.is-center{z-index:12;box-shadow:0 0 0 1px rgba(47,123,255,.55),0 0 46px -6px rgba(47,123,255,.7),0 44px 50px -26px rgba(74,54,36,.55),inset 0 1px 0 #fff}
.sv-privilege.is-fx .sv-privilege__prize:nth-child(4n+2){--bi:1}.sv-privilege.is-fx .sv-privilege__prize:nth-child(4n+3){--bi:2}.sv-privilege.is-fx .sv-privilege__prize:nth-child(4n){--bi:3}
@keyframes pvbob{50%{translate:0 -11px}}
.sv-privilege.is-fx .sv-privilege__rail{perspective:1400px}
.sv-privilege__prog{display:flex;gap:6px;justify-content:center;margin-top:2px}
.sv-privilege__prog i{width:14px;height:2px;background:var(--pv-mute);opacity:.3;transition:width .35s,opacity .35s,box-shadow .35s,background .35s}
.sv-privilege__prog i.is-on{width:38px;opacity:1;background:var(--pv-blue);box-shadow:0 0 10px var(--pv-blue)}
.sv-privilege__prog.is-bump i.is-on{animation:pvtickbar .4s ease-out}
@keyframes pvtickbar{from{transform:scaleY(4)}to{transform:none}}

/* ---- selected prize: strong signal ---- */
.sv-privilege.is-fx .sv-privilege__prize.is-won{z-index:30;scale:1.1;opacity:1;animation:pvbob 7s ease-in-out infinite,pvwon 1.6s ease-in-out infinite alternate}
@keyframes pvwon{from{box-shadow:0 0 0 2px var(--pv-blue),0 0 40px -2px rgba(47,123,255,.7),inset 0 1px 0 #fff}to{box-shadow:0 0 0 2px #8fd0ff,0 0 84px 2px rgba(47,123,255,1),inset 0 1px 0 #fff}}
.sv-privilege__prize.is-won .sv-privilege__code::after{content:var(--won);margin-left:8px;padding:2px 8px;background:var(--pv-blue);color:#fff;letter-spacing:.14em;box-shadow:0 0 14px rgba(47,123,255,.9)}
.sv-privilege__railwrap.is-signal .sv-privilege__prize:not(.is-won){opacity:.2!important;filter:saturate(.2) blur(1.4px);transition:opacity .4s,filter .4s}
.sv-privilege__sig{position:absolute;inset:0;pointer-events:none;z-index:6}
.sv-privilege__ping{position:absolute;left:50%;top:var(--cy);width:var(--cw);height:var(--ch);margin:calc(var(--ch)/-2) 0 0 calc(var(--cw)/-2);border:1px solid rgba(47,123,255,.95);box-shadow:0 0 26px rgba(47,123,255,.6),inset 0 0 26px rgba(47,123,255,.3);animation:pvping 1.5s cubic-bezier(.15,.7,.2,1) both}
.sv-privilege__ping:nth-child(2){animation-delay:.2s}.sv-privilege__ping:nth-child(3){animation-delay:.4s}
@keyframes pvping{from{transform:scale(.9);opacity:1}to{transform:scale(2.5,2.1);opacity:0}}
.sv-privilege__sbeam{position:absolute;left:50%;top:-40%;bottom:-40%;width:calc(var(--cw)*1.2);margin-left:calc(var(--cw)*-.6);background:linear-gradient(90deg,transparent,rgba(120,180,255,.55) 50%,transparent);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);animation:pvbeamv 1.9s ease-out both}
@keyframes pvbeamv{0%{opacity:0;transform:scaleY(.1)}18%{opacity:1;transform:none}100%{opacity:0;transform:scaleX(1.6)}}
.sv-privilege__sshard{position:absolute;left:50%;top:var(--cy);width:34px;height:26px;margin:-13px -17px;background:var(--pv-metal);clip-path:polygon(0 100%,50% 0,100% 70%);filter:drop-shadow(0 0 8px rgba(47,123,255,.9));animation:pvsburst 1.2s cubic-bezier(.1,.7,.2,1) both}
@keyframes pvsburst{from{transform:translate(0,0) scale(.3);opacity:1}to{transform:translate(var(--bx),var(--by)) rotate(var(--r)) scale(1.1);opacity:0}}
.sv-privilege__edge{position:fixed;inset:0;z-index:8000;pointer-events:none;box-shadow:inset 0 0 140px rgba(47,123,255,.6),inset 0 0 0 2px rgba(143,208,255,.7);animation:pvedge 1.3s ease-out forwards}
@keyframes pvedge{from{opacity:1}to{opacity:0}}

/* =====================================================================
   v4 · FEEDBACK SIGNALS (touch has no hover): ripple, press, ready/busy, drag glow, nudge, chance tick
   ===================================================================== */
.sv-privilege__nav button,.sv-privilege__tabs button,.sv-privilege__ctrl>button,.sv-privilege__note-head{position:relative;overflow:hidden}
.sv-privilege__rip{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(47,123,255,.6),rgba(47,123,255,0) 62%);transform:scale(0);animation:pvrip .7s ease-out forwards}
@keyframes pvrip{to{transform:scale(1);opacity:0}}
.sv-privilege.is-fx .sv-privilege__nav button:active,.sv-privilege.is-fx .sv-privilege__tabs button:active,.sv-privilege.is-fx .sv-privilege__note-head:active{transform:scale(.97)}
.sv-privilege.is-fx .sv-privilege__prize:active .sv-privilege__art{filter:brightness(1.15)}
.sv-privilege__btn.is-ready{animation:pvready 2.2s ease-in-out infinite}
@keyframes pvready{0%,100%{filter:drop-shadow(0 0 0 rgba(47,123,255,0))}50%{filter:drop-shadow(0 0 14px rgba(47,123,255,.9))}}
.sv-privilege__btn.is-busy{background:repeating-linear-gradient(115deg,#4f565f 0 10px,#2a2f35 10px 20px);background-size:200% 100%;animation:pvbusy .8s linear infinite}
@keyframes pvbusy{to{background-position:-40px 0}}
.sv-privilege__bubble.is-drag{box-shadow:0 30px 50px -26px rgba(74,54,36,.45),0 0 0 1px rgba(47,123,255,calc(var(--dg,0)*.9)),0 0 calc(10px + var(--dg,0)*56px) rgba(47,123,255,calc(var(--dg,0)*.8)),inset 0 1px 0 #fff}
.sv-privilege__stage.is-nudge .sv-privilege__bubble.is-on{animation:pvnudge 1.3s ease-in-out 2}
@keyframes pvnudge{0%,100%{translate:0 0}30%{translate:-30px 0}60%{translate:20px 0}}
[data-pv-chances].is-tick{animation:pvtick .7s ease-out;color:var(--pv-blue)}
@keyframes pvtick{0%{transform:scale(1.5);text-shadow:0 0 18px rgba(47,123,255,1)}100%{transform:none;text-shadow:0 0 0 transparent}}
.sv-privilege__note.is-open{box-shadow:0 26px 46px -22px rgba(47,123,255,.5),inset 0 0 0 1px rgba(47,123,255,.35),inset 0 1px 0 #fff}
@media (max-width:767px){
 .sv-privilege.is-fx .sv-privilege__prize{transform:perspective(800px) translate3d(calc(var(--s,0)*-22px),0,calc(var(--f,0)*60px - 30px)) rotateY(calc(var(--s,0)*-26deg)) scale(calc(.84 + var(--f,0)*.2))}
 .sv-privilege__title .l{animation-duration:7s}
}


/* =====================================================================
   v5 · FLOATING / LAYERED / GEOMETRIC (primary DNA)
   ===================================================================== */
/* depth planes: faceted plates at three depths (--z), parallax by pointer + scroll, soft cast shadows */
.sv-privilege__plates{position:absolute;inset:0;pointer-events:none}
.sv-privilege__plate{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;opacity:calc(.3 + var(--z)*.52);will-change:transform;
 filter:drop-shadow(0 calc(6px + var(--z)*26px) calc(10px + var(--z)*20px) rgba(74,54,36,calc(.1 + var(--z)*.14)));
 transform:translate3d(calc(var(--mx,0)*var(--z)*70px),calc(var(--my,0)*var(--z)*46px + var(--sy,0)*var(--z)*-140px),0);
 animation:pvplate calc(9s + var(--z)*7s) ease-in-out infinite alternate;animation-delay:calc(var(--z)*-6s)}
.sv-privilege__plate svg{width:100%;height:100%;overflow:visible}
@keyframes pvplate{from{translate:0 0;rotate:calc(var(--rot,12deg)*-.5)}to{translate:0 calc(-12px - var(--z)*24px);rotate:calc(var(--rot,12deg)*.5)}}
/* orbits behind the intro: geometry with a travelling node */
.sv-privilege__orbit{position:absolute;left:50%;top:48%;width:min(125vmin,1060px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;z-index:-1;opacity:.75;transform:translate3d(calc(var(--mx,0)*-26px),calc(var(--my,0)*-18px),0)}
.sv-privilege__orbit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sv-privilege__orbit .o1{animation:pvorb 90s linear infinite}.sv-privilege__orbit .o2{animation:pvorb 150s linear infinite reverse}
.sv-privilege__orbit ellipse,.sv-privilege__orbit circle.ring{fill:none;stroke:rgba(133,124,114,.38);stroke-width:1;stroke-dasharray:2 7}
.sv-privilege__orbit .b{stroke:rgba(47,123,255,.4);stroke-dasharray:none}
.sv-privilege__orbit .node{fill:var(--pv-blue);filter:drop-shadow(0 0 6px rgba(47,123,255,.9))}
@keyframes pvorb{to{rotate:360deg}}
/* floor: cards float over a receding grid plane */
.sv-privilege__railwrap::before{content:"";position:absolute;left:-8%;right:-8%;bottom:40px;height:170px;pointer-events:none;background-image:linear-gradient(rgba(47,123,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(47,123,255,.2) 1px,transparent 1px);background-size:52px 52px;transform:perspective(420px) rotateX(68deg);transform-origin:50% 100%;-webkit-mask:radial-gradient(ellipse at 50% 100%,#000 0,transparent 68%);mask:radial-gradient(ellipse at 50% 100%,#000 0,transparent 68%);opacity:.85}
/* layered sheets under panels */
.sv-privilege__note,.sv-privilege__member{box-shadow:inset 0 1px 0 #fff,0 7px 0 -3px rgba(255,255,255,.7),0 8px 0 -3px rgba(120,96,70,.13),0 15px 0 -7px rgba(255,255,255,.45),0 16px 0 -7px rgba(120,96,70,.09),0 26px 40px -20px rgba(74,54,36,.38)}
.sv-privilege__note:hover{box-shadow:inset 0 1px 0 #fff,0 7px 0 -3px rgba(255,255,255,.7),0 8px 0 -3px rgba(120,96,70,.13),0 15px 0 -7px rgba(255,255,255,.45),0 16px 0 -7px rgba(120,96,70,.09),0 28px 46px -18px rgba(47,123,255,.42)}
/* faceted icons */
.sv-privilege__mark.has-icon{width:58px;height:58px;clip-path:none;background:none;filter:none;translate:calc(var(--tx,0)*14px) calc(var(--ty,0)*10px)}
.sv-privilege__mark svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 10px rgba(74,54,36,.28)) drop-shadow(0 0 8px rgba(47,123,255,.3))}
.sv-privilege__stage{transform-style:flat}
.sv-privilege__tag::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--pv-blue);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.sv-privilege__head::before{content:"";position:absolute;left:-5px;top:-2px;width:9px;height:9px;background:var(--pv-blue);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
@media (max-width:767px){.sv-privilege__plate:nth-child(n+4){display:none}.sv-privilege__railwrap::before{height:120px;bottom:30px}.sv-privilege__orbit{width:150vmin}}

@media (prefers-reduced-motion:reduce){.sv-privilege *{animation:none!important;transition-duration:.01s!important}.sv-privilege.is-fx .sv-privilege__rv{opacity:1;transform:none}}