/*
 * Saga canvas crossfade v18.
 *
 * Mobile Safari can briefly expose a newly assigned CSS image texture even
 * when the image has already decoded.  The canvas below is created once and
 * never replaced.  Every dissolve is painted into that same surface, so a
 * scene change cannot reveal an empty or newly promoted compositor layer.
 */

.hvy-saga-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--night, #090c0d);
  pointer-events: none;
}

html.hvy-saga-canvas-ready #root {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

html.hvy-saga-canvas-ready .saga-app,
html.hvy-saga-canvas-ready .cinema-stage,
html.hvy-saga-canvas-ready .scene,
html.hvy-saga-canvas-ready .scene-media,
html.hvy-saga-canvas-ready .crossfade-media,
html.hvy-saga-canvas-ready .resolution-crossfade {
  background-color: transparent !important;
}

html.hvy-saga-canvas-ready .cinema-stage {
  background-image: none !important;
}

/*
 * React still owns copy, controls and the authored scene shade.  Only its
 * replaceable photographs are suppressed after the canvas has successfully
 * painted the first decoded frame.
 */
html.hvy-saga-canvas-ready #root .scene-media > .scene-backdrop,
html.hvy-saga-canvas-ready #root .scene-media > .scene-portrait,
html.hvy-saga-canvas-ready #root .crossfade-media > .crossfade-before,
html.hvy-saga-canvas-ready #root .crossfade-media > .crossfade-after {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

/*
 * v10 used a second full-screen dark pulse to conceal React's image exchange.
 * The permanent canvas makes that exchange disappear, so the pulse would only
 * create a perceived blink on top of the actual dissolve.
 */
html.hvy-saga-canvas-ready .cinema-stage::after,
html.hvy-saga-canvas-ready .cinema-stage.is-changing::after,
html.hvy-saga-canvas-ready .phase-handoff .cinema-stage.is-changing::after,
html.hvy-saga-canvas-ready .cinema-stage.is-handoff-target::after,
html.hvy-saga-canvas-ready .cinema-stage.is-handoff-target.is-changing::after {
  opacity: 0 !important;
  transition: none !important;
}