html{background:#020606}
html body.inf-bg-scenes-active,
html body.inf-bg-scenes-active.woocommerce-checkout.infcc-checkout-owned{background:transparent!important;background-color:transparent!important}

/* v0.2.5: keep the scene layer inside an isolated body stacking context.
   This keeps it visually behind the site while making it a real backdrop that
   Chromium/Edge backdrop-filter surfaces can sample reliably. */
html body.inf-bg-scenes-active{position:relative!important;isolation:isolate!important}

#inf-bg-scenes.inf-bg-scenes{
  left:0;width:100%;z-index:-1;overflow:hidden;pointer-events:none;background:#020606;
}
#inf-bg-scenes.inf-bg-mode-fixed{
  position:fixed;top:0;height:100vh;contain:strict;
}
@supports (height:100lvh){
  #inf-bg-scenes.inf-bg-mode-fixed{height:100lvh}
}
#inf-bg-scenes.inf-bg-mode-scroll{
  /* Fixed translated track: visually scrolls with the document, but can never
     create extra document height after a resize. */
  position:fixed;top:0;left:0;min-height:0;overflow:visible;contain:none;
  will-change:transform;transform:translate3d(0,0,0);
}

#inf-bg-scenes .inf-bg-scene{
  background-position:center var(--infbg-focal,50%);
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#020606;
}
#inf-bg-scenes.inf-bg-mode-fixed .inf-bg-scene{
  position:absolute;inset:-1px;
  opacity:0;
  transition:opacity var(--infbg-transition,650ms) ease;
  will-change:opacity;
}
#inf-bg-scenes.inf-bg-mode-fixed .inf-bg-scene.is-active{opacity:1}
#inf-bg-scenes.inf-bg-mode-scroll .inf-bg-scene{
  position:absolute;left:0;width:100%;opacity:1;
}

/* The user's cinematic top/bottom + side vignette. */
#inf-bg-scenes.inf-bg-vignette .inf-bg-scene::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:var(--infbg-vignette-opacity,1);
  background:
    linear-gradient(
      to bottom,
      rgba(var(--infbg-tint-rgb,1,5,5),1) 0%,
      rgba(var(--infbg-tint-rgb,1,5,5),.88) 5%,
      rgba(var(--infbg-tint-rgb,1,5,5),.45) 11%,
      rgba(var(--infbg-tint-rgb,1,5,5),.12) 18%,
      rgba(var(--infbg-tint-rgb,1,5,5),0) 27%,
      rgba(var(--infbg-tint-rgb,1,5,5),0) 73%,
      rgba(var(--infbg-tint-rgb,1,5,5),.12) 82%,
      rgba(var(--infbg-tint-rgb,1,5,5),.45) 89%,
      rgba(var(--infbg-tint-rgb,1,5,5),.88) 95%,
      rgba(var(--infbg-tint-rgb,1,5,5),1) 100%
    ),
    linear-gradient(
      to right,
      rgba(var(--infbg-tint-rgb,1,5,5),.35) 0%,
      rgba(var(--infbg-tint-rgb,1,5,5),0) 12%,
      rgba(var(--infbg-tint-rgb,1,5,5),0) 88%,
      rgba(var(--infbg-tint-rgb,1,5,5),.35) 100%
    );
}

#inf-bg-scenes .inf-bg-scene::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:rgba(var(--infbg-tint-rgb,2,6,6),var(--infbg-overlay,.72));
  pointer-events:none;
}

@media (max-width:767px){
  #inf-bg-scenes.inf-bg-mode-fixed{width:100%;min-width:100%;}
}
@media (prefers-reduced-motion:reduce){
  #inf-bg-scenes.inf-bg-mode-fixed .inf-bg-scene{transition:none!important}
}