/* Animated hero for the free sheet music page, loaded only by the page that shows it
   (moved out of styles.css so other pages don't download it). */

/* ---------------------------------------------------- Free sheet music hero */
/* Animated hero on /free-sheet-music: a free music library lists
   public-domain pieces; one is downloaded as a PDF, which opens on the
   leader's tablet and then a follower's. Art is drawn at 1200x600;
   public/hero.js scales it via --fm-scale. */
.fm-hero{--fm-accent:#4f8cff;--fm-dur:8s;--fm-bg:#f3f5fa;--fm-line:rgba(22,33,58,0.22);--fm-label:#5b6478;--fm-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--fm-bg)}
.fm-hero.fm-dark{--fm-bg:#0e1626;--fm-line:rgba(255,255,255,0.22);--fm-label:#c9cfdb}
.fm-hero > .fm-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--fm-scale))}
.fm-scn .fm-row1{animation:fm-pick var(--fm-dur) ease-out infinite}
@keyframes fm-pick{0%,9%{background:#f3f5fa;box-shadow:none}13%,30%{background:#e3ecff;box-shadow:inset 3px 0 0 var(--fm-accent)}36%,100%{background:#f3f5fa;box-shadow:none}}
.fm-scn .fm-get{animation:fm-get var(--fm-dur) ease-out infinite}
@keyframes fm-get{0%,14%{transform:none}17%{transform:scale(.82)}20%,100%{transform:none}}
.fm-scn .fm-doc{animation:fm-doc var(--fm-dur) cubic-bezier(.45,0,.25,1) infinite}
@keyframes fm-doc{0%,18%{opacity:0;transform:translateX(0) scale(.6)}23%,29%{opacity:1;transform:translateX(0) scale(1)}39%{opacity:1;transform:translateX(240px) scale(1)}43%,100%{opacity:0;transform:translateX(270px) scale(.5)}}
.fm-scn .fm-hold{animation:fm-hold var(--fm-dur) ease-out infinite}
@keyframes fm-hold{0%,41%{opacity:1}44%,97%{opacity:0}100%{opacity:1}}
.fm-scn .fm-land{animation:fm-land var(--fm-dur) ease-out infinite}
@keyframes fm-land{0%,41%{opacity:0;transform:scale(.96)}45%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
.fm-scn .fm-pkt{opacity:0;animation:fm-pkt var(--fm-dur) cubic-bezier(.4,0,.2,1) infinite}
@keyframes fm-pkt{0%,48%{transform:translateX(0);opacity:0}49%{opacity:1}54%{transform:translateX(28px);opacity:1}55%,100%{transform:translateX(28px);opacity:0}}
.fm-scn .fm-wait{animation:fm-wait var(--fm-dur) ease-out infinite}
@keyframes fm-wait{0%,54%{opacity:1}57%,97%{opacity:0}100%{opacity:1}}
.fm-scn .fm-land-f{animation-name:fm-landf}
@keyframes fm-landf{0%,54%{opacity:0;transform:scale(.96)}58%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
.fm-scn .fm-chip-fol{animation:fm-chip var(--fm-dur) ease-out infinite}
@keyframes fm-chip{0%,54%{box-shadow:0 0 0 0 rgba(79,140,255,0)}58%{box-shadow:0 0 0 6px rgba(79,140,255,.25)}70%,100%{box-shadow:0 0 0 0 rgba(79,140,255,0)}}
.fm-chip-lead,.fm-chip-free{background:#16213a;color:#ffffff}
.fm-chip-fol{background:#ffffff;color:#16213a;box-shadow:0 0 0 1px rgba(22,33,58,.12)}
/* Site integration, matching the other guide heroes. */
.legal .fm-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1200 / 580;
  --fm-bg: transparent;
  --fm-view-w: 1200;
  --fm-crop-x: 0px;
  --fm-crop-y: -20px;
  -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 .fm-hero > .fm-scn { transform: scale(var(--fm-scale)) translate(var(--fm-crop-x), var(--fm-crop-y)); }
/* !important because the art sets the chips' transform inline. */
.legal .fm-hero .fm-chip { transform: translateX(-50%) scale(1.5) !important; transform-origin: 50% 100%; }
.js .fm-hero:not(.pt-ready) > .fm-scn { visibility: hidden; }
:root[data-theme="light"] .fm-hero { --fm-line: rgba(22, 33, 58, 0.22); --fm-label: #5b6478; }