/**
 * Infilarite — Cinema mode styles
 *
 * Activated by JS adding `body.cinema-active` AFTER the first
 * canvas frame is rendered, to avoid any flash of unstyled state.
 *
 * Architecture:
 *   1. Canvas sits at body level, fixed, behind everything.
 *   2. Body becomes transparent in cinema mode — the canvas itself
 *      paints the cream (--bg-page) backdrop via THREE clearColor.
 *   3. Only sections that already use --bg-page in the classic design
 *      (.ifr-section--page) become transparent — particles bleed
 *      through them. All other section backgrounds stay opaque.
 *   4. The language switcher and footer sit above the canvas.
 */

/* Canvas is always in the DOM, hidden unless cinema is active. */
#ifr-cinema-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: none;
}

body.cinema-active #ifr-cinema-canvas {
  display: block;
}

/* When cinema is active: body and the cream sections become transparent
   so the canvas (which paints cream + particles) can be seen through. */
body.cinema-active {
  background: transparent !important;
}

body.cinema-active .ifr-section--page {
  background: transparent !important;
}

/* #ifr-home paints the cream background in the classic design, which would
   cover the canvas even where a section above it is transparent. The canvas
   paints that cream itself in cinema mode, so this gets out of its way.

   The long list of parent-theme wrappers that used to be named here is gone
   with the parent theme. This markup has no wrappers between body and here. */
body.cinema-active #ifr-home {
  background: transparent !important;
  background-color: transparent !important;
}

/* Make sure content stacks ABOVE the fixed canvas. The canvas is positioned
   with z-index 0, so static content paints underneath it however late it sits
   in the document. .ifr-footer needs naming in its own right: it renders on
   wp_footer, outside #ifr-home, at body level. */
body.cinema-active #ifr-home,
body.cinema-active .ifr-footer,
body.cinema-active .ifr-header-lang {
  position: relative;
  z-index: 1;
}

/* On mobile/narrow viewports the cinema-boot script bails out, but if
   the layout ever shrinks while cinema is running (e.g. browser DevTools
   resize) hide the canvas immediately to avoid wasted CPU. */
@media (max-width: 899px) {
  body.cinema-active #ifr-cinema-canvas { display: none; }
  body.cinema-active { background: var(--bg-page) !important; }
  body.cinema-active .ifr-section--page { background: var(--bg-page) !important; }
}

/* Respect prefers-reduced-motion even if the visitor toggles it
   after cinema has booted. */
@media (prefers-reduced-motion: reduce) {
  body.cinema-active #ifr-cinema-canvas { display: none; }
  body.cinema-active { background: var(--bg-page) !important; }
  body.cinema-active .ifr-section--page { background: var(--bg-page) !important; }
}