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

/* --------------------------------------------------------- Set list hero */
/* Animated hero on /set-lists: four PDFs in a gig folder sort into numbered
   order, load into the leader's set list, and the first song opens on the
   leader's and a follower's tablets; then "Next piece" moves both to song 2.
   Art is drawn at 1200x600; public/hero.js scales it via --sl-scale. */
.sl-hero{--sl-accent:#4f8cff;--sl-dur:9s;--sl-bg:#f3f5fa;--sl-line:rgba(22,33,58,0.22);--sl-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--sl-bg)}
.sl-hero.sl-dark{--sl-bg:#0e1626;--sl-line:rgba(255,255,255,0.22)}
.sl-hero > .sl-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--sl-scale))}
/* 1. The files sort: each row starts in its scrambled slot (116px = two rows). */
.sl-scn .sl-row{animation:var(--sl-dur) cubic-bezier(.6,0,.25,1) infinite}
.sl-scn .sl-row0,.sl-scn .sl-row1{animation-name:sl-down}
.sl-scn .sl-row2,.sl-scn .sl-row3{animation-name:sl-up}
@keyframes sl-down{0%{opacity:0;transform:translateY(116px)}6%,10%{opacity:1;transform:translateY(116px)}24%,88%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(0)}}
@keyframes sl-up{0%{opacity:0;transform:translateY(-116px)}6%,10%{opacity:1;transform:translateY(-116px)}24%,88%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(0)}}
.sl-scn .sl-chip-sort{animation:sl-sorted var(--sl-dur) ease-out infinite}
@keyframes sl-sorted{0%,23%{opacity:0}27%,88%{opacity:1}94%,100%{opacity:0}}
/* 2. They travel to the leader and fill the set list one by one. */
.sl-scn .sl-pkt{opacity:0;animation:var(--sl-dur) cubic-bezier(.4,0,.2,1) infinite}
.sl-scn .sl-pkt-a{animation-name:sl-pkt-a}
@keyframes sl-pkt-a{0%,29%{transform:translateX(0);opacity:0}31%{opacity:1}38%{transform:translateX(258px);opacity:1}40%,100%{transform:translateX(258px);opacity:0}}
.sl-scn .sl-item{animation:var(--sl-dur) ease-out infinite}
.sl-scn .sl-item0{animation-name:sl-item0}
.sl-scn .sl-item1{animation-name:sl-item1}
.sl-scn .sl-item2{animation-name:sl-item2}
.sl-scn .sl-item3{animation-name:sl-item3}
@keyframes sl-item0{0%,38%{opacity:0;transform:translateX(-12px)}41%,100%{opacity:1;transform:none}}
@keyframes sl-item1{0%,41%{opacity:0;transform:translateX(-12px)}44%,100%{opacity:1;transform:none}}
@keyframes sl-item2{0%,44%{opacity:0;transform:translateX(-12px)}47%,100%{opacity:1;transform:none}}
@keyframes sl-item3{0%,47%{opacity:0;transform:translateX(-12px)}50%,100%{opacity:1;transform:none}}
.sl-scn .sl-cur{animation-name:sl-item0,sl-cur;animation-duration:var(--sl-dur);animation-iteration-count:infinite}
@keyframes sl-cur{0%,50%{background:transparent;box-shadow:none}53%,100%{background:#e3ecff;box-shadow:inset 3px 0 0 var(--sl-accent)}}
/* 3. Song 1 opens on the leader, then on the follower. */
.sl-scn .sl-panel{animation:sl-panel var(--sl-dur) ease-in-out infinite}
@keyframes sl-panel{0%,54%{opacity:1}58%,96%{opacity:0}100%{opacity:1}}
.sl-scn .sl-pkt-b{animation-name:sl-pkt-b}
@keyframes sl-pkt-b{0%,57%{transform:translateX(0);opacity:0}58%{opacity:1}62%{transform:translateX(28px);opacity:1}63%,100%{transform:translateX(28px);opacity:0}}
.sl-scn .sl-wait{animation:sl-wait var(--sl-dur) ease-out infinite}
@keyframes sl-wait{0%,61%{opacity:1}64%,97%{opacity:0}100%{opacity:1}}
.sl-scn .sl-song1-f{animation:sl-song1f var(--sl-dur) ease-out infinite}
@keyframes sl-song1f{0%,61%{opacity:0;transform:scale(.96)}64%,96%{opacity:1;transform:none}100%{opacity:0}}
/* 4. "Next piece": both move to song 2. */
.sl-scn .sl-next{animation:sl-next var(--sl-dur) ease-out infinite}
@keyframes sl-next{0%,60%{opacity:0;transform:none}63%,68%{opacity:1;transform:none;background:#16213a}70%{transform:scale(.9);background:var(--sl-accent)}73%,90%{opacity:1;transform:none;background:#16213a}94%,100%{opacity:0}}
.sl-scn .sl-song2{animation:sl-song2 var(--sl-dur) ease-out infinite}
@keyframes sl-song2{0%,71%{opacity:0;transform:translateX(12px)}74%,96%{opacity:1;transform:none}100%{opacity:0}}
.sl-scn .sl-pkt-c{animation-name:sl-pkt-c}
@keyframes sl-pkt-c{0%,72%{transform:translateX(0);opacity:0}73%{opacity:1}77%{transform:translateX(28px);opacity:1}78%,100%{transform:translateX(28px);opacity:0}}
.sl-scn .sl-song2-f{animation:sl-song2f var(--sl-dur) ease-out infinite}
@keyframes sl-song2f{0%,77%{opacity:0;transform:translateX(8px)}80%,96%{opacity:1;transform:none}100%{opacity:0}}
.sl-scn .sl-chip-fol{animation:sl-chip var(--sl-dur) ease-out infinite}
@keyframes sl-chip{0%,61%{box-shadow:0 0 0 0 rgba(79,140,255,0)}64%{box-shadow:0 0 0 6px rgba(79,140,255,.25)}70%,76%{box-shadow:0 0 0 0 rgba(79,140,255,0)}79%{box-shadow:0 0 0 6px rgba(79,140,255,.25)}86%,100%{box-shadow:0 0 0 0 rgba(79,140,255,0)}}
.sl-chip-lead,.sl-chip-sort{background:#16213a;color:#ffffff}
.sl-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 .sl-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1200 / 580;
  --sl-bg: transparent;
  --sl-view-w: 1200;
  --sl-crop-x: 0px;
  --sl-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 .sl-hero > .sl-scn { transform: scale(var(--sl-scale)) translate(var(--sl-crop-x), var(--sl-crop-y)); }
/* !important because the art sets the chips' transform inline. */
.legal .sl-hero .sl-chip { transform: translateX(-50%) scale(1.5) !important; transform-origin: 50% 100%; }
.js .sl-hero:not(.pt-ready) > .sl-scn { visibility: hidden; }
:root[data-theme="light"] .sl-hero { --sl-line: rgba(22, 33, 58, 0.22); }