/* Entrance animation: black cover pushed off to the right by a character, revealing the page's own logo; then "Select a service" pops up. */
html.intro-on, html.intro-on body { overflow: hidden !important; }
/* Instant black cover so the page never flashes before the script runs */
html.intro-on:not(.intro-run)::before { content: ""; position: fixed; inset: 0; background: #000; z-index: 2147483000; }

#intro { position: fixed; inset: 0; z-index: 2147483001; overflow: hidden; touch-action: none; }
#intro .i-slide { position: absolute; inset: 0; }  /* transparent: the real page (white + your logo) shows through as the panel moves */

/* CHARACTER LAYER: independent of everything else. Artwork comes from entrance/character.png,
   configured at the top of entrance/entrance.js. */
#intro .i-char { position: absolute; left: 0; top: 0; background-repeat: no-repeat;
                 will-change: transform; user-select: none; }

/* BLACK PANEL: flat, solid, sharp vertical left edge, full viewport height. */
#intro .i-panel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000;
                  will-change: transform; }