/* NEXT LEVEL · styles for fx.js (highlights, pen strikes, handwriting reveal).
   fx.js measures each element and sets the SVG's exact position and size. */

.mark{position:relative;display:inline-block;--mc: var(--mint);isolation:isolate}
.mark.peach{--mc: var(--peach)}
.mark .fx-u{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.mark .fx-u path{fill:none;stroke:var(--mc);stroke-linecap:round;stroke-linejoin:round}

/* stroke styles: drawn right to left */
.u-line .fx-u path,.u-straight .fx-u path,.u-arch .fx-u path,.u-circle .fx-u path{stroke-width:var(--sw,2px);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease);transition-delay:var(--md,.35s)}
.u-arch .fx-u path{stroke-width:max(2px,.06em)}
.in .mark .fx-u path,.mark.in .fx-u path{stroke-dashoffset:0}
.u-circle .fx-u path{transition-duration:1.3s}
/* hand-drawn X over a word */
.u-x{--mc: var(--peach)}
.u-x.red{--mc: var(--red, #FF4D4F)}
.u-x .fx-u{z-index:-1}
.u-x .fx-u path{stroke-width:var(--sw,3px);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease);transition-delay:var(--md,.35s)}

/* filled styles sit behind the letters and are revealed with a wipe */
.u-box .fx-u,.u-hl .fx-u{z-index:-1;clip-path:inset(0 0 0 100%);transition:clip-path .9s var(--ease);transition-delay:var(--md,.35s)}
.in .mark .fx-u,.mark.in .fx-u{clip-path:inset(0 0 0 0)}
/* brush: bristle strands sit behind the letters and are painted right to left */
.u-brush .fx-u{z-index:-1}
.u-brush .fx-u path{fill:none;stroke:var(--mc);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}
.u-box .fx-u path{fill:var(--mc);stroke:none;stroke-dasharray:none}
.u-hl .fx-u path{fill:var(--mc);stroke:none;stroke-dasharray:none;opacity:.42}
.u-box{color:var(--box-ink, #0E2A1F);transition:color .5s var(--ease);transition-delay:calc(var(--md,.35s) + .2s)}
.u-box.peach{--box-ink:#3A1D08}

/* pen strike */
.strike{position:relative;display:inline-block}
.strike .fx-s{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.strike .fx-s path{fill:none;stroke:var(--pen, var(--peach));stroke-width:max(2px,.08em);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease);transition-delay:var(--d,0s)}
.in .strike .fx-s path{stroke-dashoffset:0}

/* handwriting that writes itself in from the right */
.rewrite{display:block;font-family:"Playpen Sans Hebrew",cursive;font-weight:600}
/* only hidden-until-revealed when scripts run, so nothing stays invisible without JS */
html.js .rewrite{clip-path:inset(0 0 0 100%);transition:clip-path 1.1s var(--ease);transition-delay:calc(var(--d,0s) + .5s)}
html.js .in .rewrite{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion: reduce){
  .mark .fx-u path,.strike .fx-s path{stroke-dashoffset:0;transition:none}
  .mark .fx-u,.rewrite{clip-path:none!important;transition:none}
}