/* =========================================================
   FX — couche d'animations et d'interactions
   ========================================================= */

/* ---------- splash ---------- */
#splash>div{text-align:center}
#splash .wave{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);opacity:0;animation:wave 1.8s cubic-bezier(.2,.7,.3,1) infinite}
#splash .w2{animation-delay:.6s}#splash .w3{animation-delay:1.2s}
@keyframes wave{0%{transform:scale(.9);opacity:.8}100%{transform:scale(2.2);opacity:0}}
#splash img{animation:spIn .9s cubic-bezier(.2,1.6,.4,1) both,pulse 1.6s 1s ease-in-out infinite}
@keyframes spIn{from{transform:scale(0) rotate(-200deg);filter:brightness(3)}}
.sp-title{font-family:"Russo One";font-weight:400;font-size:24px;margin-top:26px;letter-spacing:2px}
.sp-title .ch{display:inline-block;background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(24px) rotateX(90deg);animation:chIn .6s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes chIn{to{opacity:1;transform:none}}
.sp-bar{width:160px;height:3px;border-radius:9px;background:#ffffff14;margin:16px auto 0;overflow:hidden}
.sp-bar i{display:block;height:100%;width:0;background:var(--goldgrad);box-shadow:0 0 12px var(--gold);animation:bar 1.9s cubic-bezier(.6,0,.2,1) forwards}
@keyframes bar{to{width:100%}}
#splash p{margin-top:12px}
#splash.off{transform:scale(1.15);filter:blur(10px);transition:opacity .6s,visibility .6s,transform .6s,filter .6s}

/* ---------- entrée de page ---------- */
.top{opacity:0;transform:translateY(-20px);transition:.7s cubic-bezier(.2,.8,.2,1) .1s}
.nav{transform:translateY(140%);transition:transform .8s cubic-bezier(.2,1.3,.4,1) .3s}
body.ready .top{opacity:1;transform:none}
body.ready .nav{transform:none}

/* ---------- hero ---------- */
.hero .spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),#f5b40026,transparent 70%)}
.logo-wrap{position:relative;width:170px;height:170px;margin:0 auto 14px;display:grid;place-items:center;perspective:700px;touch-action:pan-y;cursor:grab}
.logo-wrap:before{content:"";position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(transparent 0 65%,#ffd65a 80%,#2aabee 90%,transparent 97%);animation:rot 3.5s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));filter:drop-shadow(0 0 8px #ffd65a)}
.logo-wrap:after{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle,#f5b40045,transparent 65%);z-index:-1;animation:breathe 3s ease-in-out infinite}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.3);opacity:.5}}
.hero .logo{width:150px;height:150px;margin:0;animation:none;transition:transform .3s ease-out;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.hero .logo.flip{animation:coin 1.1s cubic-bezier(.3,1.3,.5,1)}
@keyframes coin{0%{transform:rotateY(0) scale(1)}45%{transform:rotateY(540deg) scale(1.3);filter:brightness(1.6) drop-shadow(0 0 30px #ffd65a)}100%{transform:rotateY(720deg) scale(1)}}
.hero h1 .ch{display:inline-block;background:var(--goldgrad);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:chUp .7s cubic-bezier(.2,1.4,.4,1) both,glint 5s linear infinite}
@keyframes chUp{from{opacity:0;transform:translateY(30px) scale(.4) rotate(-12deg)}}
@keyframes glint{0%{background-position:300% 0}100%{background-position:-300% 0}}
.hero h1 small{animation:track 1.2s .2s both}
@keyframes track{from{letter-spacing:24px;opacity:0}to{letter-spacing:6px;opacity:1}}
.crown-float{position:absolute;font-size:20px;opacity:.45;pointer-events:none;animation:cf 6s ease-in-out infinite}
@keyframes cf{50%{transform:translateY(-16px) rotate(16deg);opacity:.9}}

/* ---------- marquee ---------- */
.marquee{margin:22px -16px 0;overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(90deg,#f5b40014,#2aabee14);transform:rotate(-2deg);-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;gap:16px;width:max-content;padding:11px 0;animation:mq 22s linear infinite;font-family:"Russo One";font-size:14px;letter-spacing:1.5px;white-space:nowrap}
.mq-track span{background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq-track i{font-style:normal;color:var(--blue2);text-shadow:0 0 10px var(--blue)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- révélation au scroll ---------- */
.rv{opacity:0;transform:translateY(40px) scale(.96);filter:blur(6px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),filter .8s;transition-delay:var(--d,0s)}
.rv.vis{opacity:1;transform:none;filter:none}
.sec-h h2{position:relative}
.sec-h h2:after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--goldgrad);box-shadow:0 0 10px var(--gold);transition:width 1s cubic-bezier(.2,.8,.2,1) .3s}
.sec.vis .sec-h h2:after{width:42px}

/* ---------- tilt 3D + reflet ---------- */
.tilt{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1))}
.tilt.hot{--s:1.02}
.glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#ffffff30,transparent 55%);opacity:0;transition:opacity .3s;z-index:3}
.tilt.hot .glare{opacity:1}

/* ---------- ripple ---------- */
.rp{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);animation:rp .7s cubic-bezier(.2,.8,.2,1) forwards;background:radial-gradient(circle,#fffa,#ffd65a55 40%,transparent 70%);z-index:4}
@keyframes rp{to{transform:scale(1);opacity:0}}
.btn,.add,.chip,.cat,.pm,.coin,.tier,.svc,.nav button,.pfi{position:relative;overflow:hidden}

/* ---------- étincelles ---------- */
#sparks{position:fixed;inset:0;z-index:300;pointer-events:none}

/* ---------- nav : indicateur glissant ---------- */
.nav{isolation:isolate}
.nav-ind{position:absolute;top:7px;bottom:7px;left:0;border-radius:18px;background:linear-gradient(160deg,#f5b40033,#f5b40008);border:1px solid #f5b40055;box-shadow:0 0 22px #f5b40033,inset 0 1px 0 #fff2;transition:transform .55s cubic-bezier(.3,1.5,.5,1),width .4s;z-index:-1}
.nav button.on{background:none}
.nav button.on svg{animation:navPop .5s cubic-bezier(.2,1.8,.4,1)}
@keyframes navPop{40%{transform:translateY(-5px) scale(1.25)}}
.nav button.shake svg{animation:shake .6s}
@keyframes shake{20%{transform:rotate(-18deg) scale(1.25)}40%{transform:rotate(14deg) scale(1.25)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}

/* ---------- carrousel 3D réalisations ---------- */
.pf{perspective:900px;padding-block:14px 18px}
.pfi{transform:rotateY(var(--ry,0deg)) scale(var(--sc,1));filter:brightness(var(--br,1));transition:transform .12s linear,filter .12s}
.pfi:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffd65a44;pointer-events:none}
.pfi img{transition:transform 5s ease-out}
.pfi.center{box-shadow:0 18px 50px #f5b40033}
.pfi.center img{transform:scale(1.08)}

/* ---------- ticket à gratter ---------- */
.scratch{position:relative;height:150px;border-radius:22px;overflow:hidden;border:1.5px dashed #f5b40088;background:radial-gradient(120% 120% at 50% 0%,#2a1f00,#0b0a08);box-shadow:0 10px 40px #f5b40018;touch-action:none;user-select:none;-webkit-user-select:none}
.sc-prize{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.sc-prize small{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--mute)}
.sc-prize b{font-family:"Russo One";font-weight:400;font-size:46px;line-height:1.1}
.sc-prize span{font-size:12.5px;color:#cfc9ba}
.sc-prize em{font-style:normal;font-weight:800;color:var(--blue2)}
#sc-canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s;cursor:crosshair}
.scratch.won #sc-canvas{opacity:0;pointer-events:none}
.scratch.won .sc-prize b{animation:pop .6s cubic-bezier(.2,1.8,.4,1)}
.sc-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-size:12px;font-weight:800;color:#1a1200;background:#ffd65add;padding:5px 12px;border-radius:99px;pointer-events:none;animation:hint 1.6s ease-in-out infinite;white-space:nowrap;transition:opacity .3s}
.scratch.touched .sc-hint,.scratch.won .sc-hint{opacity:0}
@keyframes hint{50%{transform:translate(-50%,-5px)}}

/* ---------- maintenir pour valider ---------- */
.hold{flex-direction:column;gap:2px}
.hold .fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,#ffffff30,#ffffffaa);pointer-events:none}
.hold.holding{transform:scale(.97)}
.hold small{display:block;font-size:10.5px;font-weight:700;opacity:.75;letter-spacing:.5px;position:relative}
.hold>span{position:relative}

/* ---------- swipe pour supprimer ---------- */
.item-wrap{position:relative;border-radius:18px}
.item-wrap:before{content:"🗑 Supprimer";position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:18px;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(90deg,transparent 30%,#ff5470);border-radius:18px;opacity:var(--o,0)}
.item{position:relative;touch-action:pan-y;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;background:#0f0e10}
.item.drag{transition:none}

/* ---------- sheet : cascade ---------- */
.sheet.on>*{animation:in .5s cubic-bezier(.2,.8,.2,1) both}
.sheet.on>*:nth-child(2){animation-delay:.05s}.sheet.on>*:nth-child(3){animation-delay:.1s}.sheet.on>*:nth-child(4){animation-delay:.15s}.sheet.on>*:nth-child(5){animation-delay:.2s}.sheet.on>*:nth-child(6){animation-delay:.25s}.sheet.on>*:nth-child(n+7){animation-delay:.3s}
.sheet.on .em{animation:in .5s both,emBounce 2.4s .5s ease-in-out infinite}
@keyframes emBounce{50%{transform:translateY(-8px) rotate(-6deg) scale(1.08)}}
.tier.on{animation:tierOn .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes tierOn{40%{transform:scale(1.03)}}

/* ---------- divers ---------- */
.btn.g{background-size:200% 100%;animation:goldShift 6s ease-in-out infinite}
@keyframes goldShift{50%{background-position:100% 0}}
.badge{animation:badgeGlow 2s ease-in-out infinite}
@keyframes badgeGlow{50%{box-shadow:0 0 12px #2aabee88}}
.done .ck{animation:crownDrop 1s cubic-bezier(.2,1.6,.4,1) both}
@keyframes crownDrop{0%{transform:translateY(-300px) rotate(-40deg) scale(.4)}70%{transform:translateY(10px) rotate(6deg) scale(1.1)}}
.oid{animation:oidGlow 2s ease-in-out infinite}
@keyframes oidGlow{50%{box-shadow:0 0 30px #f5b40066;border-color:var(--gold2)}}

@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none}.top,.nav{opacity:1;transform:none}}
/* svc révélés au scroll */
.svc.rv{animation:none}
/* galerie flyers en portrait */
.pf.tall .pfi{flex:0 0 58%;aspect-ratio:2/3}