/* Animated hero for the Who It's For pages, loaded only by the pages that show it
   (moved out of styles.css so other pages don't download it). */

/* ------------------------------------------------------ "Who It's For" heroes */
/* One animated hero shared by the eight "Who It's For" pages, with each page's
   roles, music, and feature chip in the markup: the leader's tablet turns the
   page twice, a dot carries each turn down the line, and the followers' tablets
   turn a moment later, one after another (--i staggers them). Accompanists use
   the half-page view for the first turn; pit orchestras show Dark stage. Art
   is drawn at 1200x600; public/hero.js scales it via --gp-scale. */
.gp-hero{--gp-accent:#4f8cff;--gp-dur:8s;--gp-bg:#f3f5fa;--gp-line:rgba(22,33,58,0.22);--gp-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--gp-bg)}
.gp-hero.gp-dark{--gp-bg:#0e1626;--gp-line:rgba(255,255,255,0.22)}
.gp-hero > .gp-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--gp-scale))}
.gp-scn .gp-p2,.gp-scn .gp-p3,.gp-scn .gp-chip-fol{animation-duration:var(--gp-dur);animation-iteration-count:infinite;animation-timing-function:ease-out;animation-fill-mode:both;animation-delay:calc(var(--i) * 0.24s)}
.gp-scn .gp-p2{animation-name:gp-p2}
.gp-scn .gp-p3{animation-name:gp-p3}
@keyframes gp-p2{0%,19%{opacity:0;transform:translateX(14px)}22%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes gp-p3{0%,49%{opacity:0;transform:translateX(14px)}52%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.gp-scn .gp-dot{opacity:0;animation:gp-dot var(--gp-dur) cubic-bezier(.4,0,.2,1) infinite}
@keyframes gp-dot{0%,20%{transform:translateX(0);opacity:0}21%{opacity:1}28%{transform:translateX(var(--gp-dist));opacity:1}29%,50%{transform:translateX(var(--gp-dist));opacity:0}50.1%{transform:translateX(0);opacity:0}51%{opacity:1}58%{transform:translateX(var(--gp-dist));opacity:1}59%,100%{transform:translateX(var(--gp-dist));opacity:0}}
.gp-scn .gp-chip-fol{animation-name:gp-chip}
@keyframes gp-chip{0%,21%{box-shadow:0 0 0 0 rgba(79,140,255,0)}25%{box-shadow:0 0 0 6px rgba(79,140,255,.25)}33%,51%{box-shadow:0 0 0 0 rgba(79,140,255,0)}55%{box-shadow:0 0 0 6px rgba(79,140,255,.25)}63%,100%{box-shadow:0 0 0 0 rgba(79,140,255,0)}}
.gp-chip-lead{background:#16213a;color:#ffffff}
.gp-chip-fol{background:#ffffff;color:#16213a;box-shadow:0 0 0 1px rgba(22,33,58,.12)}
.gp-feature{background:var(--gp-accent);color:#ffffff}
/* Each page draws its own setting behind the tablets (choir risers, a pit rail,
   string lights...), in the dashed line's color so it stays in the background. */
.gp-scn .gp-backdrop{position:absolute;inset:0;color:var(--gp-line);pointer-events:none}
.gp-scn .gp-backdrop svg{display:block}
/* Pit orchestras: Dark stage, as the room shows it. */
.gp-darkstage .gp-screen{filter:invert(1) hue-rotate(180deg)}
/* Site integration, matching the guide heroes. */
.legal .gp-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1200 / 580;
  --gp-bg: transparent;
  --gp-view-w: 1200;
  --gp-crop-x: 0px;
  --gp-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 .gp-hero > .gp-scn { transform: scale(var(--gp-scale)) translate(var(--gp-crop-x), var(--gp-crop-y)); }
/* !important because the art sets the chips' transform inline. */
.legal .gp-hero .gp-chip { transform: translateX(-50%) scale(1.5) !important; transform-origin: 50% 100%; }
.js .gp-hero:not(.pt-ready) > .gp-scn { visibility: hidden; }
:root[data-theme="light"] .gp-hero { --gp-line: rgba(22, 33, 58, 0.22); }