/* SHOOTKAM v3 — la vie : lueurs qui suivent la souris, inclinaisons, braises, vitesse, direct. */
body{animation:pgin .7s ease-out}@keyframes pgin{from{opacity:0}}
.prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#ff2029,#ff9a5a);box-shadow:0 0 14px var(--ac)}
#embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}

/* lueur qui suit la souris dans les cartes */
.card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,70,80,.22),transparent 45%)}
.card:hover::after{opacity:1}
.card.h.in,.card.h{transition:transform .25s ease-out,border-color .3s,box-shadow .3s,opacity .8s}
.card.h:hover{transform:perspective(900px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.car:hover{transform:perspective(800px) translateY(-5px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.card.h::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:4;opacity:0;transition:opacity .3s;background:conic-gradient(from var(--a,0deg),transparent 0 70%,#ff3340 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card.h:hover::before{opacity:1;animation:rot 2.4s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes rot{to{--a:360deg}}
.card.step.h::before{content:counter(s);position:static;opacity:1;padding:0;-webkit-mask:none;mask:none;animation:none;background:linear-gradient(135deg,#ff3340,#c40f18)}
.card.step.h:hover::before{animation:none}

/* boutons : reflet qui passe, aimant */
.btn{will-change:transform;overflow:hidden}
.btn.p::after,.btn.dc::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}

/* titre du hero : le rouge vit */
.hero h1 em{animation:neon 3.6s ease-in-out infinite}
@keyframes neon{0%,100%{text-shadow:0 0 30px rgba(255,32,41,.55),0 0 80px rgba(255,32,41,.25)}48%{text-shadow:0 0 46px rgba(255,32,41,.9),0 0 110px rgba(255,32,41,.45)}50%{text-shadow:0 0 12px rgba(255,32,41,.4)}52%{text-shadow:0 0 50px rgba(255,32,41,.95),0 0 120px rgba(255,32,41,.5)}}
.pill{position:relative}.pill::before{content:"";position:absolute;inset:-1px;border-radius:30px;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 60%,#ff3340,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rot 3.4s linear infinite;pointer-events:none}
.dot{position:relative}.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2.2s ease-out infinite}@keyframes ping{to{transform:scale(3.2);opacity:0}}

/* egaliseur au pied du hero */
.eq{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;display:flex;align-items:flex-end;gap:5px;padding:0 2vw;pointer-events:none;mask-image:linear-gradient(0deg,#000,transparent);-webkit-mask-image:linear-gradient(0deg,#000,transparent)}
.eq i{flex:1;height:100%;transform-origin:bottom;background:linear-gradient(0deg,rgba(255,32,41,.8),rgba(255,90,54,.1));border-radius:3px 3px 0 0;animation:eq var(--t,1.4s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes eq{from{transform:scaleY(.06)}to{transform:scaleY(var(--m,.6))}}

/* chiffres et jauges qui reagissent en direct */
.flash{animation:fl2 1.2s ease-out}@keyframes fl2{0%{color:#fff;text-shadow:0 0 30px var(--ac);transform:scale(1.25)}100%{transform:none}}
.bar i{position:relative}.bar i::after{content:"";position:absolute;right:0;top:-3px;bottom:-3px;width:14px;border-radius:50%;background:#fff;filter:blur(5px);opacity:.8}
.toasts{position:fixed;left:20px;bottom:20px;z-index:150;display:grid;gap:10px;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:18px;background:rgba(14,14,20,.92);border:1px solid var(--bd2);backdrop-filter:blur(16px);box-shadow:0 20px 50px -10px #000;font:600 .9rem var(--lab);animation:tin .5s cubic-bezier(.2,.9,.2,1.2),tout .5s ease-in 5s forwards}
.toast b{color:var(--ac)}.toast small{display:block;color:var(--mut);font-weight:500}
@keyframes tin{from{opacity:0;transform:translateX(-30px) scale(.9)}}@keyframes tout{to{opacity:0;transform:translateX(-20px)}}

/* titres : mots qui montent, trait qui se dessine */
.sh h2 .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.sh h2 .wd i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0)*70ms)}
.sh.vu h2 .wd i{transform:none}
.sh .kick::before{transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1)}.sh.vu .kick::before{transform:none}
.ph1 h1{background:linear-gradient(90deg,#fff 40%,#ff8f96,#fff 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gl 6s linear infinite}
@keyframes gl{to{background-position:-250% 0}}.ph1 h1 em{-webkit-text-fill-color:var(--ac)}

/* avatars Discord : ils arrivent un par un et flottent */
.pw{opacity:0;transform:scale(.3)}.box.in .pw{animation:pop .55s cubic-bezier(.2,1.4,.3,1) forwards;animation-delay:calc(var(--i,0)*28ms)}
@keyframes pop{to{opacity:1;transform:none}}
.pw img{animation:bob 5s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.4s)}@keyframes bob{50%{transform:translateY(-4px)}}
.pw:hover img{animation:none;transform:scale(1.2)}
.vm img{animation:talk 1.6s ease-in-out infinite}@keyframes talk{50%{box-shadow:0 0 0 2px var(--ok),0 0 14px 2px var(--ok)}}
.gm.ac{animation:glow 2.6s ease-in-out infinite}@keyframes glow{50%{box-shadow:0 0 24px -4px var(--ac)}}
.ds.on{position:relative;overflow:hidden}.ds.on::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18),transparent 70%);transform:translateX(-120%);animation:sw 5s ease-in-out infinite}@keyframes sw{50%,100%{transform:translateX(120%)}}

/* classement : la couronne et les barres */
.pd.n1{animation:bob2 4s ease-in-out infinite}@keyframes bob2{50%{transform:translateY(-6px)}}
.crown{display:inline-block;animation:wob 2.4s ease-in-out infinite}@keyframes wob{50%{transform:rotate(14deg) translateY(-2px)}}
.row .b i{position:relative}.row .b i::after{content:"";position:absolute;right:0;top:-2px;bottom:-2px;width:10px;border-radius:50%;background:#fff;filter:blur(4px)}

/* vinyles et reseaux */
.pl:hover .vin{animation-duration:1.4s}.so .ic{animation:icb 3.4s ease-in-out infinite}@keyframes icb{50%{transform:translateY(-4px) rotate(-5deg)}}
.pl::after{content:"♪ ♫ ♪";position:absolute;right:26px;top:18px;font-size:1.4rem;opacity:.5;animation:note 3.4s ease-in-out infinite;pointer-events:none;z-index:2}@keyframes note{0%{transform:translateY(10px);opacity:0}40%{opacity:.7}100%{transform:translateY(-22px);opacity:0}}

/* pied : grand mot qui defile */
.giant{overflow:hidden;margin:46px 0 -20px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.giant .t{display:flex;width:max-content;gap:50px;animation:mq 40s linear infinite;font:400 clamp(4rem,14vw,10rem)/1 var(--disp);text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14)}
.giant .t span:nth-child(even){-webkit-text-stroke:2px rgba(255,32,41,.45)}.giant:hover .t{animation-play-state:paused}

@media(max-width:1000px){.card::after,.card.h::before{display:none}.eq{height:70px}.toasts{left:10px;right:10px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.eq,#embers,.toasts{display:none}.btn.p::after,.btn.dc::after{display:none}}