:root{
  --njs-hero-rx:0deg;
  --njs-hero-ry:0deg;
  --njs-hero-tx:0px;
  --njs-hero-ty:0px;
  --njs-hero-glow-x:50%;
  --njs-hero-glow-y:50%;
}

body.njs-hero-parallax-enabled .njs-hero-parallax-target{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  perspective:1600px;
  transform-style:preserve-3d;
}

body.njs-hero-parallax-enabled .njs-hero-parallax-target::before{
  content:"";
  position:absolute;
  inset:-8% -10% auto auto;
  width:min(44vw,560px);
  height:min(44vw,560px);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:.78;
  background:radial-gradient(circle, rgba(173,76,255,.18), transparent 66%);
  filter:blur(24px);
  transform:translate3d(calc(var(--njs-hero-tx) * -.45), calc(var(--njs-hero-ty) * -.45), 0);
  transition:transform .16s ease;
}

body.njs-hero-parallax-enabled .njs-hero-parallax-target::after{
  content:"";
  position:absolute;
  inset:auto auto -16% -8%;
  width:min(28vw,360px);
  height:min(28vw,360px);
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:.7;
  background:radial-gradient(circle, rgba(77,116,255,.16), transparent 68%);
  filter:blur(20px);
  transform:translate3d(calc(var(--njs-hero-tx) * -.25), calc(var(--njs-hero-ty) * -.25), 0);
  transition:transform .16s ease;
}

body.njs-hero-parallax-enabled .njs-hero-parallax-content,
body.njs-hero-parallax-enabled .njs-hero-parallax-media,
body.njs-hero-parallax-enabled .njs-hero-parallax-deco{
  position:relative;
  z-index:2;
}

body.njs-hero-parallax-enabled .njs-hero-parallax-content{
  transform-style:preserve-3d;
  transform:
    translate3d(calc(var(--njs-hero-tx) * .55), calc(var(--njs-hero-ty) * .55), 0)
    rotateX(calc(var(--njs-hero-rx) * .22))
    rotateY(calc(var(--njs-hero-ry) * .22));
  transition:transform .14s ease;
  will-change:transform;
}

body.njs-hero-parallax-enabled .njs-hero-parallax-content > *{
  position:relative;
  z-index:2;
}

body.njs-hero-parallax-enabled .njs-hero-parallax-target h1,
body.njs-hero-parallax-enabled .njs-hero-parallax-target h2,
body.njs-hero-parallax-enabled .njs-hero-parallax-target p,
body.njs-hero-parallax-enabled .njs-hero-parallax-target .cta,
body.njs-hero-parallax-enabled .njs-hero-parallax-target .cta-btn,
body.njs-hero-parallax-enabled .njs-hero-parallax-target .button,
body.njs-hero-parallax-enabled .njs-hero-parallax-target .btn{
  transform:translateZ(18px);
}

body.njs-hero-parallax-enabled .njs-hero-parallax-media{
  transform-style:preserve-3d;
  transform:
    translate3d(calc(var(--njs-hero-tx) * -.65), calc(var(--njs-hero-ty) * -.65), 0)
    rotateX(calc(var(--njs-hero-rx) * -.28))
    rotateY(calc(var(--njs-hero-ry) * -.28));
  transition:transform .14s ease;
  will-change:transform;
}

body.njs-hero-parallax-enabled .njs-hero-parallax-media img,
body.njs-hero-parallax-enabled .njs-hero-parallax-media picture img,
body.njs-hero-parallax-enabled .njs-hero-parallax-media video{
  transform:
    scale(1.06)
    translate3d(calc(var(--njs-hero-tx) * -.85), calc(var(--njs-hero-ty) * -.85), 0);
  transition:transform .16s ease;
  will-change:transform;
}

body.njs-hero-parallax-enabled .njs-hero-parallax-target.njs-hero-parallax-active .njs-hero-parallax-media img,
body.njs-hero-parallax-enabled .njs-hero-parallax-target.njs-hero-parallax-active .njs-hero-parallax-media picture img,
body.njs-hero-parallax-enabled .njs-hero-parallax-target.njs-hero-parallax-active .njs-hero-parallax-media video{
  transform:
    scale(1.09)
    translate3d(calc(var(--njs-hero-tx) * -1.05), calc(var(--njs-hero-ty) * -1.05), 0);
}

body.njs-hero-parallax-enabled .njs-hero-parallax-light{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0;
  background:
    radial-gradient(
      440px circle at var(--njs-hero-glow-x) var(--njs-hero-glow-y),
      rgba(255,255,255,.15) 0%,
      rgba(122,92,255,.09) 26%,
      rgba(77,116,255,.06) 38%,
      transparent 66%
    );
  transition:opacity .18s ease;
}

body.njs-hero-parallax-enabled .njs-hero-parallax-target.njs-hero-parallax-active .njs-hero-parallax-light{
  opacity:1;
}

body.njs-hero-parallax-enabled .njs-hero-orb,
body.njs-hero-parallax-enabled .njs-hero-chip,
body.njs-hero-parallax-enabled .njs-hero-ring{
  position:absolute;
  pointer-events:none;
  z-index:1;
  transition:transform .16s ease, opacity .16s ease;
  will-change:transform;
}

body.njs-hero-parallax-enabled .njs-hero-orb{
  width:84px;
  height:84px;
  border-radius:999px;
  opacity:.44;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.52), transparent 28%),
    radial-gradient(circle at center, rgba(177,76,255,.24), transparent 66%);
  box-shadow:0 0 34px rgba(177,76,255,.20);
  filter:blur(1px);
}

body.njs-hero-parallax-enabled .njs-hero-orb.blue{
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.52), transparent 28%),
    radial-gradient(circle at center, rgba(77,116,255,.24), transparent 66%);
  box-shadow:0 0 34px rgba(77,116,255,.20);
}

body.njs-hero-parallax-enabled .njs-hero-chip{
  width:84px;
  height:20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(90deg, rgba(77,116,255,.22), rgba(177,76,255,.18)),
    rgba(255,255,255,.03);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  opacity:.72;
}

body.njs-hero-parallax-enabled .njs-hero-ring{
  width:108px;
  height:108px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 8px rgba(177,76,255,.05),
    0 0 30px rgba(77,116,255,.14);
  opacity:.46;
}

body.njs-hero-parallax-enabled .njs-hero-orb.orb-a{ top:22px; right:18px; }
body.njs-hero-parallax-enabled .njs-hero-orb.orb-b{ bottom:18px; left:14px; }
body.njs-hero-parallax-enabled .njs-hero-chip.chip-a{ top:72px; left:-8px; }
body.njs-hero-parallax-enabled .njs-hero-chip.chip-b{ bottom:44px; right:-6px; width:58px; height:16px; }
body.njs-hero-parallax-enabled .njs-hero-ring.ring-a{ top:40%; right:-18px; }

body.njs-hero-parallax-enabled .njs-hero-parallax-target.njs-hero-parallax-active .njs-hero-orb.orb-a{
  transform:translate3d(calc(var(--njs-hero-tx) * -.8), calc(var(--njs-hero-ty) * -.8), 0);
}
body.njs-hero-parallax-enabled .njs-hero-parallax-target.njs-hero-parallax-active .njs-hero-orb.orb-b{
  transform:translate3d(calc(var(--njs-hero-tx) * .7), calc(var(--njs-hero-ty) * .7), 0);
}
body.njs-hero-parallax-enabled .njs-hero-parallax-target.njs-hero-parallax-active .njs-hero-chip.chip-a{
  transform:translate3d(calc(var(--njs-hero-tx) * -.55), calc(var(--njs-hero-ty) * -.55), 0) rotate(5deg);
}
body.njs-hero-parallax-enabled .njs-hero-parallax-target.njs-hero-parallax-active .njs-hero-chip.chip-b{
  transform:translate3d(calc(var(--njs-hero-tx) * .55), calc(var(--njs-hero-ty) * .55), 0) rotate(-4deg);
}
body.njs-hero-parallax-enabled .njs-hero-parallax-target.njs-hero-parallax-active .njs-hero-ring.ring-a{
  transform:translate3d(calc(var(--njs-hero-tx) * -.45), calc(var(--njs-hero-ty) * -.45), 0) rotate(8deg);
}

@media (max-width:1024px){
  body.njs-hero-parallax-enabled .njs-hero-parallax-target::before,
  body.njs-hero-parallax-enabled .njs-hero-parallax-target::after,
  body.njs-hero-parallax-enabled .njs-hero-orb,
  body.njs-hero-parallax-enabled .njs-hero-chip,
  body.njs-hero-parallax-enabled .njs-hero-ring,
  body.njs-hero-parallax-enabled .njs-hero-parallax-light{
    display:none !important;
  }

  body.njs-hero-parallax-enabled .njs-hero-parallax-content,
  body.njs-hero-parallax-enabled .njs-hero-parallax-media,
  body.njs-hero-parallax-enabled .njs-hero-parallax-media img,
  body.njs-hero-parallax-enabled .njs-hero-parallax-media picture img,
  body.njs-hero-parallax-enabled .njs-hero-parallax-media video{
    transform:none !important;
    transition:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  body.njs-hero-parallax-enabled .njs-hero-parallax-target,
  body.njs-hero-parallax-enabled .njs-hero-parallax-content,
  body.njs-hero-parallax-enabled .njs-hero-parallax-media,
  body.njs-hero-parallax-enabled .njs-hero-parallax-media img,
  body.njs-hero-parallax-enabled .njs-hero-parallax-media picture img,
  body.njs-hero-parallax-enabled .njs-hero-parallax-media video,
  body.njs-hero-parallax-enabled .njs-hero-orb,
  body.njs-hero-parallax-enabled .njs-hero-chip,
  body.njs-hero-parallax-enabled .njs-hero-ring,
  body.njs-hero-parallax-enabled .njs-hero-parallax-light{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
}