:root {
  --pf-geokit-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pf-geokit-motion-origin: 93.92% 50%;
}

.portfolio__geokit-motion {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.portfolio__geokit-motion-layer {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .portfolio__geokit-motion.is-ready {
    display: block;
  }

  .portfolio__geokit-motion-layer--clear {
    transition: opacity var(--duration-fast) linear;
  }

  .portfolio__geokit-motion-layer:not(.portfolio__geokit-motion-layer--clear) {
    transform: scale3d(0.001, 0.001, 1);
    transform-origin: var(--pf-geokit-motion-origin);
    transition:
      transform var(--duration-slow) var(--pf-geokit-motion-ease),
      opacity var(--duration-fast) var(--pf-geokit-motion-ease);
  }

  .portfolio__cover.has-geokit-motion:hover .portfolio__geokit-motion-layer--clear {
    opacity: 1;
  }

  .portfolio__cover.has-geokit-motion:hover
    .portfolio__geokit-motion-layer:not(.portfolio__geokit-motion-layer--clear) {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    will-change: transform, opacity;
  }

  .portfolio__cover.has-geokit-motion:hover .portfolio__geokit-motion-layer--black-orbit {
    transition-delay: var(--stagger-xs);
  }

  .portfolio__cover.has-geokit-motion:hover .portfolio__geokit-motion-layer--magenta-disc {
    transition-delay: var(--stagger-sm);
  }

  .portfolio__cover.has-geokit-motion:hover .portfolio__geokit-motion-layer--orange-square {
    transition-delay: var(--stagger-md);
  }

  .portfolio__cover.has-geokit-motion:hover .portfolio__geokit-motion-layer--green-disc {
    transition-delay: var(--stagger-lg);
  }

  .portfolio__cover.has-geokit-motion:hover .portfolio__geokit-motion-layer--yellow-diamond {
    transition-delay: calc(var(--stagger-lg) + var(--stagger-xs));
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio__geokit-motion {
    display: none !important;
  }
}