/* Thème « arène » du tunnel de réservation : le fond d'ambiance de la page (sol de l'arène, lueurs, particules).
   Toujours sur la page /reserver de Pulzar ; sur le site d'un centre, seulement s'il le demande (data-fond="theme" sur la balise du
   chargeur). Ne vise que body.resa-page et .resa-main. Couleurs : variables de la palette du centre, au défaut officiel Zero Latency. */
/* ---------- 1. Fond d'ambiance de la page (sol de l'arène, lueurs, particules) ---------- */
/* Le sol : le motif de l'arène couché en perspective, qui défile lentement vers le joueur. */
.resa-main{position:relative;z-index:1}
body.resa-page{overflow-x:clip}
body.resa-page::before{
  content:"";position:fixed;z-index:0;pointer-events:none;
  left:-60%;right:-60%;bottom:-8vh;height:150vh;
  background:url(/_pulzar/immersive/assets/sol-arene.svg) 0 0/240px 240px repeat;
  opacity:.42;transform-origin:50% 100%;
  transform:perspective(560px) rotateX(66deg) translateY(0);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 30%,transparent 62%);
          mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 30%,transparent 62%);
  animation:arene-sol 16s linear infinite;
}
/* Lueurs cyan et bleue + particules + voile pour garder le texte lisible. */
body.resa-page::after{
  content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background:
    url(/_pulzar/immersive/assets/particules.svg) center/cover no-repeat,
    radial-gradient(40% 30% at 18% 12%,rgba(var(--pz-arene-accent-rgb,65,192,240),.20),transparent 70%),
    radial-gradient(38% 28% at 88% 34%,rgba(30,144,255,.16),transparent 70%),
    radial-gradient(60% 30% at 50% 100%,rgba(var(--pz-arene-accent-rgb,65,192,240),.10),transparent 70%),
    linear-gradient(180deg,#080c14 0%,rgba(8,12,20,.2) 30%,rgba(8,12,20,.35) 70%,rgba(8,12,20,.75) 100%);
  animation:arene-lueurs 22s ease-in-out infinite alternate;
}
@keyframes arene-sol{to{transform:perspective(560px) rotateX(66deg) translateY(240px)}}
@keyframes arene-lueurs{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-1.5%,0) scale(1.04)}100%{transform:translate3d(-2%,1%,0) scale(1.02)}}