/*
 * City traffic (cb/city-traffic): the skyline along the bottom of the home hero.
 * Wider than the screen and centred on the bridge; the sides run off-screen.
 * State classes, set by view.js:
 *   .cct__set.is-on        the logo set on the buildings
 *   .cct__plate.is-from    the plugin a vehicle just left (blue)
 *   .cct__plate.is-to      a platform that received it (green)
 *   .cct__bubble.is-got    the event was delivered (green, with a check)
 */
/* "body" outranks the width limit a Group's layout puts on its blocks. */
body .cct {
	--cct-w: clamp(780px, 104vw, 2000px);
	position: absolute;
	bottom: 0;
	left: 50%;
	width: var(--cct-w);
	max-width: none;
	aspect-ratio: 1787 / 352;
	transform: translateX(-50%);
	margin: 0;
	pointer-events: none;
}
.cct > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* The block sits at the bottom of the Group it's placed in. That Group gets
   room for the skyline under its text (the top of the drawing is sky, so the
   text may sit over it), so leave the Group's bottom padding unset. "body"
   outranks theme.css's older ".home .hero" padding. */
body .wp-block-group:has(> .wp-block-cb-city-traffic) { position: relative; overflow-x: clip; padding-bottom: calc(clamp(780px, 104vw, 2000px) * 352 / 1787 * .66); }

/* The city draws itself in once, left to right, when it first comes on screen
   (view.js sets pathLength, --d and is-prep, then is-drawn). The logo signs go up after.
   Same drawing as the server-side hero's city (cb/city-crossing). */
.cct.is-prep .drw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.45, .05, .25, 1); transition-delay: var(--d, 0s); }
.cct.is-prep .fad { fill-opacity: 0; transition: fill-opacity .6s ease; transition-delay: calc(var(--d, 0s) + .45s); }
.cct.is-prep .cct__signs { opacity: 0; transition: opacity .6s ease 2s; }
.cct.is-drawn .drw { stroke-dashoffset: 0; }
.cct.is-drawn .fad { fill-opacity: 1; }
.cct.is-drawn .cct__signs { opacity: 1; }
.cct.no-anim * { transition: none !important; }

/* Logos: sets cross-fade */
.cct__set { opacity: 0; transition: opacity .6s ease; }
.cct__set.is-on { opacity: 1; }
.cct__plate { transition: stroke .3s, stroke-width .3s; }
.cct__plate.is-from { stroke: var(--accent, #185A9D); stroke-width: 2; }
.cct__plate.is-to { stroke: var(--accent-alt, #43CEA2); stroke-width: 2.4; }

.cct__check, .cct__vehicle { opacity: 0; transition: opacity .35s; }
.cct__check.is-on, .cct__vehicle.is-on { opacity: 1; }

/* The event bubble rides above the vehicle (HTML, so it stays readable at any size) */
.cct__bubble {
	--b: var(--accent, #185A9D);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 8px 18px -10px rgba(39, 39, 39, .45), 0 0 0 1.5px var(--b);
	font-family: var(--font-mono, "input-sans", monospace);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--strong, #272727);
	opacity: 0;
	transform: translate(-50%, calc(-100% + 6px)) scale(.9);
	transition: opacity .3s, transform .4s cubic-bezier(.3, 1.5, .5, 1), background .3s, color .3s;
}
.cct__bubble.is-on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.cct__bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; background: inherit; transform: translateX(-50%) rotate(45deg); box-shadow: 1.5px 1.5px 0 0 var(--b); }
.cct__i { display: none; width: 14px; height: 14px; flex-shrink: 0; color: var(--accent, #185A9D); }
.cct__bubble[data-icon="bag"] .cct__i--bag,
.cct__bubble[data-icon="form"] .cct__i--form,
.cct__bubble[data-icon="user"] .cct__i--user { display: block; }
.cct__bubble.is-got { --b: var(--accent-alt, #43CEA2); background: var(--accent-alt, #43CEA2); color: #fff; }
.cct__bubble.is-got .cct__i { display: none; }
.cct__bubble.is-got .cct__i--check { display: block; color: #fff; }

@media (max-width: 520px) {
	.cct__bubble { font-size: 10px; padding: 6px 9px; gap: 5px; }
	.cct__i { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.cct * { transition: none !important; }
}

/* The drawing loads from art.svg (view.js). The plain-image backup shows only
   without scripts, or if the file couldn't load. */
.js .cct .city-art-fallback { display: none; }
.js .cct.is-art-fallback .city-art-fallback { display: inline; }