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

/* ---------------------------------------------------------- Tablets hero */
/* Animated hero on /tablets-for-sheet-music: a printed 9x12 page beside an
   iPad mini, an 11-inch, and a 13-inch tablet, all drawn at 24 px per inch.
   The page travels to each in turn and shows at 51%, 69%, and 87% of its
   printed size; the 13-inch is marked best for scores. Art is drawn at
   1200x600; public/hero.js scales it via --tb-scale. */
.tb-hero{--tb-accent:#4f8cff;--tb-dur:8s;--tb-bg:#f3f5fa;--tb-line:rgba(22,33,58,0.22);--tb-label:#5b6478;--tb-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--tb-bg)}
.tb-hero.tb-dark{--tb-bg:#0e1626;--tb-line:rgba(255,255,255,0.22);--tb-label:#c9cfdb}
.tb-hero > .tb-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--tb-scale))}
.tb-scn .tb-paper{animation:tb-paper var(--tb-dur) ease-out infinite}
@keyframes tb-paper{0%{opacity:0}5%,92%{opacity:1}97%,100%{opacity:0}}
.tb-scn .tb-dot{opacity:0;animation:var(--tb-dur) cubic-bezier(.4,0,.2,1) infinite}
.tb-scn .tb-dot0{animation-name:tb-dot0}
.tb-scn .tb-dot1{animation-name:tb-dot1}
.tb-scn .tb-dot2{animation-name:tb-dot2}
@keyframes tb-dot0{0%,10%{transform:translateX(0);opacity:0}11%{opacity:1}17%{transform:translateX(123px);opacity:1}18%,100%{transform:translateX(123px);opacity:0}}
@keyframes tb-dot1{0%,26%{transform:translateX(0);opacity:0}27%{opacity:1}35%{transform:translateX(322px);opacity:1}36%,100%{transform:translateX(322px);opacity:0}}
@keyframes tb-dot2{0%,44%{transform:translateX(0);opacity:0}45%{opacity:1}55%{transform:translateX(562px);opacity:1}56%,100%{transform:translateX(562px);opacity:0}}
.tb-scn .tb-music,.tb-scn .tb-chip{animation:var(--tb-dur) ease-out infinite}
.tb-scn .tb-music0{animation-name:tb-m0}
.tb-scn .tb-music1{animation-name:tb-m1}
.tb-scn .tb-music2{animation-name:tb-m2}
@keyframes tb-m0{0%,17%{opacity:0;transform:scale(.92)}20%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes tb-m1{0%,35%{opacity:0;transform:scale(.92)}38%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes tb-m2{0%,55%{opacity:0;transform:scale(.92)}58%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
.tb-scn .tb-chip0{animation-name:tb-c0}
.tb-scn .tb-chip1{animation-name:tb-c1}
.tb-scn .tb-chip2{animation-name:tb-c2}
.tb-scn .tb-best{animation-name:tb-best}
@keyframes tb-c0{0%,19%{opacity:0}22%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes tb-c1{0%,37%{opacity:0}40%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes tb-c2{0%,57%{opacity:0}60%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes tb-best{0%,63%{opacity:0}67%,92%{opacity:1}97%,100%{opacity:0}}
.tb-scn .tb-tab2{animation:tb-glow var(--tb-dur) ease-out infinite}
@keyframes tb-glow{0%,58%{box-shadow:0 24px 48px rgba(16,24,48,0.22),inset 0 0 0 1px rgba(255,255,255,0.08),0 0 0 0 rgba(79,140,255,0)}64%,90%{box-shadow:0 24px 48px rgba(16,24,48,0.22),inset 0 0 0 1px rgba(255,255,255,0.08),0 0 0 5px rgba(79,140,255,.55)}97%,100%{box-shadow:0 24px 48px rgba(16,24,48,0.22),inset 0 0 0 1px rgba(255,255,255,0.08),0 0 0 0 rgba(79,140,255,0)}}
.tb-chip{background:#16213a;color:#ffffff}
.tb-best{background:var(--tb-accent);color:#ffffff}
/* Site integration, matching the other guide heroes. */
.legal .tb-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1200 / 580;
  --tb-bg: transparent;
  --tb-view-w: 1200;
  --tb-crop-x: 0px;
  --tb-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 .tb-hero > .tb-scn { transform: scale(var(--tb-scale)) translate(var(--tb-crop-x), var(--tb-crop-y)); }
/* !important because the art sets the chips' transform inline. */
.legal .tb-hero .tb-chip { transform: translateX(-50%) scale(1.5) !important; transform-origin: 50% 100%; }
.js .tb-hero:not(.pt-ready) > .tb-scn { visibility: hidden; }
:root[data-theme="light"] .tb-hero { --tb-line: rgba(22, 33, 58, 0.22); --tb-label: #5b6478; }