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

/* ------------------------------------------------------------- About hero */
/* Animated hero on /about: four tablets join the leader's room by QR code,
   link, and room code, then the leader turns the page and every tablet
   follows. Art is drawn at 1200x600; public/hero.js scales it via
   --ab-scale. Rules below are as designed. */
.ab-hero{--ab-accent:#4f8cff;--ab-dur:8s;--ab-bg:#f3f5fa;--ab-line:rgba(22,33,58,0.22);--ab-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--ab-bg)}
.ab-hero.ab-dark{--ab-bg:#0e1626;--ab-line:rgba(255,255,255,0.22)}
.ab-hero > .ab-abt{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--ab-scale))}
.ab-abt .ab-flip{transform-origin:left center;backface-visibility:hidden;box-shadow:4px 0 14px rgba(16,24,48,0.18);animation:ab-flip var(--ab-dur) cubic-bezier(.55,.05,.35,1) infinite}
@keyframes ab-flip{0%,40%{transform:rotateY(0deg);opacity:1}52%{transform:rotateY(-180deg);opacity:1}88%{transform:rotateY(-180deg);opacity:1}89%{transform:rotateY(0deg);opacity:0}100%{transform:rotateY(0deg);opacity:1}}
.ab-abt .ab-tap{animation:ab-tap var(--ab-dur) ease-out infinite}
@keyframes ab-tap{0%,32%{transform:scale(.4);opacity:0}35%{transform:scale(.8);opacity:.55}41%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.ab-abt .ab-ring{animation:ab-ring var(--ab-dur) ease-out infinite}
.ab-abt .ab-r2{animation-delay:calc(var(--ab-dur) * 0.03)}
@keyframes ab-ring{0%,38%{transform:translate(-50%,-50%) scale(.55);opacity:0}41%{opacity:.4}58%{transform:translate(-50%,-50%) scale(2);opacity:0}100%{transform:translate(-50%,-50%) scale(2);opacity:0}}
.ab-abt .ab-room{animation:ab-room var(--ab-dur) ease-in-out infinite}
@keyframes ab-room{0%,100%{translate:0 0}50%{translate:0 -4px}}
.ab-abt .ab-jf0{animation:ab-jf0 var(--ab-dur) cubic-bezier(.3,1.3,.5,1) infinite}
@keyframes ab-jf0{0%,4%{opacity:0;transform:scale(.85)}8%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.95)}}
.ab-abt .ab-jd0{animation:ab-jd0 var(--ab-dur) linear infinite}
@keyframes ab-jd0{0%,9%{background:#e0a92e}12%,100%{background:#22a55b}}
.ab-abt .ab-jl0{animation:ab-jl0 var(--ab-dur) ease-out infinite}
@keyframes ab-jl0{0%,5%{opacity:0}9%,90%{opacity:1}96%,100%{opacity:0}}
.ab-abt .ab-jf1{animation:ab-jf1 var(--ab-dur) cubic-bezier(.3,1.3,.5,1) infinite}
@keyframes ab-jf1{0%,10%{opacity:0;transform:scale(.85)}14%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.95)}}
.ab-abt .ab-jd1{animation:ab-jd1 var(--ab-dur) linear infinite}
@keyframes ab-jd1{0%,15%{background:#e0a92e}18%,100%{background:#22a55b}}
.ab-abt .ab-jl1{animation:ab-jl1 var(--ab-dur) ease-out infinite}
@keyframes ab-jl1{0%,11%{opacity:0}15%,90%{opacity:1}96%,100%{opacity:0}}
.ab-abt .ab-jf2{animation:ab-jf2 var(--ab-dur) cubic-bezier(.3,1.3,.5,1) infinite}
@keyframes ab-jf2{0%,16%{opacity:0;transform:scale(.85)}20%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.95)}}
.ab-abt .ab-jd2{animation:ab-jd2 var(--ab-dur) linear infinite}
@keyframes ab-jd2{0%,21%{background:#e0a92e}24%,100%{background:#22a55b}}
.ab-abt .ab-jl2{animation:ab-jl2 var(--ab-dur) ease-out infinite}
@keyframes ab-jl2{0%,17%{opacity:0}21%,90%{opacity:1}96%,100%{opacity:0}}
.ab-abt .ab-jf3{animation:ab-jf3 var(--ab-dur) cubic-bezier(.3,1.3,.5,1) infinite}
@keyframes ab-jf3{0%,22%{opacity:0;transform:scale(.85)}26%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.95)}}
.ab-abt .ab-jd3{animation:ab-jd3 var(--ab-dur) linear infinite}
@keyframes ab-jd3{0%,27%{background:#e0a92e}30%,100%{background:#22a55b}}
.ab-abt .ab-jl3{animation:ab-jl3 var(--ab-dur) ease-out infinite}
@keyframes ab-jl3{0%,23%{opacity:0}27%,90%{opacity:1}96%,100%{opacity:0}}
.ab-chip-lead{background:#16213a;color:#ffffff}
.ab-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 1100x540 area around the artwork (hero.js reads
   --ab-view-w), larger labels, and hidden until scaled. Light theme uses the
   art's own light-mode connector color. */
.legal .ab-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1100 / 540;
  --ab-bg: transparent;
  --ab-view-w: 1100;
  --ab-crop-x: -50px;
  --ab-crop-y: -30px;
  -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 .ab-hero > .ab-abt { transform: scale(var(--ab-scale)) translate(var(--ab-crop-x), var(--ab-crop-y)); }
/* !important because the art sets the chips' transform inline. */
.legal .ab-hero .ab-chip { transform: translateX(-50%) scale(1.5) !important; transform-origin: 50% 100%; }
.js .ab-hero:not(.pt-ready) > .ab-abt { visibility: hidden; }
:root[data-theme="light"] .ab-hero { --ab-line: rgba(22, 33, 58, 0.22); }