/* Animated hero for the repeats guide, loaded only by the page that shows it. */

/* ---------------------------------------------------------- Repeats hero */
/* Animated hero on /repeats-and-codas: a ring steps along a row of PDF pages
   in the play order 1-3, 2-3, 4-6, jumping back along an arrow for the
   repeat, while the tablet beside it shows each page in turn and warns "↩ 2"
   on the first page 3. Art is drawn at 1200x600; public/hero.js scales it
   via --rc-scale. */
.rc-hero{--rc-accent:#4f8cff;--rc-dur:12s;--rc-bg:#f3f5fa;--rc-text:#16213a;--rc-muted:#5b6478;--rc-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--rc-bg)}
.rc-hero.rc-dark{--rc-bg:#0e1626;--rc-text:#e8edf7;--rc-muted:#9aa6bd}
.rc-hero > .rc-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--rc-scale))}
/* Eight steps of 10% each, then a hold on the last page and a fade back. */
.rc-scn .rc-ring{animation:rc-ring var(--rc-dur) cubic-bezier(.4,0,.2,1) infinite}
@keyframes rc-ring{0%,8%{transform:translateX(0);opacity:1}11%,18%{transform:translateX(96px)}21%,28%{transform:translateX(192px)}31%,38%{transform:translateX(96px)}41%,48%{transform:translateX(192px)}51%,58%{transform:translateX(288px)}61%,68%{transform:translateX(384px)}71%,90%{transform:translateX(480px);opacity:1}95%{transform:translateX(480px);opacity:0}100%{transform:translateX(0);opacity:0}}
/* The arrow draws itself as the turn goes back to page 2, then stays faint
   until the loop restarts. It's hidden before then, so its tip (a marker,
   which the dashes don't hide) doesn't show early. */
.rc-scn .rc-arc{stroke-dasharray:240;animation:rc-arc var(--rc-dur) ease-in-out infinite}
@keyframes rc-arc{0%,28%{stroke-dashoffset:240;opacity:0}29%{stroke-dashoffset:240;opacity:1}35%,42%{stroke-dashoffset:0;opacity:1}48%,88%{stroke-dashoffset:0;opacity:.35}95%,100%{stroke-dashoffset:0;opacity:0}}
.rc-scn .rc-arc-label{animation:rc-label var(--rc-dur) ease-in-out infinite}
@keyframes rc-label{0%,27%{opacity:.45}31%,40%{opacity:1}46%,100%{opacity:.45}}
/* The tablet's page: each number shows during its steps. */
.rc-scn .rc-pg{opacity:0;animation:var(--rc-dur) steps(1,end) infinite}
.rc-scn .rc-pg1{animation-name:rc-pg1}
.rc-scn .rc-pg2{animation-name:rc-pg2}
.rc-scn .rc-pg3{animation-name:rc-pg3}
.rc-scn .rc-pg4{animation-name:rc-pg4}
.rc-scn .rc-pg5{animation-name:rc-pg5}
.rc-scn .rc-pg6{animation-name:rc-pg6}
@keyframes rc-pg1{0%{opacity:1}10%,100%{opacity:0}}
@keyframes rc-pg2{0%{opacity:0}10%{opacity:1}20%{opacity:0}30%{opacity:1}40%,100%{opacity:0}}
@keyframes rc-pg3{0%{opacity:0}20%{opacity:1}30%{opacity:0}40%{opacity:1}50%,100%{opacity:0}}
@keyframes rc-pg4{0%{opacity:0}50%{opacity:1}60%,100%{opacity:0}}
@keyframes rc-pg5{0%{opacity:0}60%{opacity:1}70%,100%{opacity:0}}
@keyframes rc-pg6{0%{opacity:0}70%{opacity:1}100%{opacity:1}}
/* "↩ 2" beside the page number, on the first page 3 only. */
.rc-scn .rc-jump{opacity:0;animation:rc-jump var(--rc-dur) steps(1,end) infinite}
@keyframes rc-jump{0%{opacity:0}20%{opacity:1}30%,100%{opacity:0}}
/* Site integration, matching the other guide heroes. */
.legal .rc-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1200 / 560;
  --rc-bg: transparent;
  --rc-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 .rc-hero > .rc-scn { transform: scale(var(--rc-scale)) translate(0, -20px); }
.js .rc-hero:not(.pt-ready) > .rc-scn { visibility: hidden; }
:root[data-theme="light"] .rc-hero { --rc-text: #16213a; --rc-muted: #5b6478; }