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

/* ------------------------------------------------------ Images to PDF hero */
/* Animated hero on /images-to-pdf: three photos of sheet music stack together
   into one PDF, which travels to the leader's tablet and then shows on a
   follower's. Art is drawn at 1200x600; public/hero.js scales it via
   --ip-scale. Photos keep their tilt in the keyframes, since an animated
   transform replaces the inline one. */
.ip-hero{--ip-accent:#4f8cff;--ip-dur:8s;--ip-bg:#f3f5fa;--ip-line:rgba(22,33,58,0.22);--ip-label:#5b6478;--ip-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--ip-bg)}
.ip-hero.ip-dark{--ip-bg:#0e1626;--ip-line:rgba(255,255,255,0.22);--ip-label:#c9cfdb}
.ip-hero > .ip-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--ip-scale))}
.ip-scn .ip-ph{animation:var(--ip-dur) cubic-bezier(.55,0,.25,1) infinite}
.ip-scn .ip-ph0{animation-name:ip-ph0}
.ip-scn .ip-ph1{animation-name:ip-ph1}
.ip-scn .ip-ph2{animation-name:ip-ph2}
@keyframes ip-ph0{0%{opacity:0;transform:rotate(-9deg) translateY(10px)}6%,13%{opacity:1;transform:rotate(-9deg)}28%{opacity:1;transform:translate(303px,53px) rotate(0) scale(.45)}32%,100%{opacity:0;transform:translate(303px,53px) rotate(0) scale(.45)}}
@keyframes ip-ph1{0%{opacity:0;transform:rotate(3deg) translateY(10px)}6%,15%{opacity:1;transform:rotate(3deg)}28%{opacity:1;transform:translate(178px,83px) rotate(0) scale(.45)}32%,100%{opacity:0;transform:translate(178px,83px) rotate(0) scale(.45)}}
@keyframes ip-ph2{0%{opacity:0;transform:rotate(11deg) translateY(10px)}6%,17%{opacity:1;transform:rotate(11deg)}28%{opacity:1;transform:translate(73px,38px) rotate(0) scale(.45)}32%,100%{opacity:0;transform:translate(73px,38px) rotate(0) scale(.45)}}
.ip-scn .ip-chip-img{animation:ip-chipimg var(--ip-dur) ease-out infinite}
@keyframes ip-chipimg{0%,3%{opacity:0}7%,22%{opacity:1}27%,100%{opacity:0}}
.ip-scn .ip-doc{animation:ip-doc var(--ip-dur) cubic-bezier(.45,0,.25,1) infinite}
@keyframes ip-doc{0%,28%{opacity:0;transform:translateX(0) scale(.6)}33%,40%{opacity:1;transform:translateX(0) scale(1)}50%{opacity:1;transform:translateX(240px) scale(1)}54%,100%{opacity:0;transform:translateX(270px) scale(.5)}}
.ip-scn .ip-hold{animation:ip-hold var(--ip-dur) ease-out infinite}
@keyframes ip-hold{0%,52%{opacity:1}55%,97%{opacity:0}100%{opacity:1}}
.ip-scn .ip-land,.ip-scn .ip-count{animation:ip-land var(--ip-dur) ease-out infinite}
@keyframes ip-land{0%,52%{opacity:0;transform:scale(.96)}56%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
.ip-scn .ip-pkt{opacity:0;animation:ip-pkt var(--ip-dur) cubic-bezier(.4,0,.2,1) infinite}
@keyframes ip-pkt{0%,57%{transform:translateX(0);opacity:0}58%{opacity:1}63%{transform:translateX(28px);opacity:1}64%,100%{transform:translateX(28px);opacity:0}}
.ip-scn .ip-wait{animation:ip-wait var(--ip-dur) ease-out infinite}
@keyframes ip-wait{0%,63%{opacity:1}66%,97%{opacity:0}100%{opacity:1}}
.ip-scn .ip-land-f{animation-name:ip-landf}
@keyframes ip-landf{0%,63%{opacity:0;transform:scale(.96)}67%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
.ip-scn .ip-chip-fol{animation:ip-chip var(--ip-dur) ease-out infinite}
@keyframes ip-chip{0%,63%{box-shadow:0 0 0 0 rgba(79,140,255,0)}67%{box-shadow:0 0 0 6px rgba(79,140,255,.25)}78%,100%{box-shadow:0 0 0 0 rgba(79,140,255,0)}}
.ip-chip-lead,.ip-chip-img{background:#16213a;color:#ffffff}
.ip-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 .ip-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1200 / 580;
  --ip-bg: transparent;
  --ip-view-w: 1200;
  --ip-crop-x: 0px;
  --ip-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 .ip-hero > .ip-scn { transform: scale(var(--ip-scale)) translate(var(--ip-crop-x), var(--ip-crop-y)); }
/* !important because the art sets the chips' transform inline. */
.legal .ip-hero .ip-chip { transform: translateX(-50%) scale(1.5) !important; transform-origin: 50% 100%; }
.js .ip-hero:not(.pt-ready) > .ip-scn { visibility: hidden; }
:root[data-theme="light"] .ip-hero { --ip-line: rgba(22, 33, 58, 0.22); --ip-label: #5b6478; }