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

/* ------------------------------------------------------- Pedal guide hero */
/* Animated hero on /pedals: a pedal press sends a key, the leader's page turns
   and the follower's follows. Art is drawn at 1200x600; public/hero.js scales
   it to the container via --pp-scale. Rules below are as designed. */
.pp-hero{--pp-accent:#4f8cff;--pp-dur:6s;--pp-bg:#f3f5fa;--pp-line:rgba(22,33,58,0.22);--pp-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--pp-bg)}
.pp-hero.pp-dark{--pp-bg:#0e1626;--pp-line:rgba(255,255,255,0.22)}
.pp-hero > .pp-pdl{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--pp-scale))}
.pp-pdl .pp-flip{transform-origin:left center;backface-visibility:hidden;box-shadow:4px 0 14px rgba(16,24,48,0.18);animation:pp-flip var(--pp-dur) cubic-bezier(.55,.05,.35,1) infinite}
@keyframes pp-flip{0%,22%{transform:rotateY(0deg);opacity:1}34%{transform:rotateY(-180deg);opacity:1}88%{transform:rotateY(-180deg);opacity:1}89%{transform:rotateY(0deg);opacity:0}100%{transform:rotateY(0deg);opacity:1}}
.pp-pdl .pp-press{transform-box:fill-box;transform-origin:50% 0;animation:pp-press var(--pp-dur) ease-in-out infinite}
@keyframes pp-press{0%,7%{transform:translateY(0) scaleY(1);filter:brightness(1)}10%,14%{transform:translateY(5px) scaleY(.93);filter:brightness(.85)}18%,100%{transform:translateY(0) scaleY(1);filter:brightness(1)}}
.pp-pdl .pp-led{animation:pp-led var(--pp-dur) ease-out infinite}
@keyframes pp-led{0%,9%{opacity:.35}11%,17%{opacity:1}24%,100%{opacity:.35}}
.pp-pdl .pp-ledglow{animation:pp-glow var(--pp-dur) ease-out infinite}
@keyframes pp-glow{0%,9%{opacity:0}11%,17%{opacity:.35}24%,100%{opacity:0}}
.pp-pdl .pp-key{animation:pp-key var(--pp-dur) cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes pp-key{0%,9%{transform:translateY(16px) scale(.7);opacity:0}13%{transform:translateY(0) scale(1);opacity:1}24%{transform:translateY(-6px) scale(1);opacity:1}30%,100%{transform:translateY(-14px) scale(.95);opacity:0}}
.pp-pdl .pp-wave{transform:rotate(30deg);animation:pp-wave var(--pp-dur) ease-out infinite}
.pp-pdl .pp-w1{animation-delay:calc(var(--pp-dur) * 0.02)}
.pp-pdl .pp-w2{animation-delay:calc(var(--pp-dur) * 0.04)}
@keyframes pp-wave{0%,12%{opacity:0}15%{opacity:.9}24%,100%{opacity:0}}
.pp-pdl .pp-pkt{animation:pp-pkt var(--pp-dur) cubic-bezier(.4,0,.2,1) infinite}
@keyframes pp-pkt{0%,24%{transform:translateX(0);opacity:0}26%{opacity:1}31%{transform:translateX(68px);opacity:1}33%,100%{transform:translateX(68px);opacity:0}}
.pp-pdl .pp-chip-fol{animation:pp-chip var(--pp-dur) ease-out infinite}
@keyframes pp-chip{0%,30%{box-shadow:0 0 0 0 rgba(79,140,255,0)}34%{box-shadow:0 0 0 6px rgba(79,140,255,.25)}46%,100%{box-shadow:0 0 0 0 rgba(79,140,255,0)}}
.pp-chip-lead{background:#16213a;color:#ffffff}
.pp-chip-fol{background:#ffffff;color:#16213a;box-shadow:0 0 0 1px rgba(22,33,58,.12)}
/* Site integration, matching the home hero: no background of its own, soft
   fades on all four edges, cropped to the 1164x600 area around the artwork
   (hero.js reads --pp-view-w), larger labels, and hidden until scaled. */
.legal .pp-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1164 / 600;
  --pp-bg: transparent;
  --pp-view-w: 1164;
  --pp-crop-x: -36px;
  --pp-crop-y: -10px;
  -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 .pp-hero > .pp-pdl { transform: scale(var(--pp-scale)) translate(var(--pp-crop-x), var(--pp-crop-y)); }
/* !important because the art sets the chips' transform inline. */
.legal .pp-hero .pp-chip { transform: translateX(-50%) scale(1.8) !important; transform-origin: 50% 100%; }
.js .pp-hero:not(.pt-ready) > .pp-pdl { visibility: hidden; }
:root[data-theme="light"] .pp-hero { --pp-line: rgba(22, 33, 58, 0.22); }