/* vivant.css : couche d'animation ajoutée au clone (fond du héros, parallaxe, bandeaux, apparitions au scroll).
   Pour revenir à l'original : retirer les lignes vivant.css / vivant.js de index.html (copie intacte : index.orig.html). */

/* barre de lecture + lueur du curseur */
.v-bar{position:fixed;top:0;left:0;width:100%;height:3px;z-index:80;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--red),#ff7a1a 55%,var(--yellow));box-shadow:0 0 12px #e3350d66;pointer-events:none}
.v-glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,#ffcb0524,#e3350d10 45%,transparent);transform:translate3d(var(--gx,-999px),var(--gy,-999px),0);opacity:0;transition:opacity .5s}
.v-glow.on{opacity:1}

/* héros : fond vivant */
.hero h1,.hero .stage,.hero .hero-foot{position:relative;z-index:1}
.hero h1{translate:0 calc(var(--sy,0) * .22px)}
.hero .stage{translate:0 calc(var(--sy,0) * .08px)}
.v-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.v-bg .b{position:absolute;border-radius:50%;opacity:.5;animation:vBlob 18s ease-in-out infinite alternate}
.v-bg .b1{width:48vmax;height:48vmax;left:-16vmax;top:-14vmax;background:radial-gradient(closest-side,#ff9c86,transparent)}
.v-bg .b2{width:42vmax;height:42vmax;right:-14vmax;top:6vmax;background:radial-gradient(closest-side,#ffe17a,transparent);animation-duration:22s;animation-delay:-6s}
.v-bg .b3{width:40vmax;height:40vmax;left:28%;bottom:-26vmax;background:radial-gradient(closest-side,#a9c8ff,transparent);animation-duration:26s;animation-delay:-11s}
@keyframes vBlob{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}100%{transform:translate(-4vw,6vh) scale(.94)}}
.v-bg .grid{position:absolute;inset:-40px 0;background-image:radial-gradient(#0000001c 1px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,#000 15%,transparent 75%);translate:0 calc(var(--sy,0) * -.12px)}

/* objets flottants (cartes, boosters, pokéballs) : parallaxe souris + scroll, balancement */
.v-fl{position:absolute;left:var(--x);top:var(--y);width:calc(var(--s) * var(--k,1));opacity:0;translate:calc(var(--mx,0) * var(--z) * -28px) calc(var(--my,0) * var(--z) * -22px + var(--sy,0) * var(--z) * -.4px);transition:translate .9s cubic-bezier(.2,.8,.2,1);animation:vFlIn 1.3s cubic-bezier(.2,.8,.2,1) var(--in) forwards}
@keyframes vFlIn{from{opacity:0;scale:.5}to{opacity:var(--o,1);scale:1}}
.v-fl>.in{display:block;rotate:var(--r);animation:vBob var(--t,7s) ease-in-out var(--dl,0s) infinite}
@keyframes vBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(5deg)}}
.v-fl img{width:100%;height:auto;filter:drop-shadow(0 22px 18px #00000026)}
.v-fl.vc>.in{perspective:900px}
.v-card{position:relative;display:block;aspect-ratio:630/880;border-radius:5%/3.6%;overflow:hidden;box-shadow:0 26px 34px -18px #0006;animation:vSwing var(--sw,8s) ease-in-out infinite}
.v-card img{width:100%;height:100%;object-fit:cover;filter:none}
.v-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff55 45%,#ff6a2b26 50%,#4fa9ff26 55%,transparent 70%);background-size:250% 250%;animation:holo 3.2s linear infinite}
@keyframes vSwing{0%,100%{transform:rotateY(-22deg)}50%{transform:rotateY(22deg)}}

/* étincelles */
.v-spk{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);background:var(--yellow);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);scale:0;animation:vTwinkle var(--t,3s) ease-in-out var(--dl,0s) infinite}
.v-spk.r{background:var(--red)}
@keyframes vTwinkle{0%,100%{scale:0;rotate:0deg}50%{scale:1;rotate:90deg}}

/* anneaux autour du globe */
.v-orbit{position:absolute;inset:var(--oi,-8%);z-index:0;border-radius:50%;border:1.5px dashed #e3350d38;pointer-events:none;animation:vSpin 70s linear infinite}
.v-orbit.o2{--oi:-2%;border:1px solid #00000010;animation-duration:22s;animation-direction:reverse}
.v-orbit i{position:absolute;top:-8px;left:50%;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;border:1.5px solid #15151a;background:linear-gradient(var(--red) 0 42%,#15151a 42% 58%,#fff 58%);box-shadow:0 4px 10px #0003}
@keyframes vSpin{to{transform:rotate(360deg)}}

/* bouton principal : reflet + onde */
.find{position:relative;overflow:hidden;isolation:isolate;animation:vPulse 2.6s ease-out 3.2s infinite}
.find::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,#ffffff70,transparent);transform:skewX(-20deg);animation:vSheen 3.8s ease-in-out 3s infinite}
@keyframes vSheen{0%{left:-60%}55%,100%{left:130%}}
@keyframes vPulse{0%{box-shadow:0 18px 40px -16px #e3350daa,0 0 0 0 #e3350d66}70%{box-shadow:0 18px 40px -16px #e3350daa,0 0 0 16px #e3350d00}100%{box-shadow:0 18px 40px -16px #e3350daa,0 0 0 0 #e3350d00}}

/* deux bandeaux croisés sous le héros */
.v-bands{position:relative;z-index:2;height:132px;overflow:hidden;margin-top:-18px}
.v-band{position:absolute;left:-5%;width:110%;top:50%;display:flex;padding:13px 0;white-space:nowrap;font-weight:700;font-size:15px;letter-spacing:.01em}
.v-band.k{z-index:2;background:#0e0e12;color:#f6f3ee;transform:translateY(-50%) rotate(-2deg);box-shadow:0 18px 40px -20px #0008;border-top:3px solid var(--yellow)}
.v-band.r{z-index:1;background:var(--red);color:#fff;transform:translateY(-50%) rotate(2deg)}
.v-track{display:flex;flex:none;animation:vMarq var(--dur,60s) linear infinite}
.v-band.r .v-track{animation-direction:reverse}
.v-bands:hover .v-track{animation-play-state:paused}
@keyframes vMarq{to{transform:translateX(-50%)}}
.v-track span{display:inline-flex;align-items:center;gap:10px;padding:0 24px}
.v-track b{font-family:var(--mono);font-weight:600;color:var(--yellow)}
.v-band.r b{color:#fff2a8}
.v-track img{width:18px;height:18px;object-fit:contain}
.v-band.r img{filter:brightness(0) invert(1)}

/* titres de section : pastille numérotée + trait qui se dessine */
.v-eye{display:flex;align-items:center;gap:8px;width:max-content;margin:0 auto 14px;padding:6px 13px 6px 10px;border-radius:999px;background:#fff;border:1px solid #00000012;box-shadow:0 8px 20px -14px #0004;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.v-eye i{width:8px;height:8px;border-radius:50%;background:var(--red)}
.v-eye.live i{animation:vLive 1.6s ease-out infinite}
@keyframes vLive{0%{box-shadow:0 0 0 0 #e3350d88}100%{box-shadow:0 0 0 10px #e3350d00}}
.section h2{position:relative;padding-bottom:18px}
.section h2::after{content:"";position:absolute;left:50%;bottom:0;width:64px;height:5px;margin-left:-32px;border-radius:9px;background:linear-gradient(90deg,var(--red),var(--yellow));transform:scaleX(0);transition:transform .9s .3s cubic-bezier(.2,.8,.2,1)}
.section h2.seen::after{transform:scaleX(1)}

/* apparitions au scroll (classes posées puis retirées par vivant.js) */
.rv{opacity:0;translate:0 30px;filter:blur(5px);transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),translate .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),filter .8s var(--d,0s)}
.rv.in{opacity:1;translate:0 0;filter:blur(0)}

/* le chemin : la ligne se remplit au scroll, les étapes s'allument */
.v-trail{position:absolute;left:50%;top:0;width:3px;height:0;margin-left:-1.5px;border-radius:3px;background:linear-gradient(var(--red),var(--yellow));box-shadow:0 0 12px #e3350d55}
.v-trail::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px #ffcb0540,0 0 20px var(--yellow)}
.stop .pin{position:relative}
.stop .pin img{scale:0}
.stop.seen .pin img{animation:spinSlow 14s linear infinite,vPop .8s cubic-bezier(.3,1.6,.5,1) .2s forwards}
@keyframes vPop{0%{scale:0}100%{scale:1}}
.stop .pin::before{content:"";position:absolute;width:84px;height:84px;border-radius:50%;background:radial-gradient(closest-side,#e3350d30,transparent);opacity:0;transition:opacity .5s}
.stop.lit .pin::before{opacity:1;animation:vAura 2.4s ease-in-out infinite}
.stop .pic img{animation:pinBob 6s ease-in-out infinite}
.stop:nth-child(2) .pic img{animation-delay:-2s}.stop:nth-child(3) .pic img{animation-delay:-4s}
.stop .step-n{display:inline-block;padding:4px 10px;border-radius:999px;background:#e3350d12;transition:background .4s,color .4s}
.stop.lit .step-n{background:var(--red);color:#fff}
@media(max-width:720px){.v-trail{left:32px}}

/* chiffres */
.stats div{position:relative;min-width:170px;padding:18px 26px 16px;border-radius:18px;background:#fff;border:1px solid #0000000d;box-shadow:0 18px 40px -28px #0005;overflow:hidden}
.stats div::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--red),var(--yellow))}
.v-empty{display:flex;flex-direction:column;align-items:center;gap:16px}
.v-empty{perspective:700px}.v-empty>.v-card{width:110px;animation-duration:7s}
.v-empty p{margin:0}

/* les grails : halo qui respire, prix doré */
.shelf .grail{position:relative}
.shelf .grail::before{content:"";position:absolute;left:50%;top:36%;width:135%;aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#ffcb0545,#e3350d14 55%,transparent);animation:vAura 5s ease-in-out infinite}
.shelf .grail:nth-child(2)::before{animation-delay:-1.2s}.shelf .grail:nth-child(3)::before{animation-delay:-2.4s}.shelf .grail:nth-child(4)::before{animation-delay:-3.6s}
@keyframes vAura{0%,100%{opacity:.6;scale:.9}50%{opacity:1;scale:1.06}}
.shelf .grail b{font-size:22px;background:linear-gradient(90deg,#c08a00,var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}

/* paliers : barre de couleur + jauge de probabilité */
.tier{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.tier::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tc,#c9c9cf)}
.tier:hover{transform:translateY(-4px);border-color:#00000022;box-shadow:0 18px 30px -20px var(--tc,#0006)}
.v-meter{display:block;height:4px;margin:10px 6px 0;border-radius:4px;background:#0000000b;overflow:hidden}
.v-meter i{display:block;height:100%;width:calc(var(--w,0) * 100%);border-radius:4px;background:var(--tc,#999);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.2,.8,.2,1) .35s}
.tier.seen .v-meter i{transform:scaleX(1)}

/* villes : point qui bat là où il reste des boosters */
.citygrid a{transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.citygrid a:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px #e3350d99}
.citygrid a:not(.zero) span{position:relative;padding-left:19px}
.citygrid a:not(.zero) span::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--red);animation:vLive 1.8s ease-out infinite}

@media(max-width:720px){
  .v-fl{--k:.6}.v-fl.hm{display:none}
  .v-bands{height:112px}.v-band{font-size:13px;padding:10px 0}
  .stats div{min-width:0;padding:14px 18px}
}
@media(prefers-reduced-motion:reduce){
  .v-bg .b,.v-fl,.v-fl>.in,.v-card,.v-spk,.v-orbit,.v-track,.find,.find::after,.shelf .grail::before,.stop.lit .pin::before,.stop .pic img{animation:none!important}
  .v-fl{opacity:var(--o,1)}.stop .pin img{scale:1}
}