/* Prime Creation // Mobile spatial media v1
   Synthetic stereoscopic/lenticular presentation for mobile portfolio media.
   It does not claim to reconstruct true binocular depth from a single source image. */

html.prime-mobile-spatial #portfolio .gallery-rail-card.pc-spatial-media,
html.prime-mobile-spatial #lightbox.pc-spatial-media {
  --pc-spatial-x: 1.6px;
  --pc-spatial-y: 0px;
  --pc-spatial-tilt-x: 0deg;
  --pc-spatial-tilt-y: 0deg;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
}

html.prime-mobile-spatial #portfolio .gallery-rail-card.pc-spatial-media {
  perspective: 850px;
  will-change: transform;
  transform: perspective(850px) rotateX(var(--pc-spatial-tilt-x)) rotateY(var(--pc-spatial-tilt-y)) translateZ(0);
}

html.prime-mobile-spatial #portfolio .gallery-rail-card.pc-spatial-media > img.pc-spatial-source,
html.prime-mobile-spatial #lightbox.pc-spatial-media > img.pc-spatial-source {
  position: relative;
  z-index: 1;
  transform: translate3d(calc(var(--pc-spatial-x) * .18), calc(var(--pc-spatial-y) * .18), 0) scale(1.012);
  transform-origin: 50% 50%;
  will-change: transform;
}

html.prime-mobile-spatial .pc-spatial-eye {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .22;
  contain: paint;
  -webkit-mask-image: repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px);
  mask-image: repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px);
}

html.prime-mobile-spatial .pc-spatial-eye > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  transform: translate3d(calc(var(--pc-spatial-x) * -.72), calc(var(--pc-spatial-y) * -.34), 0) scale(1.022);
  transform-origin: 50% 50%;
  filter: saturate(1.035) contrast(1.015);
  will-change: transform;
}

html.prime-mobile-spatial #portfolio .gallery-rail-card.pc-spatial-media::before {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background:
    radial-gradient(circle at calc(50% + var(--pc-spatial-x) * 3) calc(45% + var(--pc-spatial-y) * 2),rgba(225,251,255,.18),transparent 34%),
    linear-gradient(105deg,transparent 22%,rgba(92,227,255,.08) 48%,transparent 70%);
  mix-blend-mode: screen;
}

html.prime-mobile-spatial #lightbox.pc-spatial-media .pc-spatial-eye {
  inset: auto;
  border-radius: inherit;
}

html.prime-mobile-spatial #lightbox.pc-spatial-media > img.pc-spatial-source {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html.prime-mobile-spatial #portfolio .gallery-rail-card.pc-spatial-media {
    transform: none !important;
  }
  html.prime-mobile-spatial #portfolio .gallery-rail-card.pc-spatial-media > img.pc-spatial-source,
  html.prime-mobile-spatial #lightbox.pc-spatial-media > img.pc-spatial-source,
  html.prime-mobile-spatial .pc-spatial-eye > img {
    transition: none !important;
    will-change: auto;
  }
}