/* "no cookies" footer easter egg: pacman walks in from the left and eats the
   cookie, then walks right dropping the label behind him one letter per step,
   strolls off and fades. Loops while in view.
   Static styles only; the timeline and its timings live in nocookies.js. */

.nc{position:relative;display:inline-block;align-self:flex-start;white-space:nowrap;--nc-size:1.25em}
.nc-slot{
  display:none;position:absolute;left:0;top:50%;z-index:1;pointer-events:none;
  width:var(--nc-size);height:var(--nc-size);margin-top:calc(var(--nc-size) / -2);
}
.nc-cookie,.nc-pac{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;overflow:visible;
}
.nc-cookie{color:var(--amber,#ffb000);transform-origin:50% 50%}
.nc-pac{color:var(--amber,#ffb000);filter:drop-shadow(0 0 3px rgba(255,176,0,.45))}
.nc-pac .top,.nc-pac .bot{transform-box:view-box;transform-origin:10px 10px}
.nc-l{display:inline-block;white-space:pre}
.nc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* pacman walks past the label's right edge; never let that widen the page */
footer{overflow-x:clip}

/* no JS: plain text only; the icons appear once JS is ready */
.nc.is-ready .nc-slot,.nc.is-static .nc-slot{display:block}

/* JS ready: the timeline sets opacity/position from here on */
.nc.is-ready .nc-l,.nc.is-ready .nc-pac{opacity:0}

/* reduced motion: label with pacman after it, mouth open, no cookie */
.nc.is-static{padding-right:calc(var(--nc-size) + .3em)}
.nc.is-static .nc-slot{left:auto;right:0}
.nc.is-static .nc-cookie{display:none}
.nc.is-static .nc-pac .top{transform:rotate(-30deg)}
.nc.is-static .nc-pac .bot{transform:rotate(30deg)}