/* Emblem. The council's mark in the homepage hero, drawn once on load: a
   white line traces each wedge (green pair, red pair, then the four black),
   the colour fills in behind the line, and the line stays as a thin keyline.
   Markup is one Elementor HTML widget (_project/blocks/emblem.html): eight
   paths, each the true outline of a wedge traced from the council's logo,
   rounded inner lobes included, so the centre is simply empty and the
   photograph shows through it. Chosen by the client on 27 August 2026 in
   place of the latest-news card. All rules under .u-emblem. Tokens only. */

.u-emblem {
  display: flex;
  justify-content: center;
  /* How much of the drawing line remains once the colour has filled in. */
  --u-emblem-keyline: 0.6;
}

@media (min-width: 40em) {
  .u-emblem {
    justify-content: flex-end;
  }
}

.u-emblem__svg {
  display: block;
  width: clamp(140px, 26vw, 360px);
  height: auto;
  overflow: visible;
  /* A soft halo lifts the mark off the photograph. */
  filter: drop-shadow(var(--u-glow));
}

.u-emblem__wedge--green { fill: var(--u-green); }
.u-emblem__wedge--red   { fill: var(--u-red); }
.u-emblem__wedge--black { fill: var(--u-ink); }

/* Each path carries its own --u-emblem-delay and --u-emblem-length (its
   perimeter) inline, so the dash covers the whole outline exactly. Before
   its turn a wedge is invisible: no fill, the whole stroke hidden in the
   dash gap. */
.u-emblem__wedge {
  fill-opacity: 0;
  stroke: var(--u-white);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-opacity: 1;
  stroke-dasharray: var(--u-emblem-length);
  stroke-dashoffset: var(--u-emblem-length);
  animation:
    u-emblem-draw 1000ms var(--u-ease) forwards,
    u-emblem-fill 700ms var(--u-ease) forwards;
  animation-delay: var(--u-emblem-delay), calc(var(--u-emblem-delay) + 700ms);
}

@keyframes u-emblem-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes u-emblem-fill {
  to {
    fill-opacity: 1;
    stroke-opacity: var(--u-emblem-keyline);
  }
}

/* Anyone who has asked their OS to calm down gets the finished mark. */
@media (prefers-reduced-motion: reduce) {
  .u-emblem__wedge {
    animation: none;
    fill-opacity: 1;
    stroke-dashoffset: 0;
    stroke-opacity: var(--u-emblem-keyline);
  }
}