/* =========================================================
   WOW — animations « cinéma » (chargé après turbo.css)
   Règle : uniquement transform / opacity / clip-path ponctuel
   ========================================================= */

/* ---------- ouverture : l'écran s'ouvre comme un iris ---------- */
#splash{clip-path:circle(150% at 50% 42%)}
#splash.off{clip-path:circle(0% at 50% 42%);opacity:1;transform:none;transition:clip-path .9s cubic-bezier(.7,0,.2,1),visibility 0s .9s}
#splash.off img{transform:scale(2.4);opacity:0;transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .5s .3s}

/* ---------- hero : entrée explosive ---------- */
body:not(.ready) .hero .logo-wrap{opacity:0}
body.ready .hero .logo-wrap>img.logo{animation:heroDrop 1.1s .35s cubic-bezier(.2,1.5,.35,1) both}
@keyframes heroDrop{0%{transform:translate3d(0,-60px,0) scale(2.6) rotate(-25deg);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}
body.ready .hero .logo-wrap{opacity:1;transition:opacity .3s .3s}
.shock{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px;border-radius:50%;border:3px solid #ffd65a;pointer-events:none;opacity:0;visibility:hidden;z-index:3}
body.ready .hero .shock{animation:shock 1.1s 1s cubic-bezier(.1,.7,.2,1) backwards}
body.ready .hero .shock.s2{animation-delay:1.15s;border-color:#2aabee}
body.ready .hero .shock.s3{animation-delay:1.3s;border-width:1.5px}
@keyframes shock{0%{transform:scale(.6);opacity:1;visibility:visible}100%{transform:scale(3.2);opacity:0;visibility:visible}}
body.ready .hero .logo-wrap.boom .shock{animation:shock .9s cubic-bezier(.1,.7,.2,1) backwards}
body.ready .hero .logo-wrap.boom .shock.s2{animation-delay:.12s}
body.ready .hero .logo-wrap.boom .shock.s3{animation-delay:.24s}

/* rayons de lumière qui tournent derrière le logo */
.hrays{position:absolute;left:50%;top:50%;width:330px;height:330px;margin:-165px;z-index:-1;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#ffd65a30 0 6deg,transparent 6deg 18deg,#2aabee1c 18deg 22deg,transparent 22deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);
  animation:rot 40s linear infinite;will-change:transform;opacity:0;transition:opacity 1.2s 1s}
body.ready .hrays{opacity:1}

/* reflet holographique qui traverse le logo */
.sheen{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px;border-radius:50%;overflow:hidden;pointer-events:none;z-index:2}
.sheen:before{content:"";position:absolute;top:-20%;bottom:-20%;width:40%;left:0;background:linear-gradient(100deg,transparent,#ffffff70 45%,#9de7ff55 55%,transparent);transform:translateX(-150%) skewX(-18deg);animation:sheen 4.5s 2.4s cubic-bezier(.5,0,.2,1) infinite;will-change:transform}
@keyframes sheen{0%{transform:translateX(-150%) skewX(-18deg)}35%,100%{transform:translateX(330%) skewX(-18deg)}}

/* stats : cartes qui se retournent en 3D */
body:not(.ready) .stats div{opacity:0}
body.ready .stats div{animation:flipIn .9s cubic-bezier(.2,1.4,.4,1) both}
body.ready .stats div:nth-child(1){animation-delay:1.5s}body.ready .stats div:nth-child(2){animation-delay:1.65s}body.ready .stats div:nth-child(3){animation-delay:1.8s}
@keyframes flipIn{from{transform:perspective(500px) rotateY(-100deg) scale(.7);opacity:0}}

/* ---------- révélation au scroll : bascule 3D ---------- */
.rv{opacity:0;transform:perspective(900px) translate3d(0,70px,0) rotateX(32deg) scale(.9);transform-origin:50% 0;transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,1.25,.35,1);transition-delay:var(--d,0s)}
.rv.vis{opacity:1;transform:none}
.pack.rv{transform:perspective(900px) translate3d(80px,0,0) rotateY(-35deg) scale(.9)}
.pack.rv.vis{transform:none}

/* grands numéros de section qui glissent */
.sec-h:before{transform:translate3d(60px,0,0);opacity:0;transition:transform 1.1s cubic-bezier(.2,1.2,.3,1) .15s,opacity .8s .15s}
.sec.vis .sec-h:before{transform:none;opacity:1}

/* titres : lettres qui tombent une à une */
.wc{display:inline-block;opacity:0;transform:translate3d(0,.7em,0) rotate(14deg) scale(.6);transition:opacity .45s,transform .6s cubic-bezier(.2,1.6,.4,1);transition-delay:calc(var(--i) * 32ms + .1s)}
.sec.vis .wc{opacity:1;transform:none}
.gold .wc{background:var(--goldgrad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* défilement élastique (piloté par wow.js via la propriété translate) */
#v-home>.sec{will-change:transform}

/* ---------- toucher : onde de choc ---------- */
.tap{position:fixed;left:0;top:0;width:90px;height:90px;margin:-45px;border-radius:50%;pointer-events:none;z-index:299;border:2px solid #ffd65acc;box-shadow:0 0 18px #f5b40066,inset 0 0 12px #f5b40044;animation:tap .55s cubic-bezier(.1,.8,.2,1) forwards}
@keyframes tap{from{transform:var(--at) scale(.15);opacity:1}to{transform:var(--at) scale(1.4);opacity:0}}

/* boutons : effet gelée à l'appui */
.btn.jelly,.add.jelly,.chip.jelly,.cat.jelly{animation:jelly .5s cubic-bezier(.2,.9,.3,1)}
@keyframes jelly{30%{transform:scale(1.08,.88)}50%{transform:scale(.94,1.06)}70%{transform:scale(1.03,.97)}}

/* ---------- liste de services : cascade en balancier 3D ---------- */
#svcs .svc{animation:swing .7s cubic-bezier(.2,1.3,.35,1) both;transform-origin:50% 0}
@keyframes swing{from{opacity:0;transform:perspective(700px) rotateX(-75deg) translate3d(0,-20px,0)}}
.chip.on{animation:chipPop .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes chipPop{40%{transform:scale(1.15) rotate(-3deg)}}

/* ---------- fiche : montée avec rebond ---------- */
.sheet{transition:transform .6s cubic-bezier(.18,1.22,.4,1);box-shadow:0 -20px 60px #000c,0 300px 0 #0a0a0d}
.sheet.on .em{animation:emSpin .9s cubic-bezier(.2,1.5,.4,1) both,emBounce 2.4s .9s ease-in-out infinite}
@keyframes emSpin{from{transform:perspective(400px) rotateY(-540deg) scale(.2);opacity:0}}

/* ---------- pièces d'or qui jaillissent du panier ---------- */
.coin-fx{position:fixed;left:0;top:0;z-index:301;font-size:22px;pointer-events:none;will-change:transform;animation:coinFly 1.1s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes coinFly{0%{transform:translate3d(var(--x0),var(--y0),0) scale(.3) rotate(0);opacity:1}45%{transform:translate3d(calc(var(--x0) + var(--dx) * .6),calc(var(--y0) + var(--dy)),0) scale(1.1) rotate(200deg);opacity:1}100%{transform:translate3d(calc(var(--x0) + var(--dx)),calc(var(--y0) + var(--dy) * .2 + 40px),0) scale(.7) rotate(420deg);opacity:0}}

/* carrousels packs / logos animés : effet coverflow */
.packs,.anims{position:relative;perspective:1000px}

body.busy .hrays,body.busy .sheen:before{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .rv,.wc,.sec-h:before{opacity:1;transform:none}
  .tap,.coin-fx,.hrays,.sheen,.shock{display:none}
  #splash.off{clip-path:none;opacity:0}
}