/* Animated hero for the app comparison page, loaded only by the page that
   shows it. */

/* ------------------------------------------------------ Compare apps hero */
/* Animated hero on /compare-apps: a leader's iPad turns the page, and an
   Android tablet, a Windows laptop, and an iPhone follow in their browsers,
   one after another as the dot reaches them. Art is drawn at 1200x600;
   public/hero.js scales it via --ca-scale. */
.ca-hero{--ca-accent:#4f8cff;--ca-dur:8s;--ca-bg:#f3f5fa;--ca-line:rgba(22,33,58,0.22);--ca-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--ca-bg)}
.ca-hero.ca-dark{--ca-bg:#0e1626;--ca-line:rgba(255,255,255,0.22)}
.ca-hero > .ca-scn{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--ca-scale))}
/* Pages 2 and 3 appear over page 1; followers lag the leader by --i steps. */
.ca-scn .ca-p2,.ca-scn .ca-p3{opacity:0;animation:ca-p2 var(--ca-dur) ease-out infinite;animation-delay:calc(var(--ca-dur) * 0.035 * var(--i, 0))}
.ca-scn .ca-p3{animation-name:ca-p3}
@keyframes ca-p2{0%,19%{opacity:0;transform:translateX(12px)}22%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes ca-p3{0%,49%{opacity:0;transform:translateX(12px)}52%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.ca-scn .ca-tap{opacity:0;animation:ca-tap var(--ca-dur) ease-out infinite}
@keyframes ca-tap{0%,15%{opacity:0;transform:scale(.4)}18%{opacity:.55;transform:scale(.8)}24%{opacity:0;transform:scale(1.6)}45%{opacity:0;transform:scale(.4)}48%{opacity:.55;transform:scale(.8)}54%,100%{opacity:0;transform:scale(1.6)}}
.ca-scn .ca-dot{opacity:0;animation:ca-dot var(--ca-dur) cubic-bezier(.4,0,.2,1) infinite}
@keyframes ca-dot{0%,19%{transform:translateX(0);opacity:0}20%{opacity:1}31%{transform:translateX(700px);opacity:1}32%,49%{transform:translateX(700px);opacity:0}49.5%{transform:translateX(0);opacity:0}50%{opacity:1}61%{transform:translateX(700px);opacity:1}62%,100%{transform:translateX(700px);opacity:0}}
.ca-scn .ca-chip-fol{animation:ca-chip var(--ca-dur) ease-out infinite;animation-delay:calc(var(--ca-dur) * 0.035 * var(--i, 0))}
@keyframes ca-chip{0%,21%{box-shadow:0 0 0 0 rgba(79,140,255,0)}25%{box-shadow:0 0 0 6px rgba(79,140,255,.25)}33%,51%{box-shadow:0 0 0 0 rgba(79,140,255,0)}55%{box-shadow:0 0 0 6px rgba(79,140,255,.25)}63%,100%{box-shadow:0 0 0 0 rgba(79,140,255,0)}}
.ca-chip-lead{background:#16213a;color:#ffffff}
.ca-chip-fol{background:#ffffff;color:#16213a;box-shadow:0 0 0 1px rgba(22,33,58,.12)}
/* Site integration, matching the other guide heroes: no background, soft
   edge fades, cropped to the 1200x540 area around the artwork, larger labels,
   and hidden until scaled. */
.legal .ca-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1200 / 540;
  --ca-bg: transparent;
  --ca-view-w: 1200;
  --ca-crop-x: 0px;
  --ca-crop-y: -45px;
  -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 .ca-hero > .ca-scn { transform: scale(var(--ca-scale)) translate(var(--ca-crop-x), var(--ca-crop-y)); }
/* !important because the art sets the chips' transform inline. */
.legal .ca-hero .ca-chip { transform: translateX(-50%) scale(1.5) !important; transform-origin: 50% 100%; }
.legal .ca-hero .ca-facts { transform: scale(1.35); transform-origin: 50% 100%; }
.js .ca-hero:not(.pt-ready) > .ca-scn { visibility: hidden; }
:root[data-theme="light"] .ca-hero { --ca-line: rgba(22, 33, 58, 0.22); }