.rolix-hero-transition-stage{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  isolation:isolate;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  contain:layout paint style;
}

@keyframes rolixHeroWindow{
  0%, 37.387116%{ transform:translate3d(-100%, 0, 0); }
  100%{ transform:translate3d(500%, 0, 0); }
}

@keyframes rolixHeroCanvas{
  0%, 37.387116%{ transform:translate3d(20%, 0, 0); }
  100%{ transform:translate3d(-100%, 0, 0); }
}

.rolix-hero-drawing-layer,
.rolix-hero-drawing-canvas,
.rolix-hero-light-beam{
  position:absolute;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}

.rolix-hero-drawing-layer{
  z-index:1;
  top:0;
  bottom:0;
  left:0;
  width:20%;
  overflow:hidden;
  visibility:hidden;
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.14) 4%,
    rgba(0,0,0,.52) 11%,
    rgba(0,0,0,.88) 19%,
    #000 25%,
    #000 75%,
    rgba(0,0,0,.88) 81%,
    rgba(0,0,0,.52) 89%,
    rgba(0,0,0,.14) 96%,
    transparent 100%
  );
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.14) 4%,
    rgba(0,0,0,.52) 11%,
    rgba(0,0,0,.88) 19%,
    #000 25%,
    #000 75%,
    rgba(0,0,0,.88) 81%,
    rgba(0,0,0,.52) 89%,
    rgba(0,0,0,.14) 96%,
    transparent 100%
  );
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  mask-mode:alpha;
  transform:translate3d(-100%, 0, 0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:layout paint style;
}

.rolix-hero-drawing-layer.is-ready{
  visibility:visible;
}

.rolix-hero-transition-stage.is-playing .rolix-hero-drawing-layer{
  animation:rolixHeroWindow 8305ms linear infinite both;
}

.rolix-hero-transition-stage.is-playing .rolix-hero-drawing-canvas{
  animation:rolixHeroCanvas 8305ms linear infinite both;
}

.rolix-hero-drawing-canvas{
  z-index:0;
  top:0;
  bottom:0;
  left:0;
  width:500%;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:top center;
  background-size:cover;
  opacity:.49;
  transform:translate3d(20%, 0, 0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.rolix-hero-light-beam{
  z-index:1;
  inset:0;
  opacity:.68;
  background:linear-gradient(
    90deg,
    rgba(255,104,0,0) 0%,
    rgba(255,112,0,.025) 14%,
    rgba(255,122,0,.06) 28%,
    rgba(255,133,0,.095) 40%,
    rgba(255,133,0,.095) 60%,
    rgba(255,122,0,.06) 72%,
    rgba(255,112,0,.025) 86%,
    rgba(255,104,0,0) 100%
  );
}

body.theme-soft .rolix-hero-drawing-canvas{
  opacity:.63;
}

body.theme-soft .rolix-hero-light-beam{
  opacity:1;
}

@media (max-width:760px){
  .rolix-hero-light-beam{
    background:linear-gradient(
      90deg,
      rgba(255,104,0,0) 0%,
      rgba(255,116,0,.045) 22%,
      rgba(255,132,0,.105) 38%,
      rgba(255,140,3,.125) 44%,
      rgba(255,140,3,.125) 56%,
      rgba(255,132,0,.105) 62%,
      rgba(255,116,0,.045) 78%,
      rgba(255,104,0,0) 100%
    );
  }
}

@media (prefers-reduced-motion:reduce){
  .rolix-hero-transition-stage{
    display:none !important;
  }
}