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

/* ----------------------------------------------------- Tablet stands hero */
/* Animated hero on /tablet-stands: three tablets on music stands; the leader
   is tapped and both followers turn. Art is drawn at 1200x600; public/hero.js
   scales it via --ts-scale. Rules below are as designed. */
.ts-hero{--ts-accent:#4f8cff;--ts-dur:6s;--ts-bg:#f3f5fa;--ts-line:rgba(22,33,58,0.22);--ts-stand:#3b4870;--ts-stand-dark:#26314d;--ts-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--ts-bg)}
.ts-hero.ts-dark{--ts-bg:#0e1626;--ts-line:rgba(255,255,255,0.22);--ts-stand:#56668c;--ts-stand-dark:#7a89ad}
.ts-hero > .ts-tst{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--ts-scale))}
.ts-tst .ts-flip{transform-origin:left center;backface-visibility:hidden;box-shadow:4px 0 14px rgba(16,24,48,0.18);animation:ts-flip var(--ts-dur) cubic-bezier(.55,.05,.35,1) infinite}
@keyframes ts-flip{0%,18%{transform:rotateY(0deg);opacity:1}30%{transform:rotateY(-180deg);opacity:1}88%{transform:rotateY(-180deg);opacity:1}89%{transform:rotateY(0deg);opacity:0}100%{transform:rotateY(0deg);opacity:1}}
.ts-tst .ts-tap{animation:ts-tap var(--ts-dur) ease-out infinite}
@keyframes ts-tap{0%,8%{transform:scale(.4);opacity:0}12%{transform:scale(.8);opacity:.55}19%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.ts-tst .ts-ring{animation:ts-ring var(--ts-dur) ease-out infinite}
.ts-tst .ts-r2{animation-delay:calc(var(--ts-dur) * 0.04)}
@keyframes ts-ring{0%,17%{transform:translate(-50%,-50%) scale(.55);opacity:0}20%{opacity:.4}38%{transform:translate(-50%,-50%) scale(1.9);opacity:0}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}}
.ts-tst .ts-pkt-l{animation:ts-pl var(--ts-dur) cubic-bezier(.4,0,.2,1) infinite}
.ts-tst .ts-pkt-r{animation:ts-pr var(--ts-dur) cubic-bezier(.4,0,.2,1) infinite}
@keyframes ts-pl{0%,18%{transform:translateX(0);opacity:0}20%{opacity:1}25%{transform:translateX(-140px);opacity:1}27%,100%{transform:translateX(-140px);opacity:0}}
@keyframes ts-pr{0%,18%{transform:translateX(0);opacity:0}20%{opacity:1}25%{transform:translateX(140px);opacity:1}27%,100%{transform:translateX(140px);opacity:0}}
.ts-tst .ts-chip-fol{animation:ts-chip var(--ts-dur) ease-out infinite}
@keyframes ts-chip{0%,24%{box-shadow:0 0 0 0 rgba(79,140,255,0)}28%{box-shadow:0 0 0 6px rgba(79,140,255,.25)}40%,100%{box-shadow:0 0 0 0 rgba(79,140,255,0)}}
.ts-chip-lead{background:#16213a;color:#ffffff}
.ts-chip-fol{background:#ffffff;color:#16213a;box-shadow:0 0 0 1px rgba(22,33,58,.12)}
/* Site integration, matching the other heroes: no background, soft edge
   fades, cropped to the 1000x632 area around the artwork (hero.js reads
   --ts-view-w; the art is shifted down 32 units so the raised "Leading" label
   clears the top fade, and the stand feet soften into the bottom fade),
   larger labels, and hidden until scaled. Light theme uses the art's own
   light-mode stand and connector colors. */
.legal .ts-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1000 / 632;
  --ts-bg: transparent;
  --ts-view-w: 1000;
  --ts-crop-x: -109px;
  --ts-crop-y: 32px;
  -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 .ts-hero > .ts-tst { transform: scale(var(--ts-scale)) translate(var(--ts-crop-x), var(--ts-crop-y)); }
/* !important because the art sets the chips' transform inline. */
.legal .ts-hero .ts-chip { transform: translateX(-50%) scale(1.6) !important; transform-origin: 50% 100%; }
.js .ts-hero:not(.pt-ready) > .ts-tst { visibility: hidden; }
:root[data-theme="light"] .ts-hero { --ts-line: rgba(22, 33, 58, 0.22); --ts-stand: #3b4870; --ts-stand-dark: #26314d; }