/* QTouch Community — animations « Aperçu de l'app » (carrousel 3D) et « La saison » (rangs). JS : lib/site/community-fx.js */
/* ---------- Aperçu de l'app : coverflow ---------- */
.qy-screens.cf{position:relative;overflow:hidden;background:radial-gradient(60% 50% at 50% 60%,#F3E8FF 0%,#FFF 70%)}
.qy-screens.cf::before,.qy-screens.cf::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(80px);opacity:.45;pointer-events:none;animation:cfBlob 14s ease-in-out infinite}
.qy-screens.cf::before{left:-120px;top:20%;background:#F9A8D4}
.qy-screens.cf::after{right:-140px;top:35%;background:#C4B5FD;animation-delay:-7s}
@keyframes cfBlob{50%{transform:translate(80px,-60px) scale(1.15)}}
.cf .qy-in{position:relative;z-index:1}
.cf-stage{position:relative;height:clamp(520px,58vw,640px);perspective:1600px;margin-top:20px;touch-action:pan-y}
.cf .qy-rail{display:block;overflow:visible;position:absolute;inset:0;padding:0;scroll-snap-type:none}
.cf .qy-shot{position:absolute;left:50%;top:0;width:clamp(210px,20vw,270px);margin:0 0 0 calc(clamp(210px,20vw,270px) / -2);cursor:pointer;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s,filter .6s;will-change:transform}
.cf .qy-shot img{border-radius:36px;border:7px solid #0F0B1E;box-shadow:0 40px 70px -35px rgba(60,20,120,.6)}
.cf .qy-shot figcaption{opacity:0;transition:opacity .4s}
.cf .qy-shot.on figcaption{opacity:1;color:#7C3AED}
.cf .qy-shot.on img{box-shadow:0 50px 90px -30px rgba(124,58,237,.65),0 0 0 3px rgba(167,139,250,.35)}
.cf .qy-shot.on::before{content:"";position:absolute;left:50%;top:46%;width:150%;height:70%;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(236,72,153,.35),rgba(124,58,237,.18) 55%,transparent);z-index:-1;filter:blur(10px);animation:cfHalo 3s ease-in-out infinite}
@keyframes cfHalo{50%{transform:scale(1.08);opacity:.75}}
.cf .qy-shot .cf-shine{position:absolute;inset:7px 7px auto;height:calc(100% - 40px);border-radius:30px;overflow:hidden;pointer-events:none}
.cf .qy-shot .cf-shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-15deg)}
.cf .qy-shot.on .cf-shine::after{animation:cfShine 1.2s .25s ease-out}
@keyframes cfShine{to{left:130%}}
.cf-desc{position:relative;text-align:center;min-height:56px;margin-top:6px}
.cf-desc p{margin:0 auto;max-width:520px;font-size:16px;line-height:1.5;color:var(--qy-mut,#6A6678);transition:opacity .35s,transform .35s}
.cf-desc p.out{opacity:0;transform:translateY(8px)}
.cf-desc b{color:var(--qy-ink,#1D1B26)}
.cf-bar{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.cf-dots{display:flex;gap:8px}
.cf-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:#DDD6FE;cursor:pointer;transition:width .4s,background .4s;position:relative;overflow:hidden}
.cf-dots button.on{width:44px;background:#EDE9FE}
.cf-dots button.on::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F97316,#EC4899,#7C3AED);transform-origin:0 50%;animation:cfProg var(--dur,3.6s) linear forwards}
.cf.paused .cf-dots button.on::after{animation-play-state:paused}
@keyframes cfProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cf .qy-rail-nav{margin:0}
.cf-orb{position:absolute;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--c) 45%,#5B21B6);box-shadow:0 10px 24px -8px var(--c);opacity:.85;animation:cfOrb var(--t,7s) ease-in-out infinite;pointer-events:none;z-index:0}
.cf-orb::before,.cf-orb::after{content:"";position:absolute;top:38%;width:5px;height:9px;border-radius:5px;background:#fff}
.cf-orb::before{left:34%}.cf-orb::after{left:56%}
@keyframes cfOrb{50%{transform:translate(var(--dx,14px),-22px) rotate(8deg)}}
@media(max-width:700px){.cf-stage{height:500px}.cf .qy-shot{width:200px;margin-left:-100px}.cf-orb{display:none}}

/* ---------- La saison : rangs ---------- */
.qy-rank.fx .qy-ladder-img,.qy-rank.fx .qy-duo{opacity:0;transform:translateY(40px) scale(.97);transition:opacity .8s,transform 1s cubic-bezier(.2,.8,.2,1)}
.qy-rank.fx .qy-duo:nth-child(1){transition-delay:.15s}.qy-rank.fx .qy-duo:nth-child(2){transition-delay:.3s}
.qy-rank.fx.in .qy-ladder-img,.qy-rank.fx.in .qy-duo{opacity:1;transform:none}
.qy-rank.fx .qy-ladder-img img,.qy-rank.fx .qy-duo-media img{transform:scale(1.12);transition:transform 2.4s cubic-bezier(.2,.8,.2,1)}
.qy-rank.fx.in .qy-ladder-img img,.qy-rank.fx.in .qy-duo-media img{transform:scale(1)}
.qy-rank.fx .qy-duo:hover .qy-duo-media img{transform:scale(1.06);transition-duration:.8s}
.qy-rank.fx .qy-card{transition:box-shadow .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.qy-rank.fx .qy-card:hover{box-shadow:0 40px 70px -35px rgba(124,58,237,.5)}
.rk-shine{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.rk-shine::after{content:"";position:absolute;top:-20%;bottom:-20%;width:35%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-14deg);animation:rkShine 5.5s ease-in-out infinite}
@keyframes rkShine{0%,60%{left:-50%}100%{left:130%}}
.qy-ladder-img{position:relative}
.rk-badge{position:absolute;left:18px;top:18px;z-index:3;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:18px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 30px -14px rgba(60,20,120,.45);font-family:inherit}
.rk-badge .l{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-weight:900;font-size:24px;color:#fff;background:linear-gradient(135deg,#7C3AED,#EC4899);transition:background .4s}
.rk-badge .l.pop{animation:rkPop .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes rkPop{0%{transform:scale(.4) rotate(-20deg)}100%{transform:none}}
.rk-badge small{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--qy-mut,#6A6678)}
.rk-badge .bar{width:120px;height:7px;border-radius:9px;background:#EDE9FE;margin-top:6px;overflow:hidden}
.rk-badge .bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#7C3AED,#EC4899,#F97316);transition:width .5s}
.rk-fx{position:absolute;right:14px;top:14px;z-index:3;display:flex;gap:6px}
.rk-fx span{min-width:30px;height:30px;padding:0 9px;border-radius:99px;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;background:linear-gradient(135deg,#7C3AED,#EC4899);box-shadow:0 8px 18px -8px rgba(124,58,237,.7);opacity:0;transform:translateY(-10px) scale(.6)}
.qy-duo.in-view .rk-fx span{animation:rkIn .6s cubic-bezier(.3,1.7,.5,1) forwards;animation-delay:calc(var(--i)*.15s + .4s)}
@keyframes rkIn{to{opacity:1;transform:none}}
.rk-hearts{display:flex;gap:6px;margin-top:14px}
.rk-hearts i{width:26px;height:24px;font-style:normal;font-size:22px;line-height:24px;filter:grayscale(1);opacity:.35;transition:filter .3s,opacity .3s,transform .3s}
.rk-hearts i.on{filter:none;opacity:1;transform:scale(1.15)}
.rk-vs{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 12px;border-radius:12px;background:#F5F3FF;font-size:13px;font-weight:800;color:#5B21B6}
.rk-vs b{display:inline-block;min-width:22px;text-align:center;font-size:18px;color:#EC4899}
@media(prefers-reduced-motion:reduce){.cf .qy-shot,.qy-rank.fx *{transition:none!important;animation:none!important}.qy-rank.fx .qy-ladder-img,.qy-rank.fx .qy-duo{opacity:1;transform:none}}

/* glisser */
#ecrans .cf-stage{cursor:grab;user-select:none;-webkit-user-select:none}
#ecrans .cf-stage.drag{cursor:grabbing}
#ecrans .cf-stage img{-webkit-user-drag:none;pointer-events:none}
#ecrans .cf-stage .qy-shot{pointer-events:auto}