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

body.njs-card-fx-enabled .njs-cardfx-target{
  position:relative;
  transform-style:preserve-3d;
  transform:
    perspective(1200px)
    rotateX(var(--njs-cardfx-rx))
    rotateY(var(--njs-cardfx-ry))
    translateZ(0)
    scale(var(--njs-cardfx-scale));
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease;
  will-change:transform;
  isolation:isolate;
  overflow:visible !important;
}

body.njs-card-fx-enabled .njs-cardfx-target::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
  opacity:0;
  background:
    radial-gradient(
      420px circle at var(--njs-cardfx-glow-x) var(--njs-cardfx-glow-y),
      rgba(255,255,255,.14) 0%,
      rgba(122,92,255,.10) 22%,
      rgba(77,116,255,.06) 34%,
      transparent 62%
    );
  transition:opacity .22s ease;
}

body.njs-card-fx-enabled .njs-cardfx-target::after{
  content:"";
  position:absolute;
  top:-18%;
  left:-60%;
  width:42%;
  height:140%;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transform:rotate(18deg) translateX(0);
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.00) 20%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.00) 80%,
    transparent 100%
  );
}

body.njs-card-fx-enabled .njs-cardfx-target.njs-cardfx-active{
  box-shadow:
    0 28px 65px rgba(0,0,0,.34),
    0 0 0 1px rgba(124,108,255,.16) inset,
    0 0 32px rgba(88,98,255,.10);
  border-color:rgba(124,108,255,.34) !important;
  filter:brightness(1.02);
}

body.njs-card-fx-enabled .njs-cardfx-target.njs-cardfx-active::before{
  opacity:1;
}

body.njs-card-fx-enabled .njs-cardfx-target.njs-cardfx-active::after{
  opacity:1;
  animation:njsCardFxSweep 1.15s ease;
}

body.njs-card-fx-enabled .njs-cardfx-depth{
  position:relative;
  z-index:3;
  transform:translateZ(18px);
}

body.njs-card-fx-enabled .njs-cardfx-media{
  position:relative;
  overflow:hidden;
  transform:translateZ(12px);
}

body.njs-card-fx-enabled .njs-cardfx-media img{
  transform:
    scale(1.06)
    translate3d(calc(var(--njs-cardfx-tx) * .55), calc(var(--njs-cardfx-ty) * .55), 0);
  transition:transform .18s ease;
  will-change:transform;
}

body.njs-card-fx-enabled .njs-cardfx-target.njs-cardfx-active .njs-cardfx-media img{
  transform:
    scale(1.085)
    translate3d(calc(var(--njs-cardfx-tx) * .95), calc(var(--njs-cardfx-ty) * .95), 0);
}

body.njs-card-fx-enabled .njs-cardfx-float-1,
body.njs-card-fx-enabled .njs-cardfx-float-2{
  position:absolute;
  pointer-events:none;
  z-index:1;
  opacity:.75;
  transition:transform .18s ease, opacity .18s ease;
}

body.njs-card-fx-enabled .njs-cardfx-float-1{
  width:66px;
  height:66px;
  top:-14px;
  right:-12px;
  border-radius:999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.50), transparent 28%),
    radial-gradient(circle at center, rgba(177,76,255,.22), transparent 66%);
  box-shadow:0 0 28px rgba(177,76,255,.20);
  filter:blur(1px);
}

body.njs-card-fx-enabled .njs-cardfx-float-2{
  width:58px;
  height:16px;
  left:-10px;
  bottom:18px;
  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);
}

body.njs-card-fx-enabled .njs-cardfx-target.njs-cardfx-active .njs-cardfx-float-1{
  transform:translate3d(6px,-8px,0) scale(1.06);
  opacity:.95;
}

body.njs-card-fx-enabled .njs-cardfx-target.njs-cardfx-active .njs-cardfx-float-2{
  transform:translate3d(-4px,-8px,0) rotate(5deg);
  opacity:.92;
}

body.njs-card-fx-enabled .njs-cardfx-target .body,
body.njs-card-fx-enabled .njs-cardfx-target .njs-home-card-body,
body.njs-card-fx-enabled .njs-cardfx-target .njs-project-body,
body.njs-card-fx-enabled .njs-cardfx-target .card-body{
  position:relative;
  z-index:3;
  transform:translateZ(18px);
}

body.njs-card-fx-enabled .njs-cardfx-target .cta,
body.njs-card-fx-enabled .njs-cardfx-target .njs-home-card-cta,
body.njs-card-fx-enabled .njs-cardfx-target .njs-project-cta{
  transform:translateZ(24px);
}

@keyframes njsCardFxSweep{
  0%{transform:rotate(18deg) translateX(0);opacity:0}
  15%{opacity:1}
  100%{transform:rotate(18deg) translateX(360%);opacity:0}
}

@media (max-width:1024px){
  body.njs-card-fx-enabled .njs-cardfx-target{
    transform:none !important;
  }
  body.njs-card-fx-enabled .njs-cardfx-target::before,
  body.njs-card-fx-enabled .njs-cardfx-target::after,
  body.njs-card-fx-enabled .njs-cardfx-float-1,
  body.njs-card-fx-enabled .njs-cardfx-float-2{
    display:none !important;
  }
  body.njs-card-fx-enabled .njs-cardfx-media img{
    transform:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  body.njs-card-fx-enabled .njs-cardfx-target,
  body.njs-card-fx-enabled .njs-cardfx-target::before,
  body.njs-card-fx-enabled .njs-cardfx-target::after,
  body.njs-card-fx-enabled .njs-cardfx-media img,
  body.njs-card-fx-enabled .njs-cardfx-float-1,
  body.njs-card-fx-enabled .njs-cardfx-float-2{
    transition:none !important;
    animation:none !important;
  }
}