/**
 * Animated thunderstorm background, shared by the homepage and the two
 * WP-Members auth pages (My Account / Registration — page-templates/
 * cricket-account.php). Replaces the theme's static lightning-photo custom
 * background image (disabled below, on those pages only) with a live
 * flashing/bolt effect. Only enqueued where psp_is_storm_page() is true —
 * see functions.php.
 */

/* Disable the theme's static custom background image only on the pages
   this is enqueued for; leave it untouched everywhere else. */
body.home.custom-background,
body.page-id-4532.custom-background,
body.page-id-4533.custom-background {
	background-image: none !important;
}

.cricket-storm {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background: radial-gradient( 120% 90% at 20% 15%, #16305c 0%, #0a1830 45%, #050d1c 100% );
}

.cricket-storm__rain {
	position: absolute;
	inset: -20% -10% -10% -10%;
	background-image: repeating-linear-gradient(
		112deg,
		rgba( 255, 255, 255, 0.07 ) 0px,
		rgba( 255, 255, 255, 0.07 ) 1px,
		transparent 1px,
		transparent 15px
	);
	animation: cricket-rain-fall 0.7s linear infinite;
}

@keyframes cricket-rain-fall {
	from { background-position: 0 0; }
	to { background-position: -42px 64px; }
}

.cricket-storm__flash {
	position: absolute;
	inset: 0;
	opacity: 0;
	mix-blend-mode: screen;
}

.cricket-storm__flash--1 {
	background: radial-gradient( 55% 45% at 80% 18%, rgba( 214, 231, 255, 0.95 ), rgba( 160, 200, 255, 0.25 ) 42%, transparent 72% );
	animation: cricket-flash-a 8s ease-in-out infinite;
}

.cricket-storm__flash--2 {
	background: radial-gradient( 50% 40% at 65% 30%, rgba( 214, 231, 255, 0.85 ), rgba( 160, 200, 255, 0.2 ) 42%, transparent 72% );
	animation: cricket-flash-b 13s ease-in-out infinite;
	animation-delay: 3.6s;
}

@keyframes cricket-flash-a {
	0%, 91% { opacity: 0; }
	92% { opacity: 1; }
	93% { opacity: 0.15; }
	94% { opacity: 0.9; }
	96%, 100% { opacity: 0; }
}

@keyframes cricket-flash-b {
	0%, 93% { opacity: 0; }
	94% { opacity: 0.8; }
	95% { opacity: 0.1; }
	96.5% { opacity: 0.6; }
	99%, 100% { opacity: 0; }
}

.cricket-storm__bolt {
	position: absolute;
	top: -4%;
	width: 130px;
	height: 65%;
	opacity: 0;
	filter: drop-shadow( 0 0 10px rgba( 200, 224, 255, 0.9 ) ) drop-shadow( 0 0 26px rgba( 120, 170, 255, 0.6 ) );
}

.cricket-storm__bolt polyline {
	fill: none;
	stroke: #f2f8ff;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cricket-storm__bolt--1 {
	right: 8%;
	animation: cricket-bolt-a 8s ease-in-out infinite;
}

.cricket-storm__bolt--2 {
	right: 22%;
	top: 3%;
	height: 52%;
	animation: cricket-bolt-b 13s ease-in-out infinite;
	animation-delay: 3.6s;
}

.cricket-storm__bolt--3 {
	right: 1%;
	top: 12%;
	height: 42%;
	animation: cricket-bolt-c 17s ease-in-out infinite;
	animation-delay: 7.1s;
}

@keyframes cricket-bolt-a {
	0%, 91% { opacity: 0; }
	92% { opacity: 1; }
	93% { opacity: 0.2; }
	94% { opacity: 1; }
	96%, 100% { opacity: 0; }
}

@keyframes cricket-bolt-b {
	0%, 93% { opacity: 0; }
	94% { opacity: 1; }
	95% { opacity: 0.15; }
	96.5% { opacity: 0.85; }
	99%, 100% { opacity: 0; }
}

@keyframes cricket-bolt-c {
	0%, 95% { opacity: 0; }
	96% { opacity: 1; }
	97% { opacity: 0.2; }
	98% { opacity: 0.8; }
	100% { opacity: 0; }
}

@media ( max-width: 767px ) {
	.cricket-storm__bolt {
		width: 90px;
	}

	.cricket-storm__bolt--3 {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-storm__flash,
	.cricket-storm__bolt,
	.cricket-storm__rain {
		animation: none !important;
		opacity: 0 !important;
	}
}