/**
 * Bubble Particles — burbujas de jabón al pasar el mouse sobre las dos
 * primeras secciones del home (.oz-pb-r-0 y .oz-pb-r-1).
 *
 * El JS crea un <div class="ss-sun-particle"> en el cursor cada vez que se
 * mueve. Cada burbuja flota hacia arriba y se autodestruye al terminar.
 * (Se conserva el nombre de clase ss-sun-particle para no tocar el JS.)
 */

body.home .oz-pb-r-0,
body.home .oz-pb-r-1 {
	position: relative;
}

/* Cada partícula es una burbuja de jabón translúcida con brillo, en tonos
   del tema (verde / azul claro). Aparece en posición fixed (clientX/Y). */
.ss-sun-particle {
	position: fixed;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	pointer-events: none;
	z-index: 9999;
	transform: translate3d(-50%, -50%, 0);
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 28%),
		radial-gradient(circle at 70% 75%, rgba(56, 189, 248, .40) 0%, rgba(56, 189, 248, 0) 60%),
		radial-gradient(circle at 50% 50%, rgba(186, 230, 253, .35) 0%, rgba(56, 189, 248, .20) 55%, rgba(2, 132, 199, .12) 100%);
	border: 1px solid rgba(255, 255, 255, .55);
	box-shadow:
		inset 0 0 6px rgba(255, 255, 255, .5),
		0 0 8px rgba(56, 189, 248, .40);
	opacity: 0;
	will-change: transform, opacity;
	animation: ssBubbleRise 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Pequeño punto de brillo extra en la burbuja. */
.ss-sun-particle::after {
	content: "";
	position: absolute;
	top: 18%;
	left: 24%;
	width: 28%;
	height: 28%;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	filter: blur(.5px);
}

/* Variaciones de tamaño aleatorias (las elige el JS añadiendo --s) */
.ss-sun-particle {
	width: calc(var(--s, 18) * 1px);
	height: calc(var(--s, 18) * 1px);
}

/* Subida flotante con leve deriva horizontal. El JS pone --x (deriva) y --r. */
@keyframes ssBubbleRise {
	0% {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(0.3);
	}
	15% {
		opacity: 1;
		transform: translate3d(calc(-50% + (var(--x, 0) * 0.2px)), calc(-50% - 6px), 0) scale(0.9);
	}
	70% {
		opacity: .9;
	}
	100% {
		opacity: 0;
		transform: translate3d(calc(-50% + var(--x, 0) * 1px), calc(-50% - 90px), 0) scale(1.1);
	}
}

/* Reduce-motion: burbujas casi instantáneas */
@media (prefers-reduced-motion: reduce) {
	.ss-sun-particle {
		animation-duration: 0.2s !important;
		box-shadow: none !important;
	}
}