/*
 * EZ ambient effects: weather (rain) and holiday effects.
 * Every element styled here is injected by ez-ambient.js after window load,
 * so nothing here affects first paint, LCP or layout. Selectors all start with
 * .ez-ambient, .ez-ambient-canvas, .ez-ambient-toggle or .ez-lights, which the
 * ez-ambient mu-plugin safelists for WP Rocket's Remove Unused CSS.
 */

.ez-ambient-canvas {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 240; /* under .mobile-callbar (250) and any modal */
	display: block;
}

/* Small "turn off effects" button, bottom-left. Mini EZ lives bottom-right. */
.ez-ambient-toggle {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 245;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(18, 48, 85, 0.14);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #123055;
	box-shadow: 0 4px 12px rgba(8, 22, 44, 0.12);
	opacity: 0.55;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 0.2s ease;
}

.ez-ambient-toggle:hover,
.ez-ambient-toggle:focus-visible {
	opacity: 1;
}

.ez-ambient-toggle:focus-visible {
	outline: 2px solid #1f4f87;
	outline-offset: 2px;
}

.ez-ambient-toggle svg {
	display: block;
	width: 16px;
	height: 16px;
}

.ez-ambient-toggle.ez-ambient-toggle--off {
	opacity: 0.4;
	color: #50575e;
}

/* The fixed .mobile-callbar (<=700px) occupies the bottom ~90px: sit above it. */
@media (max-width: 700px) {
	.ez-ambient-toggle {
		left: 12px;
		bottom: calc(98px + env(safe-area-inset-bottom));
	}
}

/* Holiday lights: a string of small bulbs hanging from the bottom edge of the
   sticky site header. Absolutely positioned, so nothing below moves. */
.ez-lights {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 18px;
	margin-top: -2px;
	padding: 0 12px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	pointer-events: none;
	overflow: hidden;
	z-index: 2;
}

.ez-lights::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 3px;
	height: 1px;
	background: rgba(18, 48, 85, 0.35);
}

.ez-lights .ez-lights__bulb {
	position: relative;
	flex: 0 0 auto;
	width: 7px;
	height: 11px;
	margin-top: 5px;
	border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
	background: var(--ez-bulb, #e2444b);
	box-shadow: 0 0 6px 1px var(--ez-bulb, #e2444b);
	animation: ez-lights-twinkle 4.2s ease-in-out infinite;
	animation-delay: var(--ez-delay, 0s);
}

.ez-lights .ez-lights__bulb::before {
	content: "";
	position: absolute;
	top: -3px;
	left: 1.5px;
	width: 4px;
	height: 3px;
	border-radius: 1px;
	background: #3c4a5d;
}

.ez-lights .ez-lights__bulb:nth-child(5n + 1) { --ez-bulb: #e2444b; }
.ez-lights .ez-lights__bulb:nth-child(5n + 2) { --ez-bulb: #f4b400; }
.ez-lights .ez-lights__bulb:nth-child(5n + 3) { --ez-bulb: #22a35a; }
.ez-lights .ez-lights__bulb:nth-child(5n + 4) { --ez-bulb: #2f7de1; }
.ez-lights .ez-lights__bulb:nth-child(5n + 5) { --ez-bulb: #ff7a1a; }

@keyframes ez-lights-twinkle {
	0%, 100% { opacity: 1; }
	45% { opacity: 0.35; }
	60% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
	.ez-lights .ez-lights__bulb { animation: none; }
}

.ez-ambient[hidden],
.ez-lights[hidden] {
	display: none !important;
}

@media print {
	.ez-ambient,
	.ez-ambient-canvas,
	.ez-ambient-toggle,
	.ez-lights {
		display: none !important;
	}
}