/* Master Animation v2 — styles
   The animation draws on one fixed canvas (#ma-stage, created by the script) behind everything on the page. It works from the ID anchors
   alone: give the rows (or any elements) the IDs globe-animation, rocket-animation, planet-animation, orbit-animation and contact-us,
   plus any checkpoint IDs. Nothing needs a class.
   The canvas sits behind the page. The script clears the backgrounds that would cover it: <body>'s, and every wrapper between <body> and
   each scene's element (a theme's content area, for example). Anything else with a solid background (a header bar, a row you have
   coloured) still shows on top of it, as intended. */

html { background: #05060c; }                  /* shown for a moment before the animation starts, and where WebGL is unavailable */
body { overflow-x: hidden; }
body.ma-live { background: transparent !important; }

/* the animation canvas: behind all content, never catching clicks */
#ma-stage {
  position: fixed; left: 0; top: 0;
  width: 100%; height: 100vh; height: 100lvh;
  z-index: -1; pointer-events: none; display: block;
}

/* WPBakery: make sure a theme style doesn't paint over the animation inside the scene rows */
:is(#globe-animation, #rocket-animation, #planet-animation, #orbit-animation, #contact-us) :is(.vc_row, .vc_column-inner, .wpb_wrapper) { background-color: transparent; }

/* copy the scenes fade (optional classes): promoted to their own layer so fading never repaints the page */
.ma-fade-globe, .ma-fade-hint, .ma-fade-rocket { will-change: opacity; }

/* Optional scroll lengths. Each scene plays while its element passes the middle of the screen (or up to its last checkpoint), so its
   length is that element's height. If an element is shorter than you want its scene to last, add one of these classes to it: */
.ma-globe    { min-height: 210vh; }
.ma-rocket   { min-height: 160vh; }
.ma-planet   { min-height: 280vh; }
.ma-orbit    { min-height: 380vh; }
.ma-contact  { min-height: 180vh; }