/*!
 * Caracool Motion — Fondo vivo
 * La capa .cm-fondo la mete cm-fondo.js como primer hijo del contenedor.
 * El fondo propio del contenedor (imagen, color) sigue debajo.
 */
[data-cm-fondo]{position:relative;isolation:isolate;overflow:hidden}
[data-cm-fondo] > .cm-fondo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s ease}
[data-cm-fondo] > .cm-fondo.cm-fondo--visible{opacity:1}
[data-cm-fondo] > :not(.cm-fondo){position:relative;z-index:1}

/* grano fijo: se pinta una vez, no se anima */
.cm-fondo::after{content:"";position:absolute;inset:0;opacity:.14;mix-blend-mode:soft-light;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cm-fondo--sin-grano::after{display:none}

/* olas */
.cm-fondo--olas canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* manchas: solo transform, lo mueve la tarjeta gráfica */
.cm-fondo--manchas i{position:absolute;border-radius:50%;will-change:transform;
	background:radial-gradient(closest-side,var(--cm-m) 0%,transparent 100%);
	animation:cm-fondo-a calc(var(--cm-d,24s) / var(--cm-vel,1)) ease-in-out infinite alternate}
.cm-fondo--manchas i:nth-child(1){width:95%;height:120%;left:-25%;top:-35%;--cm-d:26s}
.cm-fondo--manchas i:nth-child(2){width:80%;height:110%;right:-20%;top:-30%;--cm-d:21s;animation-name:cm-fondo-b}
.cm-fondo--manchas i:nth-child(3){width:90%;height:95%;right:-15%;bottom:-35%;--cm-d:18s;animation-name:cm-fondo-c}
.cm-fondo--manchas i:nth-child(4){width:70%;height:80%;left:5%;bottom:-40%;--cm-d:29s}
.cm-fondo--manchas i:nth-child(5){width:45%;height:90%;right:-12%;top:10%;--cm-d:23s;animation-name:cm-fondo-b;animation-direction:alternate-reverse}
@keyframes cm-fondo-a{0%{transform:translate3d(0,0,0) rotate(0) scale(1)}50%{transform:translate3d(6%,8%,0) rotate(8deg) scale(1.08)}100%{transform:translate3d(-4%,4%,0) rotate(-6deg) scale(.96)}}
@keyframes cm-fondo-b{0%{transform:translate3d(0,0,0) rotate(0) scale(1)}50%{transform:translate3d(-10%,6%,0) rotate(-12deg) scale(1.1)}100%{transform:translate3d(-4%,-6%,0) rotate(6deg) scale(1)}}
@keyframes cm-fondo-c{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-14%,-10%,0) scale(1.12)}100%{transform:translate3d(-6%,4%,0) scale(.94)}}
.cm-fondo--parado i{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
	.cm-fondo--manchas i{animation:none}
	[data-cm-fondo] > .cm-fondo{transition:none}
}