/* QTouch — page Communauté : animations (marche des mondes, écran Explorer, lightbox des récompenses).
   JS : lib/site/community-anim.js. Tout est en CSS/JS, aucune vidéo. */

/* ---------- 1. La marche : le QOYU avance vers nous ---------- */
.qy-walk-art{perspective:1100px}
.qy-walk-art .qw-in{position:relative;border-radius:32px;transform:rotateX(calc(var(--rx,0) * 1deg)) rotateY(calc(var(--ry,0) * 1deg));transform-style:preserve-3d;will-change:transform}
.qy-walk-art .qw-in > img{position:relative;display:block;width:100%;height:auto}
.qy-walk-art .qw-in::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.22) 48%,transparent 58%);background-size:260% 100%;background-position:130% 0;mix-blend-mode:soft-light;animation:qwSheen 7s ease-in-out infinite}
@keyframes qwSheen{0%,55%{background-position:130% 0}100%{background-position:-60% 0}}
.qw-stage{position:absolute;left:30.01%;top:56.76%;width:38.42%;height:22.3%;pointer-events:none;transform:translate(calc(var(--ry,0) * -1.4px),calc(var(--rx,0) * 1.2px));transform-style:preserve-3d}
.qy-walk-art .qw-stage img{position:absolute;inset:0;width:100%;height:100%;max-width:none;border-radius:0;box-shadow:none;display:block}
.qw-guy{position:absolute;inset:0;transform-origin:51% 86%;animation:qwAppr 7.2s ease-in-out infinite;animation-play-state:paused}
.qw-bob{position:absolute;inset:0;transform-origin:51% 86%;animation:qwBob 1.2s ease-in-out infinite;animation-play-state:paused}
.qw-fl,.qw-fr{transform-origin:39% 71%;animation:qwFoot 1.2s ease-in-out infinite;animation-play-state:paused}
.qw-fr{transform-origin:60% 71%;animation-delay:-.6s}
.qw-body{filter:drop-shadow(0 0 10px rgba(190,110,255,.45))}
.qy-walk-art.is-live .qw-guy,.qy-walk-art.is-live .qw-bob,.qy-walk-art.is-live .qw-fl,.qy-walk-art.is-live .qw-fr,.qy-walk-art.is-live .qw-fp i{animation-play-state:running}
@keyframes qwAppr{0%,100%{transform:scale(1)}50%{transform:scale(1.11) translateY(3px)}}
@keyframes qwBob{
  0%,100%{transform:translate(0,2px) rotate(-2.4deg) scaleY(.985)}
  25%{transform:translate(0,-4px) rotate(0) scaleY(1.015)}
  50%{transform:translate(0,2px) rotate(2.4deg) scaleY(.985)}
  75%{transform:translate(0,-4px) rotate(0) scaleY(1.015)}}
@keyframes qwFoot{
  0%{transform:translate(0,0) rotate(0) scale(1)}
  22%{transform:translate(-1px,-9px) rotate(-8deg) scale(.95)}
  50%{transform:translate(0,3px) rotate(0) scale(1.06)}
  70%,100%{transform:translate(0,0) rotate(0) scale(1)}}
/* pas lumineux qui viennent vers nous */
.qw-fp{position:absolute;inset:0;pointer-events:none}
.qw-fp i{position:absolute;left:var(--x);top:79%;width:3.3%;aspect-ratio:24/40;opacity:0;background:linear-gradient(180deg,#fff,#E6C8FF 70%,#FF9BD8);filter:drop-shadow(0 0 7px rgba(255,150,240,.95)) drop-shadow(0 0 16px rgba(150,90,255,.85));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cellipse cx='12' cy='28' rx='8.5' ry='11'/%3E%3Ccircle cx='4.6' cy='12' r='3'/%3E%3Ccircle cx='10.6' cy='7.6' r='3.3'/%3E%3Ccircle cx='17.4' cy='8.6' r='3'/%3E%3Ccircle cx='21' cy='15.6' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cellipse cx='12' cy='28' rx='8.5' ry='11'/%3E%3Ccircle cx='4.6' cy='12' r='3'/%3E%3Ccircle cx='10.6' cy='7.6' r='3.3'/%3E%3Ccircle cx='17.4' cy='8.6' r='3'/%3E%3Ccircle cx='21' cy='15.6' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:qwPrint 2.4s linear infinite;animation-delay:calc(var(--d) * -1s);animation-play-state:paused}
.qw-fp i:nth-child(odd){transform:rotate(-8deg)}
@keyframes qwPrint{
  0%{opacity:0;translate:0 0;scale:.7}
  12%{opacity:.95}
  70%{opacity:.7}
  100%{opacity:0;translate:0 calc(var(--h) * 100%);scale:1.7}}

/* ---------- 2. L'écran Explorer ---------- */
.qy-xp-phone .qx-in{position:relative;border-radius:38px;overflow:hidden}
.qy-xp-phone .qx-in > img{position:relative;z-index:0}
.qy-xp-phone{animation:qxFloat 6s ease-in-out infinite}
@keyframes qxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.qx-fx{position:absolute;inset:0;pointer-events:none;z-index:2}
.qx-c{position:absolute;border-radius:9% / 15%;transition:filter .5s,opacity .5s}
.qx-c .cp{position:absolute;inset:0;border-radius:inherit;background-repeat:no-repeat;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .7s}
.qx-c .vl{position:absolute;inset:-1.5%;border-radius:inherit;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);opacity:0;transition:opacity .7s .2s}
.qx-fx.pre .qx-c .cp{opacity:0;transform:translateY(34px) scale(.955)}
.qx-fx.pre .qx-c .vl{opacity:1;transition:none}
.qx-fx .qx-c:nth-child(2) .cp,.qx-fx .qx-c:nth-child(2) .vl{transition-delay:.18s}
.qx-fx .qx-c:nth-child(3) .cp,.qx-fx .qx-c:nth-child(3) .vl{transition-delay:.36s}
.qx-c .rg{position:absolute;inset:-1%;border-radius:inherit;box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 0 6px rgba(139,44,245,.55),0 0 34px 6px rgba(255,46,147,.45);opacity:0;transform:scale(.985);transition:opacity .45s,transform .45s}
.qx-c .sh{position:absolute;inset:0;border-radius:inherit;overflow:hidden;opacity:0;transition:opacity .4s}
.qx-c .sh::before{content:'';position:absolute;top:-10%;bottom:-10%;width:34%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-14deg)}
.qx-c.on .rg{opacity:1;transform:scale(1)}
.qx-c.on .sh{opacity:1}
.qx-c.on .sh::before{animation:qxSweep 1.6s ease-in-out infinite}
@keyframes qxSweep{0%{left:-40%}70%,100%{left:120%}}
.qx-c .en{position:absolute;right:3.4%;bottom:8%;width:28%;height:20%;border-radius:99px;box-shadow:0 0 0 0 rgba(255,255,255,.9);opacity:0}
.qx-c.on .en{opacity:1;animation:qxEnter 1.4s ease-out infinite}
@keyframes qxEnter{0%{box-shadow:0 0 0 0 rgba(255,255,255,.95)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}
.qx-fx.has-on .qx-c:not(.on) .cp{filter:saturate(.8) brightness(1.04)}
.qx-bar{position:absolute;border-radius:99px;overflow:hidden}
.qx-bar::before{content:'';position:absolute;top:0;bottom:0;width:36%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);animation:qxSweep 2.6s ease-in-out infinite}
.qx-home{position:absolute;border-radius:50%;box-shadow:0 0 0 0 rgba(255,46,147,.55);animation:qxHome 2.2s ease-out infinite}
@keyframes qxHome{0%{box-shadow:0 0 0 0 rgba(255,46,147,.6)}100%{box-shadow:0 0 0 22px rgba(255,46,147,0)}}
.qx-coin{position:absolute;padding:2px 9px;border-radius:99px;background:#22B573;color:#fff;font-size:12px;font-weight:900;letter-spacing:.01em;opacity:0;box-shadow:0 8px 16px -8px rgba(34,181,115,.9);white-space:nowrap}
.qx-coin.go{animation:qxCoin 2.2s ease-out}
@keyframes qxCoin{0%{opacity:0;transform:translateY(8px) scale(.8)}18%{opacity:1;transform:translateY(-6px) scale(1)}70%{opacity:1;transform:translateY(-16px)}100%{opacity:0;transform:translateY(-24px)}}
.qx-sp{position:absolute;width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 4px rgba(255,255,255,.9));opacity:0;animation:qxTwinkle 3s ease-in-out infinite}
@keyframes qxTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}}

/* menus de droite, synchronisés avec le téléphone */
.qy-xp-modes li{cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s,background .35s}
.qy-xp-modes li .ic{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.qy-xp-modes li.on{border-color:#C9B1FF;background:linear-gradient(90deg,#FBF7FF,#fff);box-shadow:0 22px 44px -26px rgba(123,47,247,.7)}
.qy-xp-modes li.on .ic{transform:scale(1.1) rotate(-6deg)}
.qy-xp-modes li{position:relative;overflow:hidden}
.qy-xp-modes li::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--qy-grad)}
.qy-xp-modes li.on::after{animation:qxTimer var(--dur,3s) linear forwards}
@keyframes qxTimer{to{width:100%}}
.qy-walk-prog{transition:box-shadow .4s}
.qy-walk-prog .row b,.qy-walk-prog .row small,.qy-walk-prog .nx{transition:opacity .25s,transform .25s}
.qy-walk-prog.swap .row b,.qy-walk-prog.swap .row small,.qy-walk-prog.swap .nx{opacity:0;transform:translateY(6px)}
.qy-walk-prog .qy-qbar i::after{width:0;transition:width 1.3s cubic-bezier(.2,.8,.2,1)}
.qy-walk-prog .qy-qbar i.go::after{width:var(--p)}
.qy-walk-prog .qy-qbar i::before{content:'';position:absolute;top:0;bottom:0;width:30%;left:-40%;z-index:1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);animation:qxSweep 2.4s ease-in-out infinite}
.qy-walk-worlds span{cursor:pointer;transition:background .3s,color .3s,box-shadow .3s,transform .3s}
.qy-walk-worlds span:hover{transform:translateY(-2px)}

/* ---------- 3. Récompenses : cartes cliquables + lightbox ---------- */
.qy-lc{cursor:zoom-in}
.qy-lc:focus-visible{outline:3px solid #8B2CF5;outline-offset:3px;border-radius:16px}
.qy-lb{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,8,35,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.qy-lb.on{display:flex;animation:qlFade .25s ease-out}
@keyframes qlFade{from{opacity:0}to{opacity:1}}
.qy-lb-box{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);width:min(920px,100%);max-height:calc(100vh - 40px);overflow:hidden;border-radius:30px;background:#fff;box-shadow:0 60px 120px -30px rgba(0,0,0,.7);animation:qlPop .35s cubic-bezier(.2,.9,.25,1.1)}
@keyframes qlPop{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
.qy-lb-art{position:relative;margin:0;min-height:320px;background:var(--k2,#F0DEFF);display:grid;place-items:center;overflow:hidden}
.qy-lb-art img{display:block;width:100%;height:100%;object-fit:cover;animation:qlZoom .6s cubic-bezier(.2,.8,.2,1)}
@keyframes qlZoom{from{transform:scale(1.08);opacity:0}to{transform:none;opacity:1}}
.qy-lb-art::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 45%);pointer-events:none}
.qy-lb-body{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(24px,4vw,44px)}
.qy-lb-tag{align-self:flex-start;padding:4px 12px;border-radius:99px;background:var(--k,#8B6CFF);color:#fff;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.qy-lb-big{margin:0;font-size:clamp(40px,6vw,64px);font-weight:900;letter-spacing:-.045em;line-height:1;background:var(--qy-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.qy-lb-name{margin:0;font-size:15px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--qy-mut)}
.qy-lb-desc{margin:4px 0 0;font-size:16px;line-height:1.6;font-weight:500;color:var(--qy-ink)}
.qy-lb-nav{display:flex;align-items:center;gap:10px;margin-top:14px}
.qy-lb-nav button{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--qy-line);background:#fff;color:var(--qy-ink);display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.qy-lb-nav button:hover{transform:scale(1.08);border-color:#C9B1FF;background:#FAF6FF}
.qy-lb-nav svg{width:20px;height:20px}
.qy-lb-count{margin-left:6px;font-size:13px;font-weight:800;color:var(--qy-mut);font-variant-numeric:tabular-nums}
.qy-lb-x{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:rgba(15,8,35,.55);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s}
.qy-lb-x:hover{transform:scale(1.1);background:rgba(15,8,35,.8)}
.qy-lb-x svg{width:20px;height:20px}
@media(max-width:760px){
  .qy-lb{padding:12px;align-items:flex-end}
  .qy-lb-box{grid-template-columns:minmax(0,1fr);border-radius:26px 26px 20px 20px;max-height:calc(100vh - 24px);overflow-y:auto}
  .qy-lb-art{min-height:0;aspect-ratio:282/225}
  .qy-lb-body{padding:20px 20px 24px}
}

/* accessibilité : pas de mouvement si demandé */
@media(prefers-reduced-motion:reduce){
  .qw-guy,.qw-bob,.qw-fl,.qw-fr,.qw-fp i,.qy-walk-art .qw-in::after,.qy-xp-phone,.qx-c .sh::before,.qx-bar::before,.qx-home,.qx-sp,.qy-walk-prog .qy-qbar i::before{animation:none!important}
  .qx-c .cp,.qx-c .vl{transition:none!important}
  .qy-lb.on,.qy-lb-box,.qy-lb-art img{animation:none}
}