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

/* ---------------------------------------------------------------- Home hero */
/* Animated hero on the home page: the leader's tablet turns the page and the
   follower tablets follow. Art is drawn at 1200x600 and scaled to the
   container by public/hero.js, which sets --pt-scale. Rules below are as
   designed; the home page uses the built-in dark variant (.pt-dark). */
.pt-hero{--pt-accent:#4f8cff;--pt-dur:6s;--pt-bg:#f3f5fa;--pt-line:rgba(22,33,58,0.22);--pt-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--pt-bg)}
.pt-hero.pt-dark{--pt-bg:#0e1626;--pt-line:rgba(255,255,255,0.22)}
.pt-hero > .pt-stage{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--pt-scale))}
.pt-stage .pt-flip{transform-origin:left center;backface-visibility:hidden;box-shadow:4px 0 14px rgba(16,24,48,0.18);animation:pt-flip var(--pt-dur) cubic-bezier(.55,.05,.35,1) infinite}
@keyframes pt-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}}
.pt-stage .pt-tap{animation:pt-tap var(--pt-dur) ease-out infinite}
@keyframes pt-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}}
.pt-stage .pt-ring{animation:pt-ring var(--pt-dur) ease-out infinite}
.pt-stage .pt-ring.pt-r2{animation-delay:calc(var(--pt-dur) * 0.04)}
@keyframes pt-ring{0%,17%{transform:translate(-50%,-50%) scale(.55);opacity:0}20%{opacity:.45}38%{transform:translate(-50%,-50%) scale(1.9);opacity:0}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}}
.pt-stage .pt-pkt-l{animation:pt-pl var(--pt-dur) cubic-bezier(.4,0,.2,1) infinite}
.pt-stage .pt-pkt-r{animation:pt-pr var(--pt-dur) cubic-bezier(.4,0,.2,1) infinite}
@keyframes pt-pl{0%,18%{transform:translateX(0);opacity:0}20%{opacity:1}25%{transform:translateX(-74px);opacity:1}27%,100%{transform:translateX(-74px);opacity:0}}
@keyframes pt-pr{0%,18%{transform:translateX(0);opacity:0}20%{opacity:1}25%{transform:translateX(74px);opacity:1}27%,100%{transform:translateX(74px);opacity:0}}
.pt-stage .pt-chip-fol{animation:pt-chip var(--pt-dur) ease-out infinite}
@keyframes pt-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)}}
.pt-stage .pt-lead{animation:pt-bob var(--pt-dur) ease-in-out infinite}
@keyframes pt-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.pt-chip-lead{background:#16213a;color:#ffffff}
.pt-chip-fol{background:#ffffff;color:#16213a;box-shadow:0 0 0 1px rgba(22,33,58,.12)}
/* Site integration: spacing above the upload area, and keep the art hidden
   until hero.js has scaled it, so it never flashes at full size.
   The art's 1200x600 canvas has wide empty margins, so show only the
   1000x540 area around the tablets (hero.js reads --pt-view-w to scale it).
   No background of its own, so the tablets sit directly on the page; all four
   edges fade out so the rings and the tablets' shadows never end in a hard
   line. The view leaves room for those fades: 50 units beside each follower
   tablet (the side fade uses 40) and space above the labels. */
.home main .pt-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1000 / 540;
  --pt-bg: transparent;
  --pt-view-w: 1000;
  --pt-crop-x: -100px;
  --pt-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;
}
.home main .pt-hero > .pt-stage { transform: scale(var(--pt-scale)) translate(var(--pt-crop-x), var(--pt-crop-y)); }
/* Larger "Leader"/"Following" labels: scale them up from their bottom edge so
   they keep their gap above each tablet. !important because the art sets the
   chips' transform inline. */
.home main .pt-hero .pt-chip { transform: translateX(-50%) scale(2) !important; transform-origin: 50% 100%; }
.js .pt-hero:not(.pt-ready) > .pt-stage { visibility: hidden; }
:root[data-theme="light"] .pt-hero { --pt-line: rgba(22, 33, 58, 0.22); }