.nf-featured-image-effect {
  perspective: 1200px;
  overflow: visible;
}

.nf-featured-image-effect-target {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--nf-fi-radius, 0px);
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale(1);
  transform-style: preserve-3d;
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
  will-change: transform;
}

.nf-featured-image-effect[data-nf-featured-effect="tilt"] .nf-featured-image-effect-target {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.nf-featured-image-effect[data-nf-featured-effect="tilt"]:hover .nf-featured-image-effect-target,
.nf-featured-image-effect[data-nf-featured-effect="tilt"]:focus-within .nf-featured-image-effect-target {
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.34);
}

.nf-featured-image-effect[data-nf-featured-effect="lift-zoom"]:hover .nf-featured-image-effect-target,
.nf-featured-image-effect[data-nf-featured-effect="lift-zoom"]:focus-within .nf-featured-image-effect-target {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.34);
  filter: saturate(1.04);
}

.nf-featured-image-effect[data-nf-featured-effect="css-parallax"] {
  perspective: 400px;
}

.nf-featured-image-effect[data-nf-featured-effect="css-parallax"] .nf-featured-image-effect-target {
  aspect-ratio: auto;
  object-fit: contain;
  clip-path: inset(0 calc(100% * var(--nf-fi-parallax, .12) / (1 + var(--nf-fi-parallax, .12))) 0 0 round var(--nf-fi-radius, 10px));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.nf-featured-image-effect[data-nf-featured-effect="css-rotation"] .nf-featured-image-effect-target {
  padding-block: var(--nf-fi-depth, 18px);
  outline: var(--nf-fi-depth, 18px) solid rgba(0, 0, 0, 0.42);
  outline-offset: calc(-1 * var(--nf-fi-depth, 18px));
  clip-path: polygon(
    0 calc(100% - var(--nf-fi-depth, 18px) - 10px),
    0 calc(var(--nf-fi-depth, 18px) + 10px),
    var(--nf-fi-depth, 18px) var(--nf-fi-depth, 18px),
    calc(100% - var(--nf-fi-depth, 18px)) var(--nf-fi-depth, 18px),
    100% calc(var(--nf-fi-depth, 18px) + 10px),
    100% calc(100% - var(--nf-fi-depth, 18px) - 10px),
    calc(100% - var(--nf-fi-depth, 18px)) calc(100% - var(--nf-fi-depth, 18px)),
    var(--nf-fi-depth, 18px) calc(100% - var(--nf-fi-depth, 18px))
  );
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

.nf-featured-image-effect[data-nf-featured-effect="css-rotation"][data-nf-fi-side="left"] .nf-featured-image-effect-target {
  clip-path: polygon(
    0 calc(100% - var(--nf-fi-depth, 18px) - 10px),
    0 calc(var(--nf-fi-depth, 18px) + 10px),
    var(--nf-fi-depth, 18px) var(--nf-fi-depth, 18px),
    calc(100% - var(--nf-fi-depth, 18px)) var(--nf-fi-depth, 18px),
    calc(100% - var(--nf-fi-depth, 18px)) calc(100% - var(--nf-fi-depth, 18px)),
    var(--nf-fi-depth, 18px) calc(100% - var(--nf-fi-depth, 18px))
  );
}

.nf-featured-image-effect[data-nf-featured-effect="css-rotation"][data-nf-fi-side="right"] .nf-featured-image-effect-target {
  clip-path: polygon(
    var(--nf-fi-depth, 18px) var(--nf-fi-depth, 18px),
    calc(100% - var(--nf-fi-depth, 18px)) var(--nf-fi-depth, 18px),
    100% calc(var(--nf-fi-depth, 18px) + 10px),
    100% calc(100% - var(--nf-fi-depth, 18px) - 10px),
    calc(100% - var(--nf-fi-depth, 18px)) calc(100% - var(--nf-fi-depth, 18px)),
    var(--nf-fi-depth, 18px) calc(100% - var(--nf-fi-depth, 18px))
  );
}

.nf-featured-image-effect[data-nf-featured-effect="css-shine"] .nf-featured-image-effect-target {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  border-radius: 0;
}

.nf-featured-image-effect[data-nf-featured-effect="css-shine"][data-nf-fi-shine="on"] .nf-featured-image-effect-target {
  -webkit-mask: linear-gradient(135deg,#000c 40%,#000,#000c 60%) 100% 100%/250% 250%;
  mask: linear-gradient(135deg,#000c 40%,#000,#000c 60%) 100% 100%/250% 250%;
}

.nf-featured-image-effect[data-nf-featured-effect="css-shine"][data-nf-fi-rounded="on"] .nf-featured-image-effect-target {
  border-radius: var(--nf-fi-radius, 20px);
}

@media (pointer: coarse) {
  .nf-featured-image-effect-target {
    transform: none !important;
  }
}