@charset "utf-8";
/* ==========================================================
   ADCT FX  -  all pages
   bubbles (js/bubbles.js), pop score, menu logo glow
   ========================================================== */


/* ---------- bubbles ---------- */

#container {
	--bub: #00B4FF;           /* set per page by bubbles.js */
}

#container .circle {
	border-width: 1.5px !important;               /* was 3px  (-50%) */
	border-style: solid !important;
	border-color: var(--bub) !important;
	opacity: 0.45;
	/* inner glow coming from one side */
	box-shadow: inset 3px 2px 5px -1px var(--bub);
	transition: transform 0.5s ease-out, opacity 0.5s ease-out,
	            border-color 1.5s ease, box-shadow 1.5s ease !important;
}

#container .circle:hover {
	transform: scale(2);
	opacity: 0.8;
	transition: transform 0.1s, opacity 0.1s, border-color 1.5s ease, box-shadow 1.5s ease !important;
}


/* ---------- score rising from a pop ---------- */

.bub-score {
	position: fixed;
	z-index: 20;
	pointer-events: none;
	transform: translate(-50%, -50%);
	color: #00B4FF;             /* page colour, set by bubbles.js */
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-shadow: 0 0 8px currentColor;
	animation: bub-rise 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes bub-rise {
	0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.8); }
	15%  { opacity: 1; transform: translate(-50%, -90%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -320%) scale(1); }
}


/* ---------- menu logo: lights up on hover ---------- */

#home-but .logo {
	transition: filter 0.6s ease, scale 0.6s ease;
}

#home-but:hover .logo,
#home-but:active .logo {
	filter: brightness(1.2) saturate(1.2)
	        drop-shadow(0 0 4px rgba(0, 180, 255, 0.9))
	        drop-shadow(0 0 14px rgba(0, 180, 255, 0.55));
	scale: 1.04;
}


@media (prefers-reduced-motion: reduce) {
	.bub-score { animation-duration: 0.8s; }
}