/* The self-writing Breezy B (app/views/shared/_drawn_glyph.html.erb) and the wordmark letters that follow it.
   Shared by the marketing site and the v2 operator app, so the hand-tuned stroke timings have one home.
   Moved here unchanged from marketing.css; see that partial before touching any timing. */

/* ------------------------------------------------------------ drawn glyph */

/* The glyph written by a pen: white mask strokes reveal the ink along the
   writing direction. The flood rect fades in last, guaranteeing the complete
   glyph even where the hand-fitted strokes miss by a hair. Under reduced
   motion the global collapse completes everything instantly. */

/* Dash geometry lives on the path attributes in shared/_drawn_glyph (real
   path lengths; see the comment there). The keyframe animates the offset to
   zero from whatever each stroke's attribute declares. */
.glyph-drawn__stroke {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
}

.glyph-drawn__s1 { stroke-width: 94; }
.glyph-drawn__s2 { stroke-width: 46; }
.glyph-drawn__s3a { stroke-width: 38; } /* the bar is thin; its flag must grow from a nib */
.glyph-drawn__s3 { stroke-width: 100; }
.glyph-drawn__s3b { stroke-width: 50; } /* the ink tapers into the waist */
.glyph-drawn__s4 { stroke-width: 48; } /* the spur is a thin flick */
.glyph-drawn__s5 { stroke-width: 96; }

/* The flood has no resting opacity rule: a browser that never runs the
   animations shows the complete glyph statically (fail-open). `both` holds
   it hidden through the delay when animations do run. */

/* The B is written as two pen strokes, the way a hand makes it: the stem
   (ruled down into the foot, then the serif), then the "3" — top bar, upper
   bowl, waist, spur, and flourish, drawn in one continuous motion. Each
   stroke eases in once as the pen touches down and eases out once as it
   lifts; in between it holds a constant speed, so the only acceleration is
   at the start of a stroke and the only deceleration at its end. The pen
   comes to rest (lifts) once, between the two strokes. Durations are
   proportional to stroke length to keep that mid-stroke speed constant. */
:root {
  /* rest -> cruise: slow touchdown, settling to a constant speed by the end */
  --ease-in: cubic-bezier(0.4, 0, 0.7, 0.7);
  /* cruise -> rest: enters already moving, releases to a stop */
  --ease-out: cubic-bezier(0.3, 0.3, 0.7, 1);
}

/* hero-watermark scale: an unhurried hand
   stem 150-950 · pen lifts to the top · the "3" 1200-3010 ·
   flood (a no-op when coverage is complete) */
.glyph-drawn--slow .glyph-drawn__s1 { animation: glyph-write 660ms var(--ease-in) 150ms forwards; }
.glyph-drawn--slow .glyph-drawn__s2 { animation: glyph-write 140ms var(--ease-out) 810ms forwards; }
.glyph-drawn--slow .glyph-drawn__s3a { animation: glyph-write 330ms var(--ease-in) 1200ms forwards; }
.glyph-drawn--slow .glyph-drawn__s3 { animation: glyph-write 310ms linear 1530ms forwards; }
.glyph-drawn--slow .glyph-drawn__s3b { animation: glyph-write 160ms linear 1840ms forwards; }
.glyph-drawn--slow .glyph-drawn__s4 { animation: glyph-write 130ms linear 2000ms forwards; }
.glyph-drawn--slow .glyph-drawn__s5 { animation: glyph-write 880ms var(--ease-out) 2130ms forwards; }
.glyph-drawn--slow .glyph-drawn__flood { animation: glyph-flood 80ms ease-out 3010ms both; }

/* wordmark scale: a signature, dashed off */
.glyph-drawn--quick .glyph-drawn__s1 { animation: glyph-write 220ms var(--ease-in) 60ms forwards; }
.glyph-drawn--quick .glyph-drawn__s2 { animation: glyph-write 47ms var(--ease-out) 280ms forwards; }
.glyph-drawn--quick .glyph-drawn__s3a { animation: glyph-write 110ms var(--ease-in) 420ms forwards; }
.glyph-drawn--quick .glyph-drawn__s3 { animation: glyph-write 103ms linear 530ms forwards; }
.glyph-drawn--quick .glyph-drawn__s3b { animation: glyph-write 52ms linear 633ms forwards; }
.glyph-drawn--quick .glyph-drawn__s4 { animation: glyph-write 43ms linear 685ms forwards; }
.glyph-drawn--quick .glyph-drawn__s5 { animation: glyph-write 293ms var(--ease-out) 728ms forwards; }
.glyph-drawn--quick .glyph-drawn__flood { animation: glyph-flood 50ms ease-out 1021ms both; }

/* All strokes share this keyframe; each animates from its own
   stroke-dashoffset attribute (len + 1, set in shared/_drawn_glyph) to 0.
   Velocity shaping lives in the per-stroke timing functions above, not here. */
@keyframes glyph-write {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes glyph-flood {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* the nav wordmark's letters follow the pen: 'reezy' inks in left to right
   as the B's bowls and swash are written */
.brand__rest--writes span {
  opacity: 0;
  animation: ink-char 120ms ease-out forwards;
}

.brand__rest--writes span:nth-child(1) { animation-delay: 560ms; }
.brand__rest--writes span:nth-child(2) { animation-delay: 660ms; }
.brand__rest--writes span:nth-child(3) { animation-delay: 760ms; }
.brand__rest--writes span:nth-child(4) { animation-delay: 860ms; }
.brand__rest--writes span:nth-child(5) { animation-delay: 960ms; }

/* the wordmark letters ink in with this (marketing.css keeps its own copy for .ink-char) */
@keyframes ink-char {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}