/* Animated hero for the marking-up guide, loaded only by the page that shows it. */

/* ------------------------------------------------------------ Mark-up hero */
/* Animated hero on /mark-up-sheet-music: a stylus circles a passage in red on
   the leader's tablet, highlights a line, and adds a breath mark and mf. A dot
   carries each mark down the line, and it appears on the follower's tablet a
   moment later. Art is drawn at 1200x600; public/hero.js scales it via
   --mu-scale. */
.mu-hero{--mu-accent:#4f8cff;--mu-dur:8s;--mu-bg:#f3f5fa;--mu-line:rgba(22,33,58,0.22);--mu-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--mu-bg)}
.mu-hero.mu-dark{--mu-bg:#0e1626;--mu-line:rgba(255,255,255,0.22)}
.mu-hero > .mu-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--mu-scale))}
.mu-chip-lead{background:#16213a;color:#ffffff}
.mu-chip-fol{background:#ffffff;color:#16213a;box-shadow:0 0 0 1px rgba(22,33,58,.12)}
/* The ring draws itself; the other marks pop in. The follower's copy runs
   the same keyframes a little later (--mu-lag). */
.mu-scn .mu-lead{--mu-lag:0s}
.mu-scn .mu-fol{--mu-lag:.5s}
.mu-scn .mu-l-ring,.mu-scn .mu-f-ring{stroke-dasharray:100;animation:mu-ring var(--mu-dur) ease-in-out infinite;animation-delay:var(--mu-lag)}
@keyframes mu-ring{0%,8%{stroke-dashoffset:100;opacity:1}24%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.mu-scn .mu-l-hl,.mu-scn .mu-f-hl{transform-box:fill-box;transform-origin:0 50%;animation:mu-hl var(--mu-dur) ease-out infinite;animation-delay:var(--mu-lag)}
@keyframes mu-hl{0%,30%{transform:scaleX(0)}40%,90%{transform:scaleX(1);opacity:1}96%,100%{transform:scaleX(1);opacity:0}}
.mu-scn .mu-l-br,.mu-scn .mu-f-br{transform-box:fill-box;transform-origin:50% 50%;animation:mu-pop1 var(--mu-dur) cubic-bezier(.3,1.6,.5,1) infinite;animation-delay:var(--mu-lag)}
@keyframes mu-pop1{0%,48%{transform:scale(0)}54%,90%{transform:scale(1);opacity:1}96%,100%{opacity:0}}
.mu-scn .mu-l-mf,.mu-scn .mu-f-mf{transform-box:fill-box;transform-origin:50% 50%;animation:mu-pop2 var(--mu-dur) cubic-bezier(.3,1.6,.5,1) infinite;animation-delay:var(--mu-lag)}
@keyframes mu-pop2{0%,64%{transform:scale(0)}70%,90%{transform:scale(1);opacity:1}96%,100%{opacity:0}}
/* The stylus visits each mark on the leader's tablet in turn. Its tip sits at
   the element's bottom-centre, so each stop is the mark's spot minus (9, 150). */
.mu-scn .mu-pen{animation:mu-pen var(--mu-dur) ease-in-out infinite}
@keyframes mu-pen{0%{transform:translate(520px,40px) rotate(24deg);opacity:0}4%{transform:translate(413px,108px) rotate(24deg);opacity:1}8%{transform:translate(413px,108px) rotate(24deg)}12%{transform:translate(341px,136px) rotate(24deg)}16%{transform:translate(269px,108px) rotate(24deg)}20%{transform:translate(341px,81px) rotate(24deg)}24%{transform:translate(413px,108px) rotate(24deg)}30%{transform:translate(231px,223px) rotate(24deg)}40%{transform:translate(369px,223px) rotate(24deg)}48%,54%{transform:translate(433px,90px) rotate(24deg)}64%,70%{transform:translate(258px,316px) rotate(24deg);opacity:1}80%,100%{transform:translate(560px,330px) rotate(24deg);opacity:0}}
/* A dot carries each mark to the other tablet. */
.mu-scn .mu-dot{opacity:0;animation:mu-dot var(--mu-dur) cubic-bezier(.4,0,.2,1) infinite}
@keyframes mu-dot{0%,12%{transform:translateX(0);opacity:0}13%{opacity:1}19%{transform:translateX(254px);opacity:1}20%,100%{transform:translateX(254px);opacity:0}}
/* Site integration, matching the other guide heroes. */
.legal .mu-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1200 / 560;
  --mu-bg: transparent;
  --mu-view-w: 1200;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent),
                      linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent),
              linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.legal .mu-hero > .mu-scn { transform: scale(var(--mu-scale)) translate(0, -20px); }
/* !important because the art sets the chips' transform inline. */
.legal .mu-hero .mu-chip { transform: translateX(-50%) scale(1.5) !important; transform-origin: 50% 100%; }
.js .mu-hero:not(.pt-ready) > .mu-scn { visibility: hidden; }
:root[data-theme="light"] .mu-hero { --mu-line: rgba(22, 33, 58, 0.22); }