/* 🎭 چهره‌ها — mobile first, cinematic */
.fx-body{background:var(--bg)}
.fx-body .nav:not(.solid) .logo,.fx-body .nav:not(.solid) .links a{color:#fff}
.fx-ph{display:block;width:100%;height:100%;background:#1a2236 center 18%/cover no-repeat;font-style:normal}
.fx-mono{display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,hsl(var(--h) 80% 70%),hsl(calc(var(--h) + 40) 60% 38%))}
.fx-mono b{font:400 clamp(18px,40%,46px)/1 var(--display);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3)}

/* ---------- hero ---------- */
.fx-hero{position:relative;overflow:hidden;padding:104px 0 46px;color:#fff;text-align:center;background:#060914;isolation:isolate}
.fx-wall{position:absolute;inset:-20% -10%;display:flex;gap:10px;justify-content:center;transform:rotate(-8deg) scale(1.08);opacity:0;transition:opacity 1.2s ease;z-index:-2}
.fx-wall.on{opacity:.5}
.fx-col{display:flex;flex-direction:column;gap:10px;width:clamp(78px,13vw,130px);flex:none;animation:fxUp var(--s) linear infinite;animation-direction:var(--dir)}
.fx-col i{display:block;aspect-ratio:3/4;border-radius:14px;background:#1a2236 center 20%/cover;filter:saturate(1.1)}
@keyframes fxUp{to{transform:translateY(-50%)}}
.fx-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(6,9,20,.55),rgba(6,9,20,.92) 70%),linear-gradient(180deg,rgba(6,9,20,.7),transparent 30%,transparent 60%,var(--bg) 100%)}
.fx-glow{position:absolute;inset:auto 0 -40% 0;height:80%;z-index:-1;background:radial-gradient(ellipse 50% 50% at 30% 50%,rgba(255,95,162,.28),transparent 70%),radial-gradient(ellipse 50% 50% at 70% 50%,rgba(61,180,242,.3),transparent 70%);filter:blur(10px)}
.fx-hero-in{position:relative}
.fx-kick{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.3px;padding:5px 14px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#ffd6ea}
.fx-title{margin:10px 0 2px;font:400 clamp(62px,16vw,128px)/1.05 var(--display);background:linear-gradient(100deg,#fff 20%,#FFB3D6 45%,#9EDCFF 70%,#fff 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxShine 7s ease-in-out infinite;filter:drop-shadow(0 8px 30px rgba(255,120,190,.25))}
@keyframes fxShine{50%{background-position:100% 0}}
.fx-sub{margin:0 auto;max-width:520px;font-size:clamp(13.5px,3.6vw,16px);color:rgba(255,255,255,.78);line-height:1.9}
.fx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:560px;margin:22px auto 0}
.fx-stats button,.fx-stats .sk{border:0;padding:10px 4px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);backdrop-filter:blur(8px);color:#fff;cursor:pointer;min-width:0;transition:transform .2s,background .2s}
.fx-stats .sk{height:60px}
.fx-stats button:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)}
.fx-stats b{display:block;font:400 clamp(18px,5vw,26px)/1.2 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-stats small{font-size:11px;color:rgba(255,255,255,.7)}
.fx-sbox{position:relative;max-width:560px;margin:16px auto 0;text-align:right}
.fx-sbox svg{position:absolute;right:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:#8fa3b6;pointer-events:none}
.fx-sbox input{width:100%;height:54px;border:0;border-radius:18px;padding:0 48px 0 16px;font:600 15px var(--font);color:var(--strong);background:var(--fg);box-shadow:0 18px 40px -16px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);outline:none}
.fx-sbox input:focus{box-shadow:0 18px 40px -16px rgba(0,0,0,.6),0 0 0 3px rgba(255,111,181,.45)}
.fx-drop{position:absolute;z-index:30;top:calc(100% + 8px);inset-inline:0;max-height:min(62vh,460px);overflow:auto;padding:8px;border-radius:18px;background:var(--fg);box-shadow:0 24px 60px -18px rgba(0,0,0,.6),0 0 0 1px var(--line);color:var(--text)}
.fx-drop h4{margin:6px 8px 4px;font-size:11px;color:var(--muted);font-weight:800}
.fx-drop a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:12px}
.fx-drop a:hover{background:var(--fg2)}
.fx-drop .fx-ph{width:40px;height:40px;flex:none;border-radius:11px}.fx-drop .fx-ph.rd{border-radius:50%}
.fx-drop span{min-width:0}.fx-drop b{display:block;color:var(--strong);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fx-drop small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-none{margin:10px;text-align:center;color:var(--muted)}

/* ---------- sections ---------- */
.fx-main{padding:6px 16px 40px}
.fx-main>section{margin-top:26px}
.fx-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.fx-h h2{margin:0;font:400 24px/1.3 var(--display);color:var(--strong)}.fx-h h2 span{font-size:18px}
.fx-h p{margin:0;font-size:12.5px;color:var(--muted)}
.fx-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;margin:0 -16px;padding-inline:16px;scrollbar-width:none}
.fx-rail::-webkit-scrollbar{display:none}

/* one voice, two faces */
.fx-vp{position:relative;flex:none;width:min(300px,80vw);display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 10px 80px;border-radius:24px;scroll-snap-align:start;background:linear-gradient(160deg,#1b1436,#0d1326 60%,#0c1f33);box-shadow:0 16px 34px -18px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.07);isolation:isolate}
.fx-vp-a,.fx-vp-b{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;box-shadow:0 10px 22px -12px rgba(0,0,0,.8)}
.fx-vp-a{grid-column:1;grid-row:1}.fx-vp-b{grid-column:2;grid-row:1}
.fx-vp-a .fx-ph,.fx-vp-b .fx-ph{background-position:center top;transition:transform .6s ease}
.fx-vp:hover .fx-ph{transform:scale(1.05)}
.fx-vp-a::after,.fx-vp-b::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(5,8,18,.9))}
.fx-vp-a em,.fx-vp-b em{position:absolute;z-index:1;bottom:8px;inset-inline:8px;font-style:normal;font-weight:800;font-size:12.5px;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px #000}
.fx-vp-mid{position:absolute;z-index:2;left:50%;bottom:42px;width:56px;height:56px;transform:translateX(-50%);border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 7px rgba(255,111,181,.45),0 10px 24px rgba(0,0,0,.6)}
.fx-vp-mid>.fx-ph{border-radius:50%}
.fx-wave{position:absolute;z-index:3;left:50%;top:-26px;transform:translateX(-50%);display:flex;gap:3px;align-items:flex-end;height:18px}
.fx-wave i{width:3px;height:30%;border-radius:2px;background:#FF8FC6;animation:fxEq 1s ease-in-out infinite}
.fx-wave i:nth-child(2){animation-delay:.15s}.fx-wave i:nth-child(3){animation-delay:.3s}.fx-wave i:nth-child(4){animation-delay:.45s}.fx-wave i:nth-child(5){animation-delay:.6s}
@keyframes fxEq{50%{height:100%}}
.fx-vp-t{position:absolute;z-index:2;bottom:12px;inset-inline:0;text-align:center;color:#fff;display:flex;justify-content:center;gap:6px;align-items:baseline}
.fx-vp-t small{display:block;font-size:10.5px;opacity:.7}.fx-vp-t b{font-size:14px}

/* podium */
.fx-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px;max-width:560px;margin:0 auto}
.fx-pod{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.fx-pod-f{position:relative;width:100%;aspect-ratio:3/4;border-radius:20px;overflow:visible}
.fx-pod-f>.fx-ph{border-radius:20px;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.fx-pod.p1 .fx-pod-f>.fx-ph{box-shadow:0 0 0 3px #FFC93C,0 18px 40px -12px rgba(255,201,60,.55)}
.fx-pod.p2 .fx-pod-f>.fx-ph{box-shadow:0 0 0 3px #C9D6E3}.fx-pod.p3 .fx-pod-f>.fx-ph{box-shadow:0 0 0 3px #E0A06A}
.fx-pod-f em{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-size:26px;font-style:normal;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.fx-pod b{margin-top:18px;font-size:13.5px;color:var(--strong);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-pod small{font-size:11.5px;color:var(--muted)}
.fx-pod.p2,.fx-pod.p3{padding-bottom:10px}
.fx-rk{list-style:none;margin:16px auto 0;padding:0;max-width:560px;counter-reset:r 3}
.fx-rk li{counter-increment:r}
.fx-rk a{display:grid;grid-template-columns:22px 40px minmax(0,1fr) auto;grid-template-areas:"n p b e" "n p s e";align-items:center;column-gap:10px;padding:8px 10px;border-radius:14px}
.fx-rk a::before{content:counter(r,persian);grid-area:n;font:400 18px var(--display);color:var(--muted);text-align:center}
.fx-rk a:hover{background:var(--fg)}
.fx-rk .fx-ph{grid-area:p;width:40px;height:40px;border-radius:12px}
.fx-rk b{grid-area:b;color:var(--strong);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fx-rk small{grid-area:s;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-rk em{grid-area:e;font-style:normal;font-size:12px;font-weight:800;color:#E2557F}

/* tabs */
.fx-tabs{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:20;display:flex;gap:2px;margin:30px 0 10px;padding:5px;border-radius:18px;background:color-mix(in srgb,var(--fg) 88%,transparent);backdrop-filter:blur(12px);box-shadow:0 10px 26px -16px rgba(0,0,0,.45),inset 0 0 0 1px var(--line);overflow-x:auto;scrollbar-width:none}
.fx-tabs::-webkit-scrollbar{display:none}
.fx-tabs button{position:relative;z-index:1;flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:none;padding:10px 12px;border-radius:13px;font:800 13.5px var(--font);color:var(--text);cursor:pointer;white-space:nowrap;transition:color .25s}
.fx-tabs button.on{color:#fff}
.fx-pill{position:absolute;left:0;top:5px;bottom:5px;border-radius:13px;background:linear-gradient(120deg,#FF5FA2,#8B6CFF 55%,#3DB4F2);box-shadow:0 8px 20px -8px rgba(139,108,255,.8);transition:transform .35s cubic-bezier(.3,1.3,.5,1),width .35s}
.fx-filter input{width:100%;height:42px;border:0;border-radius:13px;padding:0 14px;font:600 13.5px var(--font);color:var(--strong);background:var(--fg);box-shadow:inset 0 0 0 1px var(--line);outline:none;margin-bottom:14px}
.fx-filter input:focus{box-shadow:inset 0 0 0 2px var(--blue)}

/* grids */
.fx-grid{display:grid;gap:12px}
.fx-grid.g-c{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.fx-grid.g-va,.fx-grid.g-dir{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.fx-grid.g-studio{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.fx-ct,.fx-pt,.fx-st{animation:fxIn .45s cubic-bezier(.2,.8,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes fxIn{from{opacity:0;transform:translateY(12px) scale(.97)}}
.fx-ct{position:relative;display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#141b2e;box-shadow:0 12px 26px -16px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);transition:transform .3s,box-shadow .3s;isolation:isolate}
.fx-ct .fx-ph{transition:transform .6s ease}
.fx-ct:hover{transform:translateY(-4px);box-shadow:0 22px 34px -18px rgba(0,0,0,.8),0 0 0 2px var(--rc,rgba(255,255,255,.18))}
.fx-ct:hover .fx-ph{transform:scale(1.06)}
.fx-ct-sh{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,7,16,.94))}
.fx-ct-t{position:absolute;inset:auto 0 0 0;padding:10px 11px 11px;color:#fff}
.fx-ct-t b{display:block;font-size:14px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-ct-t small{display:block;font-size:11px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-gem{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:99px;font:800 10px var(--font);font-style:normal;color:#fff;background:color-mix(in srgb,var(--rc) 70%,rgba(0,0,0,.5));box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 14px var(--rc);backdrop-filter:blur(4px)}
.fx-gem::before{content:"◆ ";font-size:8px}
.fx-ct.is-main::after{content:"اصلی";position:absolute;top:8px;right:8px;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:800;color:#13202f;background:#FFD34D}
.only-main .fx-ct:not(.is-main){display:none}

/* people tiles */
.fx-pt{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 10px 14px;border-radius:20px;background:var(--fg);box-shadow:0 10px 24px -18px rgba(0,0,0,.5),inset 0 0 0 1px var(--line);transition:transform .3s,box-shadow .3s;min-width:0}
.fx-pt:hover{transform:translateY(-4px);box-shadow:0 20px 34px -20px rgba(0,0,0,.6),inset 0 0 0 1px color-mix(in srgb,var(--blue) 50%,var(--line))}
.fx-pt b{margin-top:10px;font-size:14px;color:var(--strong);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-pt small{font-size:11px;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-chip{margin-top:8px;font-size:11px;font-weight:800;padding:3px 10px;border-radius:99px;color:var(--blue-d);background:var(--blue-soft)}
.fx-fan{position:relative;width:132px;height:92px}
.fx-av{position:absolute;left:50%;bottom:0;width:84px;height:84px;transform:translateX(-50%);border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--fg),0 0 0 5px color-mix(in srgb,var(--blue) 60%,transparent);z-index:2}
.fx-av.sm{position:relative;left:auto;transform:none;width:64px;height:64px;margin-top:-34px}
.fx-fan-i{position:absolute;bottom:8px;left:50%;width:46px;height:62px;border-radius:12px;overflow:hidden;box-shadow:0 6px 14px -6px rgba(0,0,0,.6),0 0 0 2px var(--fg);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.fx-fan-i.k0{transform:translateX(-112%) rotate(-14deg)}.fx-fan-i.k1{transform:translateX(12%) rotate(14deg)}.fx-fan-i.k2{transform:translateX(-50%) translateY(-22px) scale(.9);z-index:1}
.fx-pt:hover .fx-fan-i.k0{transform:translateX(-135%) translateY(-6px) rotate(-22deg)}.fx-pt:hover .fx-fan-i.k1{transform:translateX(35%) translateY(-6px) rotate(22deg)}.fx-pt:hover .fx-fan-i.k2{transform:translateX(-50%) translateY(-34px) scale(.95)}
.fx-covers{position:relative;display:block;width:100%;height:84px}
.fx-covers i{position:absolute;top:0;left:50%;width:54px;aspect-ratio:2/3;border-radius:9px;background:#1a2236 center/cover;box-shadow:0 8px 16px -8px rgba(0,0,0,.6)}
.fx-covers i.k0{transform:translateX(-50%);z-index:2}.fx-covers i.k1{transform:translateX(-120%) rotate(-10deg) scale(.88)}.fx-covers i.k2{transform:translateX(20%) rotate(10deg) scale(.88)}
.fx-st{position:relative;display:block;border-radius:22px;overflow:hidden;padding:18px 16px 14px;background:radial-gradient(circle at 80% 0,hsl(var(--h) 70% 55% / .35),transparent 60%),var(--fg);box-shadow:0 10px 24px -18px rgba(0,0,0,.5),inset 0 0 0 1px var(--line);transition:transform .3s}
.fx-st:hover{transform:translateY(-4px)}
.fx-covers.big{height:120px}.fx-covers.big i{width:76px}
.fx-st:hover .fx-covers i.k1{transform:translateX(-135%) rotate(-14deg) scale(.88)}.fx-st:hover .fx-covers i.k2{transform:translateX(35%) rotate(14deg) scale(.88)}
.fx-covers i{transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.fx-st-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:12px}
.fx-st-t b{font-size:16px;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fx-st-t small{flex:none;font-size:12px;color:var(--muted)}

.fx-sk{display:block;border-radius:18px;height:200px;background:linear-gradient(90deg,rgba(127,127,127,.08),rgba(127,127,127,.17),rgba(127,127,127,.08));background-size:200% 100%;animation:fxSk 1.2s infinite}
.fx-sk.tall{aspect-ratio:3/4;height:auto}
@keyframes fxSk{to{background-position:-200% 0}}
.fx-end{display:flex;justify-content:center;padding:18px 0 10px}
.fx-more{border:0;border-radius:14px;padding:11px 26px;font:800 13.5px var(--font);color:var(--strong);background:var(--fg);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.fx-more.sm{padding:7px 16px;font-size:12px;margin-top:8px}
.fx-spin{width:24px;height:24px;border-radius:50%;border:3px solid var(--line);border-top-color:#FF5FA2;animation:fxSp .8s linear infinite}
@keyframes fxSp{to{transform:rotate(360deg)}}
.fx-empty{grid-column:1/-1;text-align:center;padding:36px 12px;color:var(--muted)}.fx-empty span{font-size:40px}.fx-empty b{display:block;font:400 22px var(--display);color:var(--strong);margin:6px 0}.fx-empty p{margin:0;font-size:13px}.fx-empty a{color:var(--blue)}
.fx-hero .fx-empty b{color:#fff}

/* ---------- detail head ---------- */
.fx-dh{position:relative;overflow:hidden;padding:84px 0 30px;color:#fff;background:#070a16;isolation:isolate;min-height:300px}
.fx-dh-bg{position:absolute;inset:-30px;z-index:-2;background:center 20%/cover;filter:blur(28px) saturate(1.4);opacity:.6;transform:scale(1.1)}
.fx-dh-bg.soft{opacity:.4}
.fx-dh-fade{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 60% at 50% 40%,transparent,rgba(7,10,22,.7)),linear-gradient(180deg,rgba(7,10,22,.4),transparent 40%,var(--bg))}
.fx-dh-fade.strong{background:linear-gradient(180deg,rgba(7,10,22,.75),rgba(7,10,22,.6) 50%,var(--bg))}
.fx-dh-in{position:relative;display:flex;align-items:flex-end;gap:22px}
.fx-dh-in.col{flex-direction:column;align-items:center;text-align:center;gap:14px}
.fx-back{position:absolute;top:-6px;right:16px;font-size:13px;font-weight:800;color:rgba(255,255,255,.85);padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.fx-dh-in.col .fx-back{position:static;align-self:flex-start}
.fx-ch .fx-dh-in{padding-top:40px}
.fx-por{position:relative;flex:none;width:clamp(150px,30vw,230px);aspect-ratio:3/4;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 2px rgba(255,255,255,.12);transition:transform .25s ease-out;transform-style:preserve-3d;--gx:50%;--gy:30%}
.fx-por.carded{box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 3px var(--rc),0 0 40px -6px var(--rc)}
.fx-por-sh{position:absolute;inset:0;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.28),transparent 45%);mix-blend-mode:overlay;pointer-events:none}
.fx-gem.big{font-size:11.5px;padding:4px 10px;top:10px;left:10px}
.fx-id{min-width:0;flex:1}
.fx-id.center{text-align:center}
.fx-rank{display:inline-block;font-size:12px;font-weight:800;padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(6px)}
.fx-rank small{opacity:.7;font-weight:600}
.fx-id h1{margin:8px 0 0;font:400 clamp(34px,8vw,62px)/1.15 var(--display);text-shadow:0 6px 24px rgba(0,0,0,.5);overflow-wrap:anywhere}
.fx-en{margin:2px 0 0;font-size:13.5px;color:rgba(255,255,255,.72)}.fx-en span{opacity:.8}
.fx-tag{margin:8px 0 0;font:400 20px var(--display);background:linear-gradient(90deg,#FFB3D6,#9EDCFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-acts{display:flex;gap:8px;margin-top:14px}
.fx-heart{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;padding:10px 16px;border-radius:14px;font:800 14px var(--font);color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);backdrop-filter:blur(8px);transition:background .25s,transform .15s}
.fx-heart:active{transform:scale(.96)}
.fx-heart .h{font-size:18px;line-height:1;transition:transform .3s}
.fx-heart b{padding:1px 8px;border-radius:99px;background:rgba(0,0,0,.25);font-size:12px}
.fx-heart.on{background:linear-gradient(120deg,#FF5FA2,#E2557F);box-shadow:0 10px 26px -8px rgba(255,95,162,.7)}
.fx-heart.pop .h{animation:fxPop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes fxPop{40%{transform:scale(1.7)}}
.fx-share{width:44px;border:0;border-radius:14px;color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);cursor:pointer;display:grid;place-items:center}
.fx-share svg{width:19px;height:19px}

/* ---------- detail body ---------- */
.fx-dm{padding:4px 16px 40px}
.fx-dm>section,.fx-dm>a{margin-top:24px}
.fx-voice{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:22px;overflow:hidden;color:#fff;background:linear-gradient(120deg,#2a1640,#13203f 60%,#0f2b44);box-shadow:0 18px 36px -20px rgba(80,40,140,.8)}
.fx-voice-av{position:relative;flex:none;width:64px;height:64px}
.fx-voice-av>.fx-ph{border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.fx-ring{position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(255,143,198,.6);animation:fxRing 2.2s ease-out infinite}
@keyframes fxRing{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}}
.fx-voice-t{min-width:0;flex:1}
.fx-voice-t small{display:block;font-size:11.5px;opacity:.7}.fx-voice-t b{display:block;font:400 22px/1.3 var(--display)}.fx-voice-t em{display:block;font-style:normal;font-size:11.5px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-eq{display:flex;gap:3px;align-items:center;height:30px}
.fx-eq i{width:3px;height:30%;border-radius:2px;background:linear-gradient(#FF8FC6,#9EDCFF);animation:fxEq .9s ease-in-out infinite}
.fx-eq i:nth-child(2n){animation-delay:.2s}.fx-eq i:nth-child(3n){animation-delay:.35s}.fx-eq i:nth-child(4n){animation-delay:.5s}
.fx-go{font-size:20px;opacity:.6}
.fx-deck{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;padding:14px 16px 18px;margin:0 -16px;scrollbar-width:none}
.fx-deck::-webkit-scrollbar{display:none}
.fx-dk{position:relative;flex:none;width:132px;aspect-ratio:3/4;border-radius:18px;overflow:hidden;scroll-snap-align:start;margin-inline-start:-26px;box-shadow:-10px 10px 24px -12px rgba(0,0,0,.7),0 0 0 2px var(--bg);transform:rotate(calc((var(--i) - 1) * 0deg));transition:transform .35s cubic-bezier(.3,1.4,.5,1),margin .35s;z-index:calc(50 - var(--i))}
.fx-dk:first-child{margin-inline-start:0}
.fx-dk:hover,.fx-dk:focus-visible{transform:translateY(-10px) rotate(-2deg);z-index:60;margin-inline-end:20px}
.fx-dk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,7,16,.94))}
.fx-dk span{position:absolute;z-index:1;inset:auto 0 0 0;padding:8px 10px;color:#fff}
.fx-dk b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fx-dk small{display:block;font-size:10.5px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-cardbox{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:20px;background:linear-gradient(120deg,color-mix(in srgb,var(--rc) 22%,var(--fg)),var(--fg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 45%,transparent)}
.fx-mini{flex:none;width:46px;aspect-ratio:5/7;border-radius:9px;overflow:hidden;box-shadow:0 0 0 2px var(--rc),0 0 16px var(--rc)}
.fx-cardbox>span:nth-child(2){flex:1;min-width:0}
.fx-cardbox small{display:block;font-size:11.5px;color:var(--muted)}.fx-cardbox b{display:block;color:var(--strong);font-size:15px}.fx-cardbox em{font-style:normal;font-size:12px;color:var(--text)}
.fx-cardbox .fx-go{color:var(--muted)}
.fx-tl{position:relative;padding-inline-start:52px}
.fx-tl::before{content:"";position:absolute;right:21px;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(var(--blue),#FF5FA2)}
.fx-tl-i{position:relative;margin-bottom:10px}
.fx-tl-y{position:absolute;right:-52px;top:50%;transform:translateY(-50%);width:44px;text-align:center;font:400 13px var(--display);color:var(--strong);background:var(--bg);padding:2px 0}
.fx-at{display:flex;align-items:center;gap:12px;padding:8px;border-radius:16px;background:var(--fg);box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s}
.fx-at:hover{transform:translateX(-3px)}
.fx-at i{flex:none;width:46px;aspect-ratio:2/3;border-radius:9px;background:var(--cc,#1a2236) center/cover;box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
.fx-at span{min-width:0}.fx-at b{display:block;color:var(--strong);font-size:14px;line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.fx-at small{font-size:11.5px;color:var(--muted)}
.fx-main-r{color:#E0A400;font-weight:800}
.fx-works{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.fx-row{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 10px;margin:0 -16px;scrollbar-width:none}
.fx-row::-webkit-scrollbar{display:none}
.fx-mate{flex:none;width:88px;text-align:center}
.fx-mate>.fx-ph{width:88px;height:112px;border-radius:16px;box-shadow:0 10px 20px -12px rgba(0,0,0,.6);transition:transform .3s}
.fx-mate.rd>.fx-ph{height:88px;border-radius:50%}
.fx-mate:hover>.fx-ph{transform:translateY(-4px)}
.fx-mate b{display:block;margin-top:6px;font-size:12px;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fx-mate small{display:block;font-size:10.5px;color:var(--muted)}
.fx-about-t{font-size:13.5px;line-height:1.85;color:var(--text);max-height:140px;overflow:hidden;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent);text-align:left}
.fx-about-t.open{max-height:none;-webkit-mask:none;mask:none}
.fx-seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.fx-seg button{border:0;background:none;padding:6px 12px;border-radius:9px;font:800 12px var(--font);color:var(--text);cursor:pointer}
.fx-seg button.on{color:#fff;background:linear-gradient(120deg,#FF5FA2,#8B6CFF)}

/* person: the orbit of faces */
.fx-orbit{position:relative;width:min(330px,86vw);aspect-ratio:1;margin:8px auto 0}
.fx-orb-ring{position:absolute;inset:0;animation:fxSpin 60s linear infinite}
.fx-orb{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(-215%) rotate(calc(-360deg / var(--n) * var(--i)))}
.fx-orb span{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.75),0 8px 20px rgba(0,0,0,.5);animation:fxSpin 60s linear infinite reverse;transition:box-shadow .3s}
.fx-orb:hover span{box-shadow:0 0 0 3px #FF8FC6,0 0 24px rgba(255,143,198,.8)}
@keyframes fxSpin{to{transform:rotate(360deg)}}
.fx-orb-ring::before{content:"";position:absolute;inset:11%;border-radius:50%;border:1.5px dashed rgba(255,255,255,.18)}
.fx-orb-c{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;transform:translate(-50%,-50%)}
.fx-orb-c>.fx-ph{position:relative;z-index:1;border-radius:50%;box-shadow:0 0 0 4px #fff,0 0 0 9px rgba(255,95,162,.4),0 20px 40px rgba(0,0,0,.6)}
.fx-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(158,220,255,.7);animation:fxRing 2.6s ease-out infinite}
.fx-pulse.d2{animation-delay:1.3s;border-color:rgba(255,143,198,.7)}
.fx-big-av{width:140px;height:140px;margin-top:6px}
.fx-big-av>.fx-ph{border-radius:50%;box-shadow:0 0 0 4px #fff,0 20px 40px rgba(0,0,0,.6)}
.fx-nums{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.fx-nums span{min-width:84px;padding:8px 12px;border-radius:16px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.fx-nums b{display:block;font:400 22px/1.2 var(--display)}.fx-nums small{font-size:11px;opacity:.75}
/* studio: a wall of its posters */
.fx-mosaic{position:absolute;inset:0;z-index:-2;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;transform:rotate(-6deg) scale(1.25);opacity:.55}
.fx-mosaic i{aspect-ratio:2/3;border-radius:10px;background:#1a2236 center/cover}
.fx-sh{min-height:340px}
.fx-sh .fx-id h1{font-family:var(--font);font-weight:800;letter-spacing:-.5px}

.fx-sk.por{width:170px;aspect-ratio:3/4;height:auto;border-radius:24px}.fx-sk.ln{height:22px;width:60%;margin:10px 0}.fx-sk.ln.w{width:40%}

/* ---------- mobile ---------- */
@media (max-width:600px){
  .fx-hero{padding:90px 0 34px}
  .fx-stats{gap:6px}.fx-stats button{padding:8px 2px;border-radius:13px}
  .fx-grid.g-c{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fx-grid.g-va,.fx-grid.g-dir{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fx-grid.g-studio{grid-template-columns:repeat(1,minmax(0,1fr))}
  .fx-fan{width:118px;height:84px}.fx-av{width:74px;height:74px}.fx-fan-i{width:40px;height:54px}
  .fx-tabs button{padding:9px 6px;font-size:12.5px;gap:3px;flex:1 1 auto}
  .fx-tabs button span{display:none}
  .fx-ch .fx-dh-in{flex-direction:column;align-items:center;text-align:center;gap:14px}
  .fx-ch .fx-back{right:0}
  .fx-ch .fx-acts{justify-content:center}
  .fx-por{width:62vw;max-width:240px}
  .fx-voice{padding:12px}.fx-voice-av{width:54px;height:54px}.fx-voice-t b{font-size:19px}.fx-eq{display:none}
  .fx-works{grid-template-columns:1fr}
  .fx-dk{width:118px}
  .fx-mosaic{grid-template-columns:repeat(4,1fr)}
  .fx-h h2{font-size:21px}
}
/* lite mode / reduced motion: everything still, nothing heavy */
html.lite .fx-col,html.lite .fx-title,html.lite .fx-wave i,html.lite .fx-eq i,html.lite .fx-ring,html.lite .fx-pulse,html.lite .fx-orb-ring,html.lite .fx-orb span,html.lite .fx-ct,html.lite .fx-pt,html.lite .fx-st,html.lite .fx-sk{animation:none!important}
html.lite .fx-dh-bg{filter:none;opacity:.25}
html.lite .fx-wall{opacity:.35;transition:none}
html.lite .fx-tabs,html.lite .fx-stats button,html.lite .fx-kick,html.lite .fx-nums span,html.lite .fx-heart{backdrop-filter:none}
@media (prefers-reduced-motion:reduce){.fx-col,.fx-title,.fx-wave i,.fx-eq i,.fx-ring,.fx-pulse,.fx-orb-ring,.fx-orb span,.fx-ct,.fx-pt,.fx-st{animation:none!important}}

/* desktop: arrows + drag on horizontal rows */
.fx-sc{position:relative}
.fx-arr{position:absolute;top:50%;z-index:5;width:42px;height:42px;margin-top:-21px;border:0;border-radius:50%;cursor:pointer;font:400 28px/1 var(--font);color:#fff;background:rgba(10,14,30,.75);box-shadow:0 8px 20px -6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.2);backdrop-filter:blur(6px);display:none;place-items:center;padding-bottom:4px;transition:transform .2s,background .2s}
.fx-arr:hover{transform:scale(1.08);background:linear-gradient(120deg,#FF5FA2,#8B6CFF)}
.fx-arr.nx{left:-6px}.fx-arr.pv{right:-6px}
@media (hover:hover) and (pointer:fine){.fx-arr{display:grid}.fx-arr[hidden]{display:none}.fx-rail,.fx-deck,.fx-row{cursor:grab}}
.fx-rail.drag,.fx-deck.drag,.fx-row.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.fx-rail.drag a,.fx-deck.drag a,.fx-row.drag a{pointer-events:none}

/* the hero clips only its moving wall, so the search results can drop below it */
.fx-hero{overflow:visible;z-index:6}
.fx-wclip{position:absolute;inset:0;overflow:hidden;z-index:-2;pointer-events:none}
.fx-wclip .fx-wall{z-index:0}.fx-wclip .fx-glow{z-index:1}
.fx-hero::before{z-index:-1}