/* Local, optional enhancement: original artwork stays visible without JavaScript. */
.motion-cards, .motion-chart { display:none; position:absolute; pointer-events:none; }
.motion-cards { inset:0; z-index:2; }
.motion-cards__underlay { position:absolute; left:0; top:47.60416667cqw; width:100%; height:21.66666667cqw; }
.motion-card { position:absolute; top:48.4375cqw; width:22.60416667cqw; height:18.95833333cqw; transform-origin:50% 0%; }
.motion-card > img { display:block; width:100%; height:20.83333333cqw; }
.pc-hero.motion-cards-active { z-index:1; }
.pc-hero.motion-cards-active > .motion-card-copy { visibility:hidden; }
.motion-chart { z-index:2; background:#fff; overflow:hidden; }
.motion-chart > img { position:absolute; display:block; pointer-events:none; }
.motion-flow { position:absolute; z-index:2; pointer-events:none; overflow:visible; opacity:0; }
/* Existing SVG paths are invisible guides; moving packets supply all animated light. */
.motion-flow > path { visibility:hidden; fill:none; stroke:none; }
.motion-flow .flow-packet { pointer-events:none; }
.pc-hero:has(.pc-banner-player:not([hidden])) .motion-cards { z-index:2; }
@media (prefers-reduced-motion:reduce) {
  .motion-cards, .motion-chart, .motion-flow { display:none !important; }
  .pc-hero.motion-cards-active > .motion-card-copy { visibility:visible; }
}

.motion-chart .motion-fiber { --reveal:103%; -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--reveal) - 3%),transparent var(--reveal)); mask-image:linear-gradient(90deg,#000 calc(var(--reveal) - 3%),transparent var(--reveal)); }

/* Replay triggers keep their bounds even while the original static artwork is shown. */
.motion-watch { position:absolute; pointer-events:none; visibility:hidden; }
.motion-watch-cards { left:16.04166667cqw; top:48.4375cqw; width:67.91666667cqw; height:18.95833333cqw; }

/* Fade reveals use the original image and native text underneath, without resampling art.
   Each cover is confined to an illustration; headings, dates, legends and sources stay visible. */
.motion-reveal { display:none; position:absolute; z-index:3; pointer-events:none; }
.motion-reveal > svg { display:block; width:100%; height:100%; overflow:visible; }
.motion-curtain { pointer-events:none; transform-box:fill-box; }
@media (prefers-reduced-motion:reduce), print {
  .motion-reveal { display:none !important; }
}
/* Feather only the empty perimeter so large atmospheric backgrounds have no hard seam. */
.motion-reveal[data-motion-scene="global-map"],
.motion-reveal[data-motion-scene="selection"] {
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);
}

@font-face{font-family:VPMotionDigits;src:url(../fonts/motion-poppins-digits.woff2) format("woff2");font-display:swap;}
.motion-orbit,.motion-counts{display:none;position:absolute;z-index:3;pointer-events:none;}
.motion-orbit .orbit-underlay,.motion-counts>svg{display:block;width:100%;height:100%;}
.orbit-node{position:absolute;width:4.583333333cqw;height:4.583333333cqw;transform:translate(-50%,-50%);}
.orbit-icon{display:block;width:100%;height:100%;}
.orbit-label{position:absolute;left:50%;top:50%;width:4.6875cqw;height:1.770833333cqw;transform:translate(-50%,-50%) translateY(2.8125cqw);}
.motion-count{font-family:VPMotionDigits,sans-serif;font-weight:600;font-synthesis:none;}
@media(prefers-reduced-motion:reduce),print{.motion-orbit,.motion-counts{display:none!important;}}