/* Overlay layer: sits above the page, never blocks clicks by itself */
/* absolute (not fixed): the ad sits in the banner space at the top of the page and scrolls away with it,
   so it never collides with the sticky menu */
#stage { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; pointer-events: none; overflow: hidden; z-index: 9999;
         contain: layout paint; }   /* keeps the animation from affecting the rest of the page */

/* Each slide is a link; it only becomes clickable once it has settled at the top */
#stage a { position: absolute; display: block; pointer-events: none; transform-origin: 0 0; }
#stage a.live { pointer-events: auto; cursor: pointer; }

/* The card sits behind the logo and sticks out around it. Its size, colour, corners and shadow
   are set by ad.js (cardPadding, cardColor, cardRadius); it fades in after the movement. */
#stage a .ad-card { position: absolute; display: block; opacity: 0; }

#stage a img,
#stage a canvas { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }

#stage a:focus-visible { outline: none; }
#stage a:focus-visible .ad-card { outline: 2px solid #2563eb; outline-offset: 2px; }