/* css/xp-page.css — the shared shell of the 3D inner pages (La carte, the fruit pages, Coffrets): the blanc cassé page,
   an optional fixed WebGL canvas behind the content (js/xp/page.js), its flat backdrop. Same DOM with or without WebGL:
   html.xpp-3d (WebGL allowed, js/xp/page.js boots it) · html.xpp-on (canvas running) · html.xpp-flat (no WebGL).
   Header, footer, buttons and cards come from css/shop.css (the charter); this file only holds the shell. */

html.xpp { background: var(--field); color: var(--ink); }
html.xpp body { margin: 0; min-height: 100vh; background: transparent; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
html.xpp :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
html.xpp [hidden] { display: none !important; }

/* backdrop of a page with a full-window canvas (the coffrets): the sage studio, what the canvas draws over it */
.xpp-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, #E6ECE8 0%, #D3DED8 45%, var(--sauge) 100%); }
.xpp-canvas { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100vh; height: 100lvh; display: block; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease-out); }
html.xpp-on .xpp-canvas { opacity: 1; }
html.xpp-flat .xpp-canvas { display: none; }
.xpp-grain { display: none; } /* flat surfaces (charte): no grain */
.xpp-main { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) { .xpp-canvas { transition: none; } }