/* ───────────────────────────────────────────────────────────────
   Wailytics brush-stroke animation
   --------------------------------------------------------------
   Drop-in CSS for a hand-drawn purple brush that paints itself
   on across the page on load. Three colour variants, all driven
   by a single CSS custom property.

   Usage:

     <link rel="stylesheet" href="brush.css">

     <span class="brush color-violet">
       <span class="stroke s1"></span>
       <span class="stroke s2"></span>
       <span class="stroke s3"></span>
     </span>

   To trigger the wipe, add the classes .armed and .play to the
   wrapper (in that order). brush.js handles this automatically
   on load. For static use, omit both classes and the brush
   renders fully drawn.
   ─────────────────────────────────────────────────────────── */

.brush {
  position: relative;
  display: inline-block;
  width: 100%;
  aspect-ratio: 2127 / 739;
  pointer-events: none;

  /* These two are the knobs */
  --duration: 1000ms;
  --brush-color: #6048F0;          /* default: vivid violet */
}

.brush .stroke {
  position: absolute;
  inset: 0;
  background-color: var(--brush-color);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

.brush .s1 { -webkit-mask-image: url("brush-stroke-1.png"); mask-image: url("brush-stroke-1.png"); }
.brush .s2 { -webkit-mask-image: url("brush-stroke-2.png"); mask-image: url("brush-stroke-2.png"); }
.brush .s3 { -webkit-mask-image: url("brush-stroke-3.png"); mask-image: url("brush-stroke-3.png"); }

/* Not yet armed: show fully drawn (print, no-JS, fallback) */
.brush:not(.armed) .stroke {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* Armed + play: run the wipe */
.brush.armed.play .stroke {
  animation: brush-wipe var(--duration) cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes brush-wipe {
  from { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0); }
}

/* Honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .brush.armed .stroke {
    animation: none !important;
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
  }
}

/* ── Colour variants ─────────────────────────────────────────── */
.brush.color-violet     { --brush-color: #6048F0; }   /* vivid violet */
.brush.color-deeppurple { --brush-color: #5018B8; }   /* deep purple */
.brush.color-teal       { --brush-color: #14B8A6; }   /* teal spark */

/* ── Two-stroke variant ──────────────────────────────────────── */
/* Mark the wrapper with .two-strokes and hide the bottom stroke */
.brush.two-strokes .s3 { display: none; }