/* Footer "Main Street" scene: indie storefronts + parcel courier (company/partials/footer-street.php, assets/js/footer-street.js) */

.footer-street {
	--fs-wall: #2b3138;
	--fs-trim: #3a424c;
	--fs-dark: #171a1f;
	--fs-sign: #aab0bc;
	--fs-glow: 0.2;
	--fs-box: #d39a5e;
	--fs-box-dark: #a8733e;
	--fs-tape: #f3cfa6;
	--fs-ink: #191e3a;

	max-width: 1200px;
	margin: 8px auto 0;
	padding: 0 12px;
}

.footer-street__svg {
	display: block;
	width: 100%;
	height: auto;
	min-height: 150px;
	aspect-ratio: 1200 / 224;
	overflow: visible;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* Street */

.footer-street__sidewalk { fill: #1b1f24; }
.footer-street__curb { stroke: var(--fs-trim); stroke-width: 1.5; }

.footer-street__stars circle {
	fill: #cacaca;
	opacity: 0.35;
	animation: fs-twinkle 4s ease-in-out infinite;
}

/* Backdrop: far skyline + moon, kept a half-step off the footer background so it reads as depth */
.footer-street__skyline { fill: #262b32; }
.footer-street__lit { fill: #ed8134; opacity: 0.16; }
.footer-street__moon path { fill: #efe7d8; opacity: 0.85; }

.footer-street__lamp { fill: var(--fs-trim); }
.footer-street__bulb { fill: #f6b37f; }

/* Shops */

.footer-street__shop { cursor: pointer; }
.footer-street__wall { fill: var(--fs-wall); }
.footer-street__shop:nth-of-type(even) .footer-street__wall { fill: #2f363e; }
.footer-street__trim { fill: var(--fs-trim); }
.footer-street__upper { fill: var(--fs-dark); }
.footer-street__signboard { fill: var(--fs-dark); }
.footer-street__shade { fill: #000; opacity: 0.22; }
.footer-street__door { fill: var(--fs-dark); }
.footer-street__knob { fill: #f6b37f; }
.footer-street__goods { fill: var(--fs-dark); opacity: 0.75; }

.footer-street__sign {
	fill: var(--fs-sign);
	font-family: Poppins, var(--bs-font-sans-serif, sans-serif);
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
}

.footer-street__brandsign {
	fill: #ed8134;
	font-family: "Orbitron", Poppins, sans-serif;
	font-size: 21px;
	font-weight: 800;
	filter: drop-shadow(0 0 6px rgba(237, 129, 52, 0.55));
	animation: fs-neon 11s steps(1, end) infinite;
}

.footer-street__window {
	fill: url(#fs-window);
	opacity: var(--fs-glow);
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-street__shop:hover,
.footer-street__shop.is-ordering { --fs-glow: 0.55; }
.footer-street__shop--brand { --fs-glow: 0.34; }

.footer-street__awning {
	transform-box: fill-box;
	transform-origin: 50% 0;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-street__shop:hover .footer-street__awning { transform: scaleY(1.12); }

.footer-street__shop--slate .footer-street__awning { fill: #4f6283; }
.footer-street__shop--sage .footer-street__awning { fill: #5d7a66; }
.footer-street__shop--clay .footer-street__awning { fill: #9a6146; }
.footer-street__shop--plum .footer-street__awning { fill: #775a7b; }
.footer-street__shop--brand .footer-street__awning { fill: #ed8134; }

/* "New order!" bubble */

.footer-street__bubble {
	animation: fs-bubble 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.footer-street__bubble rect { fill: #ed8134; }
.footer-street__bubble path { fill: #ed8134; }
.footer-street__bubble text {
	fill: #fff;
	font-family: Poppins, var(--bs-font-sans-serif, sans-serif);
	font-size: 9px;
	font-weight: 600;
}

/* Courier */

.courier { cursor: pointer; }
.courier__shadow { fill: #000; opacity: 0.35; }
.courier__leg { stroke: var(--fs-box-dark); stroke-width: 3; stroke-linecap: round; }
.courier__box { fill: var(--fs-box); }
.courier__flap { stroke: var(--fs-box-dark); stroke-width: 1; }
.courier__tape { fill: var(--fs-tape); }
.courier__eyes { fill: var(--fs-ink); transition: transform 0.25s ease-out; }
.courier__mouth { fill: none; stroke: var(--fs-ink); stroke-width: 1.2; stroke-linecap: round; }

.courier__parcel rect:first-child { fill: var(--fs-box); stroke: var(--fs-box-dark); stroke-width: 0.8; }
.courier__parcel rect + rect { fill: var(--fs-tape); }
.courier__parcel { animation: fs-drop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

.courier__leg,
.courier__body,
.courier__eyes ellipse {
	transform-box: fill-box;
}
.courier__leg { transform-origin: 50% 0; }
.courier__eyes ellipse {
	transform-origin: center;
	animation: fs-blink 5s infinite;
}

.courier__flip { transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); }
.courier.is-left .courier__flip { transform: scaleX(-1); }
.courier__body { transform-origin: 50% 100%; }
.courier.is-catching .courier__body { animation: fs-catch 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

.courier.is-walking .courier__leg--l { animation: fs-step 0.36s ease-in-out infinite alternate; }
.courier.is-walking .courier__leg--r { animation: fs-step 0.36s ease-in-out infinite alternate-reverse; }
.courier.is-walking .courier__body { animation: fs-bob 0.18s ease-in-out infinite alternate; }
.courier.is-hopping .courier__body { animation: fs-hop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes fs-step {
	from { transform: rotate(-22deg); }
	to { transform: rotate(22deg); }
}
@keyframes fs-bob {
	to { transform: translateY(-1.5px); }
}
@keyframes fs-hop {
	40% { transform: translateY(-14px) rotate(-6deg); }
	70% { transform: translateY(0) scale(1.06, 0.92); }
}
@keyframes fs-catch {
	35% { transform: scale(1.1, 0.86); }
}
/* Neon sign: steady, with a brief stutter once per cycle */
@keyframes fs-neon {
	0%, 90%, 92.5%, 96% { opacity: 1; }
	91%, 93.5% { opacity: 0.35; }
	95% { opacity: 0.7; }
}
@keyframes fs-blink {
	0%, 94%, 100% { transform: scaleY(1); }
	97% { transform: scaleY(0.1); }
}
@keyframes fs-drop {
	from { transform: translateY(-18px); opacity: 0; }
}
@keyframes fs-bubble {
	0% { opacity: 0; transform: translateY(8px) scale(0.8); }
	15% { opacity: 1; transform: none; }
	75% { opacity: 1; }
	100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes fs-twinkle {
	50% { opacity: 0.08; }
}

.footer-street__bubble,
.courier__parcel {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

/* Off-screen: freeze the ambient loops (set by footer-street.js) */
.footer-street.is-paused * {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	.footer-street *,
	.courier * {
		animation: none !important;
		transition: none !important;
	}
}