/* Velocity intro layer. Transparent while assets load (the real AEZZE shows),
   paper + canvas once playing. It never intercepts taps. */
[data-aezze-intro] { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
/* at rest the picture is the page's ground: under the mark and the links, over the paper */
[data-aezze-intro].is-resting { z-index: 0; background: #F7F4EB; }
[data-aezze-intro].is-resting canvas { opacity: 1; }
body[data-page="home"] main.home { position: relative; z-index: 1; }
[data-aezze-intro] canvas { display: block; width: 100%; height: 100%; opacity: 0; }
[data-aezze-intro].is-playing { background: #F7F4EB; }
[data-aezze-intro].is-playing canvas { opacity: 1; }
.intro-skip {
  position: fixed; z-index: 101; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  font: 700 .75rem/1 "Space Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
  background: #F7F4EB; color: #000; border: 2px solid #000; padding: 10px 14px; cursor: pointer;
}
.intro-skip:focus-visible { outline: 3px solid #0033FF; outline-offset: 3px; }
/* While the opening loads the page is bare paper: the finished mark showing first, then
   cutting to the opening's first frame, read as a glitch. */
.intro-loading .home-mark { visibility: hidden; }
/* After the end frame: the tag cuts in, the links take their places over the pills (site.css). */
.intro-pending .home-doors { visibility: hidden; }