/* The six motions of the Hemilake mark (brand/README.md, "Motion"). Generated by brand/build.py; edit
   that and run `make brand`, never a copy.

   The markup they animate is brand/motion/hemilake-motion.inline.svg: the ring (.mark-ring, a path from 12
   o'clock down the left side, 166.5 long) and the copper half (.mark-half, its level a clip inset from
   the top: 42px empties it). The motion's class goes on the svg or on any element around it. Four motions
   add copies of the two parts to that markup:
     Remember          after the half, <path class="mark-drop" d="M32 5.5 A26.5 26.5 0 1 0 32 58.5 A26.5 26.5 0 1 0 32 5.5" fill="none" stroke="#B5673B" stroke-width="3"/>
     Answer            before the ring, <circle class="mark-ripple" cx="32" cy="32" r="26.5" fill="none" stroke="#B5673B" stroke-width="1.5"/>
                       and a second one with stroke-width="1"
     Supersede         before the half, <path class="mark-old" d="M32 11 A21 21 0 0 1 32 53 Z" fill="#B5673B"/>
     One becomes many  the ring as <circle class="mark-ring" cx="32" cy="32" r="26.5" fill="none" stroke="currentColor" stroke-width="3"/>,
                       after the half <circle class="mark-centre" cx="32" cy="32" r="0" fill="currentColor"/>, and
                       mark-morph on the svg: adding mark-many next to it turns it into Plurilake, removing it turns it back
   Draw in, Remember, Answer and Supersede play once when their class is added; Recall loops while it is there. */

.mark-drop,.mark-ripple{opacity:0}
.mark-ripple{transform-box:fill-box;transform-origin:center}
.mark-old{clip-path:inset(42px 0px 0px 0px)}
.mark-morph .mark-ring{stroke-dasharray:166.5 0;stroke-dashoffset:18}
.mark-morph.mark-many .mark-ring{r:23px;stroke-width:10;stroke:#4B6FB0;stroke-dasharray:30 6.1}
.mark-morph.mark-many .mark-half{opacity:0}
.mark-morph.mark-many .mark-centre{r:7px}

@media (prefers-reduced-motion: no-preference){
/* Draw in: the ring draws in 800 ms, then the level rises from empty in 700 ms from 600 ms */
.mark-draw-in .mark-ring{stroke-dasharray:166.5;animation:mark-draw 800ms cubic-bezier(.65,0,.35,1) both}
.mark-draw-in .mark-half{animation:mark-rise 700ms cubic-bezier(.2,.7,.2,1) 600ms both}
/* Recall: the level 100 → 60 → 100 % every 2400 ms */
.mark-recall .mark-half{animation:mark-recall 2400ms cubic-bezier(.45,0,.55,1) infinite}
/* Remember: a copper drop runs down the left of the ring in 900 ms and fades, then the half brightens in 400 ms */
.mark-remember .mark-drop{stroke-dasharray:20 200;animation:mark-drop 1070ms cubic-bezier(.45,0,.55,1) both}
.mark-remember .mark-half{animation:mark-land 400ms cubic-bezier(.2,.7,.2,1) 900ms both}
/* Answer: two ripples grow from the ring to 122 % and fade in 1400 ms, the second 300 ms later */
.mark-answer .mark-ripple{animation:mark-ripple 1400ms cubic-bezier(.2,.7,.2,1) forwards}
.mark-answer .mark-ripple~.mark-ripple{animation-delay:300ms}
/* Supersede: the copper fades to stone in 650 ms and drains in 800 ms; new copper fills in 1000 ms */
.mark-supersede .mark-old{animation:mark-drain 1450ms cubic-bezier(.45,0,.55,1) both}
.mark-supersede .mark-half{animation:mark-rise 1000ms cubic-bezier(.2,.7,.2,1) 1380ms both}
/* One becomes many: 1200 ms each way, the half fading and the centre growing inside it */
.mark-morph .mark-ring{transition:r 1200ms cubic-bezier(.45,0,.55,1),stroke-width 1200ms cubic-bezier(.45,0,.55,1),stroke 1200ms linear,stroke-dasharray 1200ms cubic-bezier(.45,0,.55,1)}
.mark-morph .mark-half{transition:opacity 860ms linear 340ms}
.mark-morph.mark-many .mark-half{transition:opacity 860ms linear}
.mark-morph .mark-centre{transition:r 960ms cubic-bezier(.45,0,.55,1)}
.mark-morph.mark-many .mark-centre{transition:r 960ms cubic-bezier(.2,.7,.2,1) 240ms}

@keyframes mark-draw{from{stroke-dashoffset:166.5}to{stroke-dashoffset:0}}
@keyframes mark-rise{from{clip-path:inset(42px 0px 0px 0px)}to{clip-path:inset(0px 0px 0px 0px)}}
@keyframes mark-recall{0%,100%{clip-path:inset(0px 0px 0px 0px)}50%{clip-path:inset(17px 0px 0px 0px)}}
@keyframes mark-drop{0%{stroke-dashoffset:20;opacity:1}84%{stroke-dashoffset:-63;opacity:1}100%{stroke-dashoffset:-63;opacity:0}}
@keyframes mark-land{from{opacity:.72}to{opacity:1}}
@keyframes mark-ripple{from{transform:scale(1);opacity:.55}to{transform:scale(1.22);opacity:0}}
@keyframes mark-drain{0%{fill:#B5673B;clip-path:inset(0px 0px 0px 0px)}45%{fill:#A39C91;clip-path:inset(0px 0px 0px 0px)}100%{fill:#A39C91;clip-path:inset(42px 0px 0px 0px)}}
}