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

/* -------------------------------------------------------- Scan guide hero */
/* Animated hero on /scan-sheet-music: a phone scans a page of sheet music
   into 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 --sc-scale. Rules below are
   as designed. */
.sc-hero{--sc-accent:#4f8cff;--sc-dur:7s;--sc-bg:#f3f5fa;--sc-line:rgba(22,33,58,0.22);--sc-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--sc-bg)}
.sc-hero.sc-dark{--sc-bg:#0e1626;--sc-line:rgba(255,255,255,0.22)}
.sc-hero > .sc-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--sc-scale))}
.sc-scn .sc-brk{animation:sc-brk var(--sc-dur) cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes sc-brk{0%,4%{opacity:0;transform:scale(1.6)}10%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.sc-scn .sc-scanline{animation:sc-line var(--sc-dur) ease-in-out infinite}
@keyframes sc-line{0%,11%{transform:translateY(0);opacity:0}13%{opacity:1}26%{transform:translateY(237px);opacity:1}28%,100%{transform:translateY(237px);opacity:0}}
.sc-scn .sc-flash{animation:sc-flash var(--sc-dur) ease-out infinite}
@keyframes sc-flash{0%,28%{opacity:0}29.5%{opacity:.85}34%,100%{opacity:0}}
.sc-scn .sc-shutter{animation:sc-shut var(--sc-dur) ease-out infinite}
@keyframes sc-shut{0%,27%{transform:scale(1)}29%{transform:scale(.82)}32%,100%{transform:scale(1)}}
.sc-scn .sc-doc{animation:sc-doc var(--sc-dur) cubic-bezier(.45,0,.25,1) infinite}
@keyframes sc-doc{0%,31%{transform:translateX(0) scale(.6);opacity:0}34%{transform:translateX(0) scale(1);opacity:1}44%{transform:translateX(250px) scale(1);opacity:1}48%,100%{transform:translateX(290px) scale(.5);opacity:0}}
.sc-scn .sc-land{animation:sc-land var(--sc-dur) ease-out infinite}
@keyframes sc-land{0%,45%{opacity:0;transform:scale(.96)}50%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.sc-scn .sc-land-f{animation-name:sc-landf}
@keyframes sc-landf{0%,55%{opacity:0;transform:scale(.96)}60%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}
.sc-scn .sc-pkt{animation:sc-pkt var(--sc-dur) cubic-bezier(.4,0,.2,1) infinite}
@keyframes sc-pkt{0%,50%{transform:translateX(0);opacity:0}52%{opacity:1}56%{transform:translateX(28px);opacity:1}58%,100%{transform:translateX(28px);opacity:0}}
.sc-scn .sc-chip-fol{animation:sc-chip var(--sc-dur) ease-out infinite}
@keyframes sc-chip{0%,56%{box-shadow:0 0 0 0 rgba(79,140,255,0)}60%{box-shadow:0 0 0 6px rgba(79,140,255,.25)}72%,100%{box-shadow:0 0 0 0 rgba(79,140,255,0)}}
.sc-chip-lead{background:#16213a;color:#ffffff}
.sc-chip-fol{background:#ffffff;color:#16213a;box-shadow:0 0 0 1px rgba(22,33,58,.12)}
/* Site integration, matching the other heroes: no background, soft edge
   fades, cropped vertically to the 1200x580 area around the artwork (hero.js
   reads --sc-view-w), larger labels, and hidden until scaled. Light theme
   uses the art's own light-mode connector color. */
.legal .sc-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1200 / 580;
  --sc-bg: transparent;
  --sc-view-w: 1200;
  --sc-crop-x: 0px;
  --sc-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 .sc-hero > .sc-scn { transform: scale(var(--sc-scale)) translate(var(--sc-crop-x), var(--sc-crop-y)); }
/* !important because the art sets the chips' transform inline. */
.legal .sc-hero .sc-chip { transform: translateX(-50%) scale(1.5) !important; transform-origin: 50% 100%; }
.js .sc-hero:not(.pt-ready) > .sc-scn { visibility: hidden; }
:root[data-theme="light"] .sc-hero { --sc-line: rgba(22, 33, 58, 0.22); }