/* Generated by build_growth.py — decorative growth layer. Do not hand-edit. */

/* --contentw is the page's content column: 34rem on the card (card.css
   default), 40rem on the writing pages (article.css). The pieces are
   capped to the empty band either side of it, so they can never sit
   under the text at any viewport size. */
.growth {
  position: fixed;
  width: min(46vmin, max(0px, calc((100vw - var(--contentw, 34rem)) / 2 - 0.75rem)));
  height: auto;
  aspect-ratio: 1;
  pointer-events: none;
  z-index: -1; /* behind the content, above the page background */
}

.growth--bl { left: 0; bottom: 0; }
.growth--tr { right: 0; top: 0; }

.g-seg {
  fill: none;
  stroke: var(--line-strong, #52676a);
  stroke-width: 1.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: g-draw 1.4s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.g-pad {
  fill: var(--accent);
  opacity: 0;
  animation: g-lit 0.5s ease-out forwards;
}

.g-tick {
  fill: none; /* open square: distinct from the solid pads */
  stroke: var(--accent);
  stroke-width: 1.4;
  opacity: 0;
}

/* The escapement. After the assembly settles, each corner's accent
   square advances one notch and its counterpart answers 0.2s later in
   the opposite direction; both hold, then reverse on the next cycle.
   One paired event every 16s is the entire idle motion. */
.g-tick--a {
  animation: g-lit 0.4s ease-out 11.4s forwards,
             g-step-a 16s cubic-bezier(0.4, 0, 0.2, 1) 14s infinite;
}

.g-tick--b {
  animation: g-lit 0.4s ease-out 11.6s forwards,
             g-step-b 16s cubic-bezier(0.4, 0, 0.2, 1) 14.2s infinite;
}

@keyframes g-step-a {
  0%, 1% { transform: translate(0, 0); }
  2.2%, 50% { transform: translate(14.0px, 0.0px); }
  51.2%, 100% { transform: translate(0, 0); }
}

@keyframes g-step-b {
  0%, 1% { transform: translate(0, 0); }
  2.2%, 50% { transform: translate(-14.0px, 0.0px); }
  51.2%, 100% { transform: translate(0, 0); }
}

@keyframes g-draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes g-lit {
  from { opacity: 0; }
  to { opacity: 0.7; }
}

.g-a-d0 { animation-delay: 0.50s; }
.g-a-d1 { animation-delay: 1.20s; }
.g-a-d2 { animation-delay: 1.90s; }
.g-a-d3 { animation-delay: 2.60s; }
.g-a-d4 { animation-delay: 3.30s; }
.g-a-d5 { animation-delay: 4.00s; }
.g-b-d0 { animation-delay: 0.70s; }
.g-b-d1 { animation-delay: 1.40s; }
.g-b-d2 { animation-delay: 2.10s; }
.g-b-d3 { animation-delay: 2.80s; }
.g-b-d4 { animation-delay: 3.50s; }
.g-b-d5 { animation-delay: 4.20s; }
.g-a-pad-d0 { animation-delay: 2.10s; }
.g-a-pad-d1 { animation-delay: 2.80s; }
.g-a-pad-d2 { animation-delay: 3.50s; }
.g-a-pad-d3 { animation-delay: 4.20s; }
.g-a-pad-d4 { animation-delay: 4.90s; }
.g-a-pad-d5 { animation-delay: 5.60s; }
.g-a-pad-d6 { animation-delay: 6.30s; }
.g-a-pad-d7 { animation-delay: 7.00s; }
.g-a-pad-d8 { animation-delay: 7.70s; }
.g-a-pad-d9 { animation-delay: 8.40s; }
.g-b-pad-d0 { animation-delay: 2.30s; }
.g-b-pad-d1 { animation-delay: 3.00s; }
.g-b-pad-d2 { animation-delay: 3.70s; }
.g-b-pad-d3 { animation-delay: 4.40s; }
.g-b-pad-d4 { animation-delay: 5.10s; }
.g-b-pad-d5 { animation-delay: 5.80s; }
.g-b-pad-d6 { animation-delay: 6.50s; }
.g-b-pad-d7 { animation-delay: 7.20s; }
.g-b-pad-d8 { animation-delay: 7.90s; }
.g-b-pad-d9 { animation-delay: 8.60s; }

/* Composed still for anyone who asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .g-seg { animation: none; stroke-dashoffset: 0; }
  .g-pad { animation: none; opacity: 0.55; }
  .g-tick { animation: none; opacity: 0.7; }
}

/* No empty band to grow into on narrow viewports. */
@media (max-width: 60rem) {
  .growth { display: none; }
}