/**
 * Sun Particles — partículas de sol 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 partícula se anima por sí sola y se autodestruye al terminar.
 */

/* Contenedor: ya existe (la sección). Solo nos aseguramos de que las
   partículas no provoquen scroll horizontal/vertical si caen fuera. */
body.home .oz-pb-r-0,
body.home .oz-pb-r-1 {
	position: relative;
}

/* Cada partícula es un pequeño "sol" hecho de un SVG inline en background.
   Aparece en posición fixed (relativa a la viewport) porque el JS calcula
   las coordenadas con clientX/clientY. */
.ss-sun-particle {
	position: fixed;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	pointer-events: none;
	z-index: 9999;
	transform: translate3d(-50%, -50%, 0);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='g' cx='50%' cy='50%' r='50%'><stop offset='0%' stop-color='%23FFD66B' stop-opacity='1'/><stop offset='60%' stop-color='%23FFA126' stop-opacity='0.85'/><stop offset='100%' stop-color='%23FF6A00' stop-opacity='0'/></radialGradient></defs><circle cx='16' cy='16' r='6' fill='%23FFD66B'/><g stroke='%23FFA126' stroke-width='2' stroke-linecap='round'><line x1='16' y1='2' x2='16' y2='7'/><line x1='16' y1='25' x2='16' y2='30'/><line x1='2' y1='16' x2='7' y2='16'/><line x1='25' y1='16' x2='30' y2='16'/><line x1='6' y1='6' x2='9.5' y2='9.5'/><line x1='22.5' y1='22.5' x2='26' y2='26'/><line x1='6' y1='26' x2='9.5' y2='22.5'/><line x1='22.5' y1='9.5' x2='26' y2='6'/></g><circle cx='16' cy='16' r='15' fill='url(%23g)' opacity='0.45'/></svg>");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0;
	will-change: transform, opacity;
	animation: ssSunRise 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	filter: drop-shadow(0 0 6px rgba(255, 170, 50, 0.55));
}

/* 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);
}

/* Dirección de subida + giro suave. El JS sólo pone --x (desplazamiento
   horizontal aleatorio) y --r (rotación final). */
@keyframes ssSunRise {
	0% {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(0.4);
	}
	15% {
		opacity: 1;
		transform: translate3d(calc(-50% + (var(--x, 0) * 0.2px)), calc(-50% - 6px), 0) rotate(calc(var(--r, 60) * 0.2deg)) scale(0.9);
	}
	100% {
		opacity: 0;
		transform: translate3d(calc(-50% + var(--x, 0) * 1px), calc(-50% - 70px), 0) rotate(calc(var(--r, 60) * 1deg)) scale(1.05);
	}
}

/* Reduce-motion: no generar partículas (las que existan terminan rápido) */
@media (prefers-reduced-motion: reduce) {
	.ss-sun-particle {
		animation-duration: 0.2s !important;
		filter: none !important;
	}
}