/* Carrousel maison — effet « nuit » de la slide VANTA (depuis 1.6.0).
   Charge par le PHP seulement quand le jeu contient une slide 'effet' => 'nuit'.

   Une lyre dans la fumee = trois couches : un halo large et diffus, le fut,
   un coeur plus dense pres de l'objectif. Pas de rais de gobos sur le Spot :
   ils decoupaient le faisceau en bandes, Loic le veut lineaire (24/09/2026).
   Dans la slide, le faisceau se dessine sur le fond noir. Hors de la slide, la page est eteinte (.hm-nuit-trou + .hm-nuit-scene en multiply) et le
   fut la RE-VELE a sa couleur : un faisceau bleu sur une page blanche donne du
   bleu, le texte reste lisible dedans. Couleurs saturees, sans coeur blanc :
   « pourquoi y a beaucoup de blanc dans tes faisceaux ? » (Loic, 24/09/2026).

   Rien ne tourne en boucle : flous et degrades sont poses une fois ; seule
   l'opacite monte, en rampe de dimmer, a l'allumage. */

/* ── geometrie commune d'un faisceau ─────────────────────────────────────
   --L longueur, --lw largeur au bout, --w0 rayon de l'objectif, --de angle
   depuis la verticale (degres). Le trapeze part de toute la largeur de
   l'objectif et s'ouvre selon l'angle reel de la fiche. */
.hm-nuit-f, .hm-nuit-l, .hm-rais {
	position: absolute;
	width: var(--lw);
	height: var(--L);
	margin-left: calc(var(--lw) / -2);
	transform-origin: 50% 0;
	transform: rotate(var(--de));
	pointer-events: none;
}
.hm-lx { position: absolute; inset: 0; font-style: normal; }
.hm-lx::before { content: ""; position: absolute; inset: 0; }
.hm-lx-s::before { clip-path: polygon(calc(50% - var(--w0)) 0, calc(50% + var(--w0)) 0, calc(100% - 30px) 100%, 30px 100%); }
.hm-lx-g::before { clip-path: polygon(calc(50% - var(--w0) * 1.8) 0, calc(50% + var(--w0) * 1.8) 0, 100% 100%, 0 100%); }
.hm-lx-k::before { clip-path: polygon(calc(50% - var(--w0) * .42) 0, calc(50% + var(--w0) * .42) 0, calc(50% + (var(--lw) / 2 - 30px) * .38) 100%, calc(50% - (var(--lw) / 2 - 30px) * .38) 100%); }
/* le flou est sur le parent : pose sur l'element decoupe, il serait rogne par son propre clip-path */
.hm-lx-g { filter: blur(18px); }
.hm-lx-s { filter: blur(7px); }
.hm-lx-k { filter: blur(3px); }
.hm-b-beam .hm-lx-s { filter: blur(4px); }
/* Spot : faisceau large (22°), coeur fondu dans le fut — sinon sa bordure
   se lisait comme une bande a part */
.hm-b-spot .hm-lx-s { filter: blur(9px); }
.hm-b-spot .hm-lx-k { filter: blur(12px); }

/* Spot bleu, Beam rouge : les couleurs de leurs objectifs */
/* le bleu se lit plus sombre que le rouge sur fond noir : le Spot est pousse plus fort */
.hm-b-spot { --m: 30, 105, 255; --mk: 55, 135, 255; --gl: 20, 95, 255; --sl: 40, 125, 255; --sa0: 1; --sa1: .5; --ck: 95, 170, 255; }
.hm-b-beam { --m: 255, 12, 6; --mk: 255, 40, 24; --gl: 255, 10, 5; --sl: 255, 16, 8; --sa0: .95; --sa1: .65; --ck: 255, 55, 35; }

/* ── dans la slide ───────────────────────────────────────────────────────
   DEVANT les lyres (z-index 3, sous le texte qui vient apres dans le DOM) :
   sous elles, le faisceau bleu passait derriere la tete du Beam et ne
   semblait plus sortir du Spot (« on voit mal le faisceau bleu partir de la
   lyre spot », Loic, 24/09/2026). Les lyres visent le spectateur, leurs
   faisceaux passent donc devant la lyre voisine. Le faisceau nait en fondu
   sur l'objectif (masque le long de son axe) : la lentille reste visible et
   s'allume d'une lueur (.hm-lx-h). Visibles sur tous les ecrans : sur
   mobile et tablette, c'est tout l'effet. */
/* Allumage au dimmer : de 0 a 100 % en 2 s, courbe sinusoidale (depart et
   arrivee tres doux, comme une rampe DMX), puis extinction de meme quand la
   slide s'en va : « tu peux mettre a 100 % mais tu fais un 0 a 100 % en
   super smooth » (Loic, 24/09/2026). Une seule rampe, jouee a l'arrivee :
   aucune boucle. Pleins feux atteints ~3 s apres l'arrivee de la slide. */
.hm-rais { z-index: 3; opacity: 0; transition: opacity .9s cubic-bezier(.37, 0, .63, 1); }
.hm-slide.hm-nuit-on .hm-rais { opacity: 1; transition: opacity 2s cubic-bezier(.37, 0, .63, 1) .1s; }
.hm-rais .hm-lx-g, .hm-rais .hm-lx-s, .hm-rais .hm-lx-k {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--w0) * 1.5));
	mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--w0) * 1.5));
}
/* la lueur de l'objectif : ecran (screen), elle eclaire la lentille sans la couvrir */
.hm-rais .hm-lx-h { mix-blend-mode: screen; }
.hm-rais .hm-lx-h::before {
	inset: auto;
	left: 50%;
	top: 0;
	width: calc(var(--w0) * 2.6);
	height: calc(var(--w0) * 2.6);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--ck), .75) 0, rgba(var(--ck), .35) 38%, rgba(var(--ck), 0) 70%);
}
.hm-rais .hm-lx-g::before { background: linear-gradient(to bottom, rgba(var(--gl), .5), rgba(var(--gl), .15)); }
.hm-rais .hm-lx-s::before { background: linear-gradient(to bottom, rgba(var(--sl), var(--sa0)), rgba(var(--sl), var(--sa1))); }
.hm-rais .hm-lx-k::before { background: linear-gradient(to bottom, rgba(var(--ck), .9), rgba(var(--ck), .15)); }
.hm-rais.hm-b-spot .hm-lx-k::before { background: linear-gradient(to bottom, rgba(var(--ck), .85), rgba(var(--ck), 0) 85%); }

/* ── la page eteinte ─────────────────────────────────────────────────────
   Calques poses a la racine du document par night.js, en coordonnees de
   page : ils defilent avec elle sans une ligne de JS au scroll.
   · .hm-nuit-trou : l'ombre geante de la slide, rognee au-dessus de son
     bord haut (le reste est l'affaire de la scene) ;
   · .hm-nuit-scene : a partir du haut de la slide, trouee a sa forme
     (clip-path evenodd) pour qu'un faisceau puisse sortir par le cote ;
     fond #0f0f0f en multiply = la meme obscurite que l'ombre a .94 ;
   · .hm-nuit-lueur : le halo colore, en screen. */
.hm-nuit > * { position: absolute; pointer-events: none; margin: 0; padding: 0; }
.hm-nuit-trou {
	z-index: 99990;
	border-radius: 10px;
	box-shadow: 0 0 0 300vmax rgba(0, 0, 0, .94);
	opacity: 0;
	transition: opacity .5s ease;
	clip-path: polygon(-300vmax -300vmax, 300vmax -300vmax, 300vmax 0, -300vmax 0);
}
.hm-nuit-scene, .hm-nuit-lueur { left: 0; overflow: hidden; opacity: 0; transition: opacity .25s ease; }
.hm-nuit-scene { z-index: 99991; background: #0f0f0f; mix-blend-mode: multiply; }
.hm-nuit-lueur { z-index: 99992; mix-blend-mode: screen; }
.hm-nuit.on .hm-nuit-trou { opacity: 1; transition-duration: .9s; }
.hm-nuit.on .hm-nuit-scene { opacity: 1; transition: opacity .9s ease; }
.hm-nuit-f { opacity: 0; transition: opacity .5s ease; }
/* meme rampe de dimmer que les faisceaux de la slide : ils montent ensemble */
.hm-nuit.on .hm-nuit-lueur,
.hm-nuit.on .hm-nuit-f { opacity: 1; transition: opacity 2s cubic-bezier(.37, 0, .63, 1) .1s; }
.hm-nuit-scene .hm-lx-s::before { background: linear-gradient(to bottom, rgba(var(--m), 1), rgba(var(--m), .93)); }
.hm-nuit-scene .hm-lx-k::before { background: linear-gradient(to bottom, rgba(var(--mk), 1), rgba(var(--mk), .75)); }
.hm-nuit-lueur .hm-lx-g::before { background: linear-gradient(to bottom, rgba(var(--gl), .4), rgba(var(--gl), .1)); }

/* l'objectif s'allume, une fois */
.hm-nuit-halo {
	z-index: 99993;
	width: var(--h);
	height: var(--h);
	margin: calc(var(--h) / -2) 0 0 calc(var(--h) / -2);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--hc), .95) 0, rgba(var(--c), .85) 22%, rgba(var(--c), .3) 46%, rgba(var(--c), 0) 70%);
	opacity: 0;
}
.hm-nuit-halo.hm-b-spot { --c: 30, 110, 255; --hc: 120, 185, 255; }
.hm-nuit-halo.hm-b-beam { --c: 255, 20, 10; --hc: 255, 95, 70; }
.hm-nuit.on .hm-nuit-halo { animation: hm-nuit-halo 2s cubic-bezier(.37, 0, .63, 1) .1s both; }
@keyframes hm-nuit-halo {
	0%   { opacity: 0; transform: scale(.6); }
	100% { opacity: .7; transform: scale(1); }
}

/* moins d'animations demandees : jamais la page eteinte (night.js ne la
   construit pas), et les faisceaux de la slide apparaissent sans fondu */
@media (prefers-reduced-motion: reduce) {
	.hm-nuit { display: none !important; }
	.hm-rais, .hm-slide.hm-nuit-on .hm-rais { transition: none; }
}