/*
 * INFRASTRUCTURE RAIN + LIGHTNING EFFECT v2.1
 *
 * Pure CSS rain drops with wind slant, intensity ramp-up,
 * random lightning flashes, and stormy bridge overlay.
 * JS creates elements dynamically and manages phases.
 *
 * Last updated: Feb 22 2026, by AI Assistant
 */
/* ---- Rain Container ---- */
.rain-layer {

	--rain-angle: 90deg;
	--rain-speed-multiplier: 1.8;
	--rain-visibility: 0.2;
	position: absolute;
	inset: 0;
	z-index: 2;

	opacity: 0;

	overflow: hidden;

	pointer-events: none;

	transition: opacity var(--rain-fade-duration, 0.8s) ease;
}

.rain-layer.raining {
	opacity: 0.75;
}
/* ---- Individual Drop (slanted ~15° leftward via rotate) ---- */
.rain-drop {
	position: absolute;
	top: -5vmin;
	left: var(--x);

	width: 0;
	height: 0;

	border: 0.25vmin solid transparent;
	border-bottom-color: rgba(171, 194, 233, var(--drop-opacity));
	border-left-width: var(--size);

	opacity: calc(var(--drop-opacity) * var(--rain-visibility));

	animation: rain-fall calc(var(--speed) * var(--rain-speed-multiplier)) var(--delay) linear infinite;
}
/* Wind-slanted fall — 75deg = ~15° leftward slant */

@keyframes rain-fall {
	0% {
		transform: rotate(var(--rain-angle)) translateX(0);
	}

	8% {
		transform: rotate(var(--rain-angle)) translateX(0);
	}

	100% {
		transform: rotate(var(--rain-angle)) translateX(calc(100vh + 5vmin));
	}
}
/* ---- Intensity Phases (controlled via classes on .rain-layer) ---- */
/* Phase 1: light rain — fewer visible drops */
.rain-layer.rain-phase-1 {
	--rain-visibility: 0.3;
	--rain-speed-multiplier: 1.8;
	--rain-angle: 90deg;
}
/* Phase 2: moderate rain */
.rain-layer.rain-phase-2 {
	--rain-visibility: 0.6;
	--rain-speed-multiplier: 1.05;
	--rain-angle: 83deg;
}
/* Phase 3: full intensity */
.rain-layer.rain-phase-3 {
	--rain-visibility: 1;
	--rain-speed-multiplier: 0.55;
	--rain-angle: 74deg;
}
/* ---- Lightning Flash (full-sky wash) ---- */
.lightning-flash {
	position: absolute;
	inset: 0;
	z-index: 3;

	background: linear-gradient(180deg,
	rgba(255, 255, 255, 0.7) 0%,
	rgba(255, 255, 255, 0.28) 40%,
	rgba(200, 210, 230, 0.1) 100%);

	opacity: 0;

	pointer-events: none;

	animation: lightning-strike var(--flash-duration, 0.15s) ease-out forwards;
}

@keyframes lightning-strike {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0.8;
	}

	30% {
		opacity: 0.3;
	}

	50% {
		opacity: 0.6;
	}

	100% {
		opacity: 0;
	}
}
/* ---- Storm timeline layer states v1.1 ---- */
#infrastructure {
	--storm-transition-duration: 3.2s;
	overflow: hidden;
}

#infrastructure .background {
	overflow: hidden;
}

#infrastructure #background-clouds,
#infrastructure #background-bridge,
#infrastructure .bridge-background,
#infrastructure #background-above,
#infrastructure #background-clouds-storm,
#infrastructure #background-bridge-storm {
	transition: opacity var(--storm-transition-duration) ease;
}

#infrastructure #background-clouds,
#infrastructure #background-bridge,
#infrastructure .bridge-background {
	opacity: 1;
}

#infrastructure #background-above,
#infrastructure #background-clouds-storm,
#infrastructure #background-bridge-storm {
	opacity: 0;
}

#infrastructure #background-clouds-storm {
	transition-timing-function: linear;
}
/* Requested calm-state drift on #background-clouds */
#infrastructure #background-clouds img {
	/* animation: infrastructureCloudDrift 34s ease-in-out infinite alternate; */
}
/* Storm-above layer drift v1.0 */
#infrastructure #background-above img {
	/* width: 175%; */
	/* max-width: none; */

	opacity: 1;
	/* animation: infrastructureAboveDrift 34s ease-in-out infinite alternate; */
}

#infrastructure #background-clouds-storm img {
	/* width: 175%; */
	/* max-width: none; */
	/* animation: infrastructureStormCloudDrift 36s ease-in-out infinite alternate; */
}

@keyframes infrastructureCloudDrift {
	0% {
		transform: translateX(-2%);
	}

	100% {
		transform: translateX(2%);
	}
}

@keyframes infrastructureAboveDrift {
	0% {
		transform: translateX(-2%);
	}

	100% {
		transform: translateX(2%);
	}
}

@keyframes infrastructureStormCloudDrift {
	0% {
		transform: translateX(2%);
	}

	100% {
		transform: translateX(-2%);
	}
}
/* Transition begins when rain starts */
#infrastructure.storm-transitioning #background-clouds,
#infrastructure.storm-transitioning #background-bridge,
#infrastructure.storm-active #background-clouds,
#infrastructure.storm-active #background-bridge {
	opacity: 0;
}

#infrastructure.storm-transitioning #background-above,
#infrastructure.storm-active #background-above {
	mix-blend-mode: normal;

	opacity: 0.75;
}

#infrastructure.storm-transitioning #background-clouds-storm,
#infrastructure.storm-active #background-clouds-storm {
	opacity: 1;
}

#infrastructure.storm-transitioning #background-bridge-storm,
#infrastructure.storm-active #background-bridge-storm {
	opacity: 1;
}
/* ---- Stormy Bridge Overlay ---- */
#infrastructure .background-top img {
	transition: filter 2s ease, opacity 2s ease, mix-blend-mode 0s;
}
/* Bridge crossfade: clear → storm v1.0 */
#infrastructure #background-bridge-storm {
	opacity: 0;

	transition: opacity 2.5s ease;
}

#infrastructure #background-bridge {
	opacity: 1;

	transition: opacity 2.5s ease;
}
/* ---- Splash Drops v1.0 ---- */
/* Containers sit on top/left edges of surfaces; drops bounce outward */
.splash-zone {
	position: absolute;
	z-index: 10;

	overflow: visible;

	pointer-events: none;
}

.splash-zone--top {
	top: -2px;
	left: 0;
	right: 0;

	height: 4px;
}

.splash-drop {
	position: absolute;

	width: 2px;
	height: 4px;

	border-radius: 50%;

	background: rgba(200, 220, 255, 0.85);

	box-shadow: 0 0 3px rgba(180, 210, 255, 0.5);

	animation: splash-oblique var(--splash-speed, 0.45s) ease-out forwards;
}
/* v1.1 – Oblique bounce: up + rightward (opposite the 75deg leftward rain) */

@keyframes splash-oblique {
	0% {
		opacity: 0.9;
		transform: translateY(0) translateX(0) scale(1);
	}

	100% {
		opacity: 0;
		transform: translateY(calc(-1 * var(--splash-dist, 20px)))
			translateX(var(--splash-drift, 12px))
			scale(0.2);
	}
}