/* BassinVR · décor Halloween animé (aperçu). Calque décoratif : pointer-events:none, jamais sur les boutons. */
.hx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.hx svg{position:absolute;overflow:visible}

/* Citrouilles : bougie qui vacille, léger rebond */
.hx-pk{width:92px;bottom:18px;animation:hxBob 3.6s ease-in-out infinite;transform-origin:50% 100%}
.hx-pk.l{left:10px}.hx-pk.r{right:92px;width:74px;animation-delay:-1.3s}
.hx-pk .flame{animation:hxFlick .18s steps(2) infinite alternate}
.hx-pk .glow{animation:hxGlow 2.4s ease-in-out infinite}
@keyframes hxBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes hxFlick{0%{opacity:.82}100%{opacity:1}}
@keyframes hxGlow{0%,100%{opacity:.55}45%{opacity:1}55%{opacity:.7}70%{opacity:.95}}

/* Squelette suspendu : balancement + mâchoire qui claque + bras qui gigotent */
.hx-sk{width:92px;top:-6px;left:17%;transform-origin:50% 0;animation:hxSwing 4.2s ease-in-out infinite}
.hx-sk .jaw{transform-origin:50% 0;transform-box:fill-box;animation:hxJaw .5s ease-in-out infinite}
.hx-sk .armL{transform-origin:100% 0;transform-box:fill-box;animation:hxArmL 1.4s ease-in-out infinite}
.hx-sk .armR{transform-origin:0 0;transform-box:fill-box;animation:hxArmR 1.4s ease-in-out infinite}
.hx-sk .legL{transform-origin:50% 0;transform-box:fill-box;animation:hxArmR 1.8s ease-in-out infinite}
.hx-sk .legR{transform-origin:50% 0;transform-box:fill-box;animation:hxArmL 1.8s ease-in-out infinite}
@keyframes hxSwing{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
@keyframes hxJaw{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes hxArmL{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-24deg)}}
@keyframes hxArmR{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(24deg)}}

/* Araignée qui descend au bout de son fil */
.hx-sp{width:46px;top:0;right:7%;animation:hxDrop 7s ease-in-out infinite}
.hx-sp .legs{animation:hxWiggle .35s ease-in-out infinite alternate;transform-origin:50% 50%;transform-box:fill-box}
@keyframes hxDrop{0%,100%{transform:translateY(-120px)}35%,60%{transform:translateY(150px)}75%{transform:translateY(110px)}}
@keyframes hxWiggle{0%{transform:scaleX(1)}100%{transform:scaleX(.88)}}

/* Fantômes qui traversent en flottant */
.hx-gh{width:70px;top:30%;left:-120px;opacity:.0;animation:hxGhost 19s linear infinite;--gho:.55}
.hx-gh.b{width:50px;top:58%;animation-duration:24s;animation-delay:-11s}
.hx-gh path.body{animation:hxWave 1.6s ease-in-out infinite alternate;transform-origin:50% 100%;transform-box:fill-box}
@keyframes hxGhost{0%{transform:translate(0,0);opacity:0}6%{opacity:var(--gho,.55)}25%{transform:translate(32vw,-30px)}50%{transform:translate(64vw,20px)}75%{transform:translate(96vw,-20px);opacity:var(--gho,.55)}88%{opacity:0}100%{transform:translate(125vw,0);opacity:0}}
@keyframes hxWave{0%{transform:skewX(-4deg)}100%{transform:skewX(4deg)}}

/* Chauves-souris : vol + battement d'ailes */
.hx-bat{width:40px;top:14%;left:-60px;animation:hxBat 11s linear infinite}
.hx-bat.b{width:28px;top:20%;animation-duration:14s;animation-delay:-5s}
.hx-bat.c{width:22px;top:9%;animation-duration:9s;animation-delay:-2s}
.hx-bat .w{animation:hxFlap .22s ease-in-out infinite alternate;transform-origin:50% 50%;transform-box:fill-box}
@keyframes hxBat{0%{transform:translate(0,0)}20%{transform:translate(25vw,30px)}45%{transform:translate(55vw,-25px)}70%{transform:translate(85vw,20px)}100%{transform:translate(120vw,-10px)}}
@keyframes hxFlap{0%{transform:scaleY(1)}100%{transform:scaleY(.35)}}

/* Brouillard au sol */
.hx-fog{position:absolute;left:-30%;right:-30%;bottom:-60px;height:150px;opacity:.6;background:radial-gradient(closest-side,rgba(190,170,220,.22),transparent),radial-gradient(closest-side at 30% 60%,rgba(160,140,200,.18),transparent),radial-gradient(closest-side at 75% 50%,rgba(200,180,230,.16),transparent);filter:blur(14px);animation:hxFog 22s ease-in-out infinite alternate}
.hx-fog.b{bottom:-80px;height:170px;opacity:.45;animation-duration:30s;animation-direction:alternate-reverse}
@keyframes hxFog{0%{transform:translateX(-6%)}100%{transform:translateX(6%)}}

/* Toiles aux coins */
.hx-web{width:150px;top:0;opacity:.35}.hx-web.l{left:0}.hx-web.r{right:0;transform:scaleX(-1)}

/* Éclair lointain (très léger) */
.hx-flash{position:absolute;inset:0;background:radial-gradient(circle at 70% 0,rgba(210,190,255,.16),transparent 55%);opacity:0;animation:hxFlash 13s infinite}
@keyframes hxFlash{0%,93%,100%{opacity:0}94%{opacity:1}95%{opacity:.2}96.5%{opacity:.9}98%{opacity:0}}

/* Section accueil / page Halloween : lune, cimetière, yeux dans le noir */
.hx-scene{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hx-moon{position:absolute;top:30px;right:6%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fff8df,#f3d98f 55%,#d9b65a 100%);box-shadow:0 0 60px 18px rgba(255,214,120,.28),0 0 140px 60px rgba(255,140,40,.12);animation:hxMoon 6s ease-in-out infinite}
.hx-moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 62% 58%,rgba(160,120,60,.35) 0 9%,transparent 10%),radial-gradient(circle at 35% 68%,rgba(160,120,60,.28) 0 6%,transparent 7%),radial-gradient(circle at 55% 30%,rgba(160,120,60,.22) 0 5%,transparent 6%)}
@keyframes hxMoon{0%,100%{box-shadow:0 0 60px 18px rgba(255,214,120,.28),0 0 140px 60px rgba(255,140,40,.12)}50%{box-shadow:0 0 80px 26px rgba(255,214,120,.36),0 0 170px 70px rgba(255,140,40,.16)}}
.hx-grave{position:absolute;left:0;right:0;bottom:0;width:100%;height:140px}
.hx-eyes{position:absolute;width:34px;height:12px;animation:hxBlink 5s infinite}
.hx-eyes::before,.hx-eyes::after{content:"";position:absolute;top:0;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle,#fff6a8,#ffb300 55%,transparent 70%);box-shadow:0 0 12px 3px rgba(255,179,0,.6)}
.hx-eyes::before{left:0}.hx-eyes::after{right:0}
.hx-eyes.e1{bottom:70px;left:18%}.hx-eyes.e2{bottom:96px;right:24%;animation-delay:-2.2s;transform:scale(.8)}.hx-eyes.e3{bottom:58px;left:62%;animation-delay:-3.7s;transform:scale(.65)}
@keyframes hxBlink{0%,40%,46%,100%{opacity:1}43%{opacity:0}70%,74%{opacity:.15}}
.hw-home .wrap{position:relative;z-index:1}
.hw-hero{position:relative}.hw-hero > *:not(.hx-scene){position:relative;z-index:1}
.hw-hero{padding-bottom:120px!important}

/* Interaction : survoler une affiche de jeu la fait trembler */
.hw-strip a:hover,.hw-card:hover{animation:hxShake .35s ease-in-out 2}
@keyframes hxShake{0%,100%{transform:translate(0)}25%{transform:translate(-2px,1px) rotate(-.6deg)}75%{transform:translate(2px,-1px) rotate(.6deg)}}

/* Réservation : décor plus discret (pas de fantôme qui traverse le formulaire) */
.hx.calm .hx-gh,.hx.calm .hx-flash{display:none}
.hx.calm .hx-pk{width:64px}.hx.calm .hx-pk.r{width:54px}

/* Mobile : moins d'éléments, au-dessus de la barre du bas */
@media (max-width:700px){
 .hx-pk{width:46px;bottom:84px}.hx-pk.r{width:40px;right:76px}
 .hx .hx-sk{display:none}
 .hx-sp{width:30px;right:auto;left:44%}
 .hx-gh.b,.hx-bat.c,.hx-web{display:none}
 .hx-moon{width:80px;height:80px;top:18px}
 .hx-grave{height:100px}
}
@media (prefers-reduced-motion:reduce){
 .hx *,.hx-scene *,.hx-moon,.hx-eyes{animation:none!important}
 .hx-gh,.hx-bat,.hx-sp,.hx-flash{display:none}
}

/* Squelette du cimetiere qui fait coucou */
.hx-sk2{position:absolute;right:9%;bottom:18px;width:70px;z-index:0;animation:hxPeek 6s ease-in-out infinite;transform-origin:50% 100%}
.hx-sk2 .armR{transform-origin:0 0;transform-box:fill-box;animation:hxWaveArm .45s ease-in-out infinite alternate}
@keyframes hxPeek{0%,15%{transform:translateY(70%)}30%,75%{transform:translateY(0)}90%,100%{transform:translateY(70%)}}
@keyframes hxWaveArm{0%{transform:rotate(-150deg)}100%{transform:rotate(-110deg)}}
@media (max-width:700px){.hx-sk2{width:50px;right:6%}}
@media (prefers-reduced-motion:reduce){.hx-sk2{transform:none}}