/* Seven Lines. The homepage signature: seven curves in the flag colours,
   drawn once when the block scrolls into view, then a slow drift. Markup is
   one Elementor HTML widget (_project/blocks/seven-lines.html). All rules
   under .u-seven-lines. */

.u-seven-lines {
  position: relative;
  width: 100%;
  min-height: 320px;
  aspect-ratio: 800 / 620;
}

.u-seven-lines svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Decorative only; never intercept clicks on content layered near it. */
  pointer-events: none;
}

.u-seven-lines path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.92;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  /* 3s, slowed from 2.2s on 27 August 2026 at the client's request. The
     per-line delays are inline in the markup. */
  animation: u-seven-lines-draw 3s var(--u-ease) forwards,
             u-seven-lines-drift 16s var(--u-ease) infinite alternate;
}

/* With JavaScript (html.u-js, printed by inc/block-seven-lines.php) there
   is no animation at all until assets/js/seven-lines.js sees the block in
   the viewport and adds the in-view class; the animation is then created
   at that moment and its delays count from there. The base dashoffset
   above keeps the lines hidden meanwhile. Not animation-play-state: Chrome
   resumes an animation paused during its delay with the delay skipped.
   Without JavaScript the flag is never set and the rule above draws on
   load. */
.u-js .u-seven-lines:not(.u-seven-lines--in-view) path {
  animation: none;
}

@keyframes u-seven-lines-draw { to { stroke-dashoffset: 0; } }
@keyframes u-seven-lines-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-20px, 12px, 0); } }

/* Colours are stroke attributes in the markup so the drawing survives
   without this file; the token comment in tokens.css lists them. */

@media (prefers-reduced-motion: reduce) {
  .u-seven-lines path {
    stroke-dashoffset: 0;
    animation: none;
  }
}