/* Animated hero for the FAQ: three common questions appear beside a tablet of
   sheet music, and each is answered in turn.
   Art is drawn at 1200x600; public/hero.js scales it via --fq-scale. */
.fq-hero{--fq-accent:#4f8cff;--fq-dur:9s;--fq-bg:#f3f5fa;--fq-line:rgba(22,33,58,0.22);--fq-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--fq-bg)}
.fq-hero.fq-dark{--fq-bg:#0e1626;--fq-line:rgba(255,255,255,0.22)}
.fq-hero > .fq-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--fq-scale))}
.fq-chip-lead{background:#16213a;color:#ffffff}
/* Each question shows for a third of the loop; its answer follows a beat later. */
.fq-scn .fq-pair{opacity:0;animation:fq-pair var(--fq-dur) ease-out infinite}
.fq-scn .fq-pair-1{animation-delay:calc(var(--fq-dur) / 3)}
.fq-scn .fq-pair-2{animation-delay:calc(var(--fq-dur) * 2 / 3)}
@keyframes fq-pair{0%{opacity:0;transform:translateY(16px)}4%,29%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-10px)}}
.fq-scn .fq-a{animation:fq-a var(--fq-dur) cubic-bezier(.3,1.4,.5,1) infinite;animation-delay:inherit}
@keyframes fq-a{0%,9%{opacity:0;transform:scale(.85)}13%,100%{opacity:1;transform:none}}
.fq-scn .fq-tick{animation:fq-tick var(--fq-dur) linear infinite}
.fq-scn .fq-tick-1{animation-delay:calc(var(--fq-dur) / 3)}
.fq-scn .fq-tick-2{animation-delay:calc(var(--fq-dur) * 2 / 3)}
@keyframes fq-tick{0%,33%{background:var(--fq-accent)}33.1%,100%{background:var(--fq-line)}}
/* Site integration, matching the other guide heroes. */
.legal .fq-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1200 / 560;
  --fq-bg: transparent;
  --fq-view-w: 1200;
  -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 .fq-hero > .fq-scn { transform: scale(var(--fq-scale)) translate(0, -20px); }
.js .fq-hero:not(.pt-ready) > .fq-scn { visibility: hidden; }
:root[data-theme="light"] .fq-hero { --fq-line: rgba(22, 33, 58, 0.22); }