/* Prime Creation // Mobile spatial media v2
   Four selectable mobile-only depth presentations for portfolio images. */

html.prime-mobile-spatial #portfolio .gallery-rail-card.pc-spatial-media,
html.prime-mobile-spatial #lightbox.pc-spatial-media {
  --pc-spatial-x:1.8px;
  --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 .pc-spatial-source {
  position:relative;
  z-index:1;
  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;
  contain:paint;
}

html.prime-mobile-spatial .pc-spatial-eye > img {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  transform-origin:50% 50%;
  will-change:transform;
}

/* STEREO: interlaced left/right views with a restrained binocular offset. */
html.prime-mobile-spatial [data-pc-spatial-style="stereo"] .pc-spatial-source {
  transform:translate3d(calc(var(--pc-spatial-x) * .16),calc(var(--pc-spatial-y) * .12),0) scale(1.016);
}
html.prime-mobile-spatial [data-pc-spatial-style="stereo"] .pc-spatial-eye-a {
  opacity:.23;
  -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 [data-pc-spatial-style="stereo"] .pc-spatial-eye-b {
  opacity:.13;
  -webkit-mask-image:repeating-linear-gradient(90deg,transparent 0 2px,#000 2px 4px);
  mask-image:repeating-linear-gradient(90deg,transparent 0 2px,#000 2px 4px);
}
html.prime-mobile-spatial [data-pc-spatial-style="stereo"] .pc-spatial-eye-a > img {
  transform:translate3d(calc(var(--pc-spatial-x) * -.82),calc(var(--pc-spatial-y) * -.25),0) scale(1.025);
  filter:saturate(1.035) contrast(1.012);
}
html.prime-mobile-spatial [data-pc-spatial-style="stereo"] .pc-spatial-eye-b > img {
  transform:translate3d(calc(var(--pc-spatial-x) * .72),calc(var(--pc-spatial-y) * .18),0) scale(1.022);
  filter:saturate(1.02) contrast(1.01);
}

/* DEPTH: center-weighted foreground plane plus a slower background plane. */
html.prime-mobile-spatial [data-pc-spatial-style="depth"] .pc-spatial-source {
  transform:translate3d(calc(var(--pc-spatial-x) * .12),calc(var(--pc-spatial-y) * .08),0) scale(1.012);
}
html.prime-mobile-spatial [data-pc-spatial-style="depth"] .pc-spatial-eye-a {
  opacity:.31;
  -webkit-mask-image:radial-gradient(ellipse at 50% 48%,#000 0 28%,rgba(0,0,0,.75) 42%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 48%,#000 0 28%,rgba(0,0,0,.75) 42%,transparent 72%);
}
html.prime-mobile-spatial [data-pc-spatial-style="depth"] .pc-spatial-eye-a > img {
  transform:translate3d(calc(var(--pc-spatial-x) * -1.08),calc(var(--pc-spatial-y) * -.62),0) scale(1.055);
  filter:contrast(1.025) saturate(1.045);
}
html.prime-mobile-spatial [data-pc-spatial-style="depth"] .pc-spatial-eye-b {
  opacity:.12;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35));
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35));
}
html.prime-mobile-spatial [data-pc-spatial-style="depth"] .pc-spatial-eye-b > img {
  transform:translate3d(calc(var(--pc-spatial-x) * .35),calc(var(--pc-spatial-y) * .22),0) scale(1.006);
  filter:brightness(.94) saturate(.96);
}

/* LENTICULAR: alternating narrow views react strongly to horizontal movement. */
html.prime-mobile-spatial [data-pc-spatial-style="lenticular"] .pc-spatial-source {
  transform:translate3d(calc(var(--pc-spatial-x) * .08),0,0) scale(1.018);
}
html.prime-mobile-spatial [data-pc-spatial-style="lenticular"] .pc-spatial-eye-a {
  opacity:.30;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px);
  mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px);
}
html.prime-mobile-spatial [data-pc-spatial-style="lenticular"] .pc-spatial-eye-b {
  opacity:.24;
  -webkit-mask-image:repeating-linear-gradient(90deg,transparent 0 1px,#000 1px 2px,transparent 2px 3px);
  mask-image:repeating-linear-gradient(90deg,transparent 0 1px,#000 1px 2px,transparent 2px 3px);
}
html.prime-mobile-spatial [data-pc-spatial-style="lenticular"] .pc-spatial-eye-a > img {
  transform:translate3d(calc(var(--pc-spatial-x) * -1.42),calc(var(--pc-spatial-y) * -.18),0) scale(1.035);
}
html.prime-mobile-spatial [data-pc-spatial-style="lenticular"] .pc-spatial-eye-b > img {
  transform:translate3d(calc(var(--pc-spatial-x) * 1.18),calc(var(--pc-spatial-y) * .12),0) scale(1.031);
}

/* PARALLAX: full planes move at different rates and tilt with the device/touch field. */
html.prime-mobile-spatial [data-pc-spatial-style="parallax"] .pc-spatial-source {
  transform:translate3d(calc(var(--pc-spatial-x) * -.28),calc(var(--pc-spatial-y) * -.18),0) scale(1.028);
}
html.prime-mobile-spatial [data-pc-spatial-style="parallax"] .pc-spatial-eye-a {
  opacity:.19;
  -webkit-mask-image:linear-gradient(120deg,#000 0 58%,transparent 82%);
  mask-image:linear-gradient(120deg,#000 0 58%,transparent 82%);
}
html.prime-mobile-spatial [data-pc-spatial-style="parallax"] .pc-spatial-eye-b {
  opacity:.12;
  -webkit-mask-image:linear-gradient(300deg,#000 0 44%,transparent 76%);
  mask-image:linear-gradient(300deg,#000 0 44%,transparent 76%);
}
html.prime-mobile-spatial [data-pc-spatial-style="parallax"] .pc-spatial-eye-a > img {
  transform:translate3d(calc(var(--pc-spatial-x) * 1.35),calc(var(--pc-spatial-y) * .85),0) scale(1.045);
  filter:saturate(1.04) contrast(1.015);
}
html.prime-mobile-spatial [data-pc-spatial-style="parallax"] .pc-spatial-eye-b > img {
  transform:translate3d(calc(var(--pc-spatial-x) * -.72),calc(var(--pc-spatial-y) * -.48),0) scale(1.012);
  filter:brightness(.96);
}

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

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

/* Icon-only style selector, kept separate from the hidden lightbox copy. */
html:not(.prime-mobile-spatial) .pc-spatial-style-picker { display:none!important; }
.pc-spatial-style-picker {
  position:fixed;
  z-index:2147480000;
  left:50%;
  bottom:max(1rem,calc(env(safe-area-inset-bottom) + .55rem));
  display:flex;
  gap:.35rem;
  transform:translateX(-50%);
  padding:.38rem;
  border:1px solid rgba(124,232,255,.2);
  border-radius:999px;
  background:rgba(2,8,13,.78);
  box-shadow:0 .8rem 2rem rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.pc-spatial-style-picker[hidden] { display:none!important; }
.pc-spatial-style-picker button {
  display:grid;
  place-items:center;
  width:2.55rem;
  height:2.55rem;
  padding:0;
  border:1px solid rgba(157,229,255,.12);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  color:rgba(222,245,252,.62);
  font:800 1rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.pc-spatial-style-picker button[aria-pressed="true"] {
  border-color:rgba(111,231,255,.55);
  background:rgba(89,219,255,.12);
  color:#effdff;
  box-shadow:0 0 18px rgba(83,220,255,.15),inset 0 0 12px rgba(83,220,255,.06);
}

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