/* Brush — the hand-drawn squiggle. One component, four variants.
   Notes: docs/component-brush-notes.md */

/* --statement: the philosophy panel stroke. */
.brush--statement{
  display:block;
  width:clamp(300px,65vw,700px);
  height:auto;
  margin:1.2rem auto 0;
}
.brush--statement path{
  stroke:var(--gold-dark);
  transition:stroke-dashoffset 2.5s linear;
}
.brush--statement.is-drawn path{stroke-dashoffset:0}

/* --band / --band-sm: shared pen, colour and timing. Width differs. */
.brush--band,
.brush--band-sm{
  display:block;height:auto;
  margin:1.3rem 0 0;overflow:visible;
}
.brush--band{width:min(100%,34rem)}
.brush--band path,
.brush--band-sm path{
  stroke:var(--gold);
  transition:stroke-dashoffset 2.2s linear 1.5s;
}
.band-copy.reveal.visible .brush--band path{stroke-dashoffset:0}

.brush--band-sm{width:min(100%,25rem)}
.video-poster-content.reveal.visible .brush--band-sm path{stroke-dashoffset:0}
@media (max-width:768px){
  .brush--band-sm{width:min(100%,9rem);margin:.9rem 0 0}
}

/* --link: absolute, so it underlines rather than follows. */
.brush--link{
  position:absolute;left:0;bottom:-0.1em;
  width:100%;height:9px;
  overflow:visible;pointer-events:none;
}
.brush--link path{
  stroke:var(--gold-dark);
  transition:stroke-dashoffset 2s linear;
}
.brush-link.is-drawn .brush--link path{stroke-dashoffset:0}

/* Reduced motion — resolves to drawn. */
@media (prefers-reduced-motion:reduce){
  .brush--statement path,
  .brush--band path,
  .brush--band-sm path,
  .brush--link path{
    stroke-dashoffset:0!important;
    animation:none!important;
    transition:none!important;
  }
}