/* ===========================================================================
   AFEBAS — Habillages saisonniers : décors (structure commune)
   ---------------------------------------------------------------------------
   Le plugin dépose en pied de page un conteneur .afb-deco contenant une
   quinzaine d'éléments. Ce fichier les met en mouvement ; chaque fête donne
   ensuite son motif (flocon, cœur, trèfle…) dans son propre fichier.

   Rien n'intercepte le clic : pointer-events:none sur tout le décor.
   Les animations ne portent que sur transform et opacity, celles que le
   navigateur sait animer sans refaire la mise en page.
   =========================================================================== */

.afb-deco{
	position:fixed; inset:0;
	z-index:500;
	pointer-events:none;
	overflow:hidden;
}

/* --- Les éléments qui tombent (ou montent) ------------------------------- */
.afb-deco__f{
	position:absolute;
	top:-10vh;
	left:var(--x,50%);          /* ce qui tombe suit --x ; ce qui traverse suit --y */
	width:18px; height:18px;
	background:var(--afb-accent);
	opacity:.55;
	animation-name:afb-chute;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center;  mask-position:center;
	-webkit-mask-size:contain;     mask-size:contain;
}

@keyframes afb-chute{
	0%   { transform:translate3d(0,-10vh,0) rotate(0deg); }
	100% { transform:translate3d(26px,112vh,0) rotate(300deg); }
}

/* Variante : ce qui traverse l'écran (chauves-souris) */
@keyframes afb-vol{
	0%   { transform:translate3d(-12vw,0,0) scale(.9); }
	25%  { transform:translate3d(18vw,-26px,0) scale(1); }
	50%  { transform:translate3d(48vw,18px,0) scale(.92); }
	75%  { transform:translate3d(78vw,-20px,0) scale(1.04); }
	100% { transform:translate3d(114vw,6px,0) scale(.9); }
}

/* Variante : ce qui éclate sur place puis s'efface (feux d'artifice)
   Une explosion est brève : tout se joue dans les premiers 20 % du cycle,
   le reste du temps la gerbe est éteinte et attend son tour. C'est ce qui
   donne le rythme saccadé d'un vrai feu d'artifice plutôt qu'une fleur
   qui s'ouvre au ralenti. */
@keyframes afb-explosion{
	0%   { transform:scale(.08); opacity:0; }
	3%   { opacity:1; }
	11%  { transform:scale(2.1); opacity:.7; }
	20%  { transform:scale(2.7); opacity:0; }
	100% { transform:scale(2.7); opacity:0; }
}

/* Variante : ce qui s'envole au lieu de tomber (anges, étincelles)
   L'élément est posé juste sous le bas de l'écran (bottom:-10vh) : le
   mouvement part donc de zéro et remonte de toute la hauteur. Une version
   précédente ajoutait 112vh au départ, ce qui le laissait hors de l'écran
   pendant presque tout le cycle — on ne voyait rien. */
@keyframes afb-envol{
	0%   { transform:translate3d(0,0,0) scale(.85); opacity:0; }
	10%  { opacity:.6; }
	85%  { opacity:.6; }
	100% { transform:translate3d(-30px,-118vh,0) scale(1.12); opacity:0; }
}

/* --- Motif d'angle -------------------------------------------------------
   Masqué par défaut : chaque habillage qui en veut un le rend visible et
   donne son motif (toile d'araignée, ruban, cœur, symbole…).              */
.afb-deco__web{
	display:none;
	position:absolute; top:0; left:0;
	width:190px; height:190px;
	opacity:.5;
	background:rgba(255,255,255,.9);
	-webkit-mask:no-repeat left top/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M0 0 L150 40 M0 0 L120 90 M0 0 L80 130 M0 0 L30 150 M0 0 L150 8'/%3E%3Cpath d='M20 6 Q16 16 7 22 M44 13 Q36 34 15 46 M70 21 Q57 54 24 70 M96 29 Q78 73 33 95 M124 37 Q100 93 42 120'/%3E%3C/g%3E%3C/svg%3E");
	mask:no-repeat left top/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M0 0 L150 40 M0 0 L120 90 M0 0 L80 130 M0 0 L30 150 M0 0 L150 8'/%3E%3Cpath d='M20 6 Q16 16 7 22 M44 13 Q36 34 15 46 M70 21 Q57 54 24 70 M96 29 Q78 73 33 95 M124 37 Q100 93 42 120'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- L'araignée au bout de son fil --------------------------------------- */
.afb-deco__spider{
	position:absolute; top:0; left:62%;
	width:34px;
	animation:afb-araignee 9s ease-in-out infinite;
}
.afb-deco__spider i{            /* le fil */
	display:block; margin:0 auto;
	width:1px; height:30vh; min-height:170px;
	background:rgba(255,255,255,.5);
}
.afb-deco__spider b{            /* la bête */
	display:block;
	width:34px; height:36px;
	background:#0b0612;
	-webkit-mask:no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 46'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M24 24 L7 12 M24 24 L3 24 M24 24 L7 38 M24 24 L41 12 M24 24 L45 24 M24 24 L41 38'/%3E%3C/g%3E%3Cellipse cx='24' cy='26' rx='11' ry='13' fill='%23000'/%3E%3Ccircle cx='24' cy='13' r='6' fill='%23000'/%3E%3C/svg%3E");
	mask:no-repeat center/contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 46'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M24 24 L7 12 M24 24 L3 24 M24 24 L7 38 M24 24 L41 12 M24 24 L45 24 M24 24 L41 38'/%3E%3C/g%3E%3Cellipse cx='24' cy='26' rx='11' ry='13' fill='%23000'/%3E%3Ccircle cx='24' cy='13' r='6' fill='%23000'/%3E%3C/svg%3E");
}
/* Deux yeux, pour qu'elle ait l'air de quelque chose */
.afb-deco__spider b::after{ content:none; }

/* Elle descend jusqu'à mi-hauteur de l'écran, marque un temps, puis remonte.
   Mesures en vh : la descente s'adapte à la hauteur de la fenêtre. */
@keyframes afb-araignee{
	0%,100% { transform:translateY(-22vh); }
	45%     { transform:translateY(26vh); }
	55%     { transform:translateY(23vh); }
}

/* --- Moins de monde sur les petits écrans -------------------------------- */
@media (max-width:700px){
	.afb-deco__f:nth-of-type(2n){ display:none; }
	.afb-deco__web{ width:120px; height:120px; }
	.afb-deco__spider{ left:72%; }
}

/* --- Respect du réglage « animations réduites » du système --------------- */
@media (prefers-reduced-motion:reduce){
	.afb-deco__f{ display:none; }
	.afb-deco__spider{ animation:none; }
}

/* --- Impression : pas de décor sur le papier ----------------------------- */
@media print{
	.afb-deco{ display:none !important; }
}