/*
 * styleWorks.css — roadworks display styles (split from style.css at the
 * 300-line cap): the hatched overlay, its dimmed treated-this-year state
 * that persists until the calendar year ends, and the "Under construction"
 * tag that fades out after a few seconds.
 */

.works-overlay {
  fill: none;
  stroke: url(#rg-hatch);
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

/* Works finished: the hatch dims but stays until the year ends — a visible
   ledger of what has been treated this year (one treatment per segment per
   year), with the reset state colour showing through. */
.works-overlay.works-done { opacity: 0.35; }

.works-hatch-bg { fill: #d8d3c6; }
.works-hatch-line { stroke: #5f5b52; stroke-width: 2; }

/* Works progress tag ("Resurfacing…" etc.): visible for a few seconds,
   then fades out and removes itself (renderFx listens for animationend).
   Font size is set per-tag by renderFx as a fraction of the viewBox width
   so the apparent size is constant across network sizes. */
@keyframes works-tag-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

.works-tag {
  font-weight: 600;
  fill: #5f5b52;
  stroke: #fff;
  stroke-width: 0.18em;
  paint-order: stroke;
  text-anchor: middle;
  pointer-events: none;
  animation: works-tag-fade 5s ease forwards;
}