/* Prime Creation // Mobile spatial media v3
   Mobile-only selectable stereo/depth/lenticular/parallax presentation.
   The reader dialog itself is never transformed; only its interior receives depth. */

html.prime-mobile-spatial .pc-spatial-media,
html.prime-mobile-spatial .pc-spatial-section,
html.prime-mobile-spatial #pcBookReader.pc-spatial-reader {
  --pc-spatial-x:1.8px;
  --pc-spatial-y:0px;
  --pc-spatial-tilt-x:0deg;
  --pc-spatial-tilt-y:0deg;
}

html.prime-mobile-spatial .pc-spatial-media {
  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;
  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 */
html.prime-mobile-spatial [data-pc-spatial-style="stereo"].pc-spatial-media .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-media .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-media .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-media .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-media .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 */
html.prime-mobile-spatial [data-pc-spatial-style="depth"].pc-spatial-media .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-media .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-media .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-media .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-media .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 */
html.prime-mobile-spatial [data-pc-spatial-style="lenticular"].pc-spatial-media .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-media .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-media .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-media .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-media .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 */
html.prime-mobile-spatial [data-pc-spatial-style="parallax"].pc-spatial-media .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-media .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-media .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-media .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-media .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);
}

/* Every app section receives a lightweight non-interactive depth field. */
html.prime-mobile-spatial .pc-spatial-section {
  isolation:isolate;
  perspective:1000px;
}
html.prime-mobile-spatial .pc-spatial-section-field {
  position:absolute;
  z-index:50;
  inset:0;
  pointer-events:none;
  opacity:.16;
  transform:translate3d(calc(var(--pc-spatial-x) * .35),calc(var(--pc-spatial-y) * .3),0);
  mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 45%,rgba(107,232,255,.08),transparent 42%);
}
html.prime-mobile-spatial [data-pc-spatial-style="stereo"].pc-spatial-section > .pc-spatial-section-field {
  background:repeating-linear-gradient(90deg,rgba(122,236,255,.035) 0 1px,transparent 1px 4px),radial-gradient(circle at 50% 45%,rgba(107,232,255,.08),transparent 42%);
}
html.prime-mobile-spatial [data-pc-spatial-style="depth"].pc-spatial-section > .pc-spatial-section-field {
  opacity:.20;
  background:radial-gradient(ellipse at calc(50% + var(--pc-spatial-x) * 2) calc(48% + var(--pc-spatial-y) * 2),rgba(108,230,255,.13),transparent 29%),radial-gradient(ellipse at 50% 50%,transparent 0 42%,rgba(141,111,255,.055) 42.5% 43%,transparent 43.5%);
}
html.prime-mobile-spatial [data-pc-spatial-style="lenticular"].pc-spatial-section > .pc-spatial-section-field {
  opacity:.12;
  background:repeating-linear-gradient(90deg,rgba(146,236,255,.06) 0 1px,transparent 1px 3px);
}
html.prime-mobile-spatial [data-pc-spatial-style="parallax"].pc-spatial-section > .pc-spatial-section-field {
  opacity:.18;
  transform:translate3d(calc(var(--pc-spatial-x) * .8),calc(var(--pc-spatial-y) * .65),0) rotate(var(--pc-spatial-tilt-y));
  background:radial-gradient(circle at 26% 30%,rgba(95,228,255,.08),transparent 24%),radial-gradient(circle at 78% 72%,rgba(166,102,255,.07),transparent 28%);
}

/* Reader interior only. Outer #pcBookReader geometry remains untouched. */
html.prime-mobile-spatial #pcBookReader.pc-spatial-reader .pc-book-reader-panel {
  position:relative;
  isolation:isolate;
  perspective:1200px;
}
html.prime-mobile-spatial #pcBookReader.pc-spatial-reader .pc-spatial-reader-field {
  position:absolute;
  z-index:40;
  inset:0;
  pointer-events:none;
  opacity:.12;
  mix-blend-mode:screen;
}
html.prime-mobile-spatial #pcBookReader.pc-spatial-reader[data-pc-spatial-style="stereo"] .pc-spatial-reader-field {
  background:repeating-linear-gradient(90deg,rgba(119,234,255,.035) 0 1px,transparent 1px 4px);
}
html.prime-mobile-spatial #pcBookReader.pc-spatial-reader[data-pc-spatial-style="depth"] .pc-spatial-reader-field {
  opacity:.16;
  background:radial-gradient(ellipse at calc(50% + var(--pc-spatial-x) * 2) calc(48% + var(--pc-spatial-y) * 2),rgba(105,229,255,.12),transparent 30%),radial-gradient(ellipse at 50% 50%,transparent 0 54%,rgba(151,113,255,.05) 54.4% 55%,transparent 55.5%);
}
html.prime-mobile-spatial #pcBookReader.pc-spatial-reader[data-pc-spatial-style="lenticular"] .pc-spatial-reader-field {
  opacity:.095;
  background:repeating-linear-gradient(90deg,rgba(133,235,255,.065) 0 1px,transparent 1px 3px);
}
html.prime-mobile-spatial #pcBookReader.pc-spatial-reader[data-pc-spatial-style="parallax"] .pc-spatial-reader-field {
  opacity:.14;
  transform:translate3d(calc(var(--pc-spatial-x) * .7),calc(var(--pc-spatial-y) * .55),0);
  background:radial-gradient(circle at 24% 28%,rgba(87,225,255,.10),transparent 25%),radial-gradient(circle at 76% 74%,rgba(154,104,255,.08),transparent 28%);
}
html.prime-mobile-spatial #pcBookReader.pc-spatial-reader[data-pc-spatial-style="parallax"] .pc-book-reader-toolbar {
  transform:translate3d(calc(var(--pc-spatial-x) * .18),calc(var(--pc-spatial-y) * .08),0);
}
html.prime-mobile-spatial #pcBookReader.pc-spatial-reader[data-pc-spatial-style="parallax"] .pc-reader-frame-dock {
  transform:translate3d(calc(var(--pc-spatial-x) * -.16),calc(var(--pc-spatial-y) * -.07),0);
}
html.prime-mobile-spatial #pcBookReader.pc-spatial-reader[data-pc-spatial-style="depth"] #pcBookScroll {
  transform:translateZ(1px) scale(.9995);
  transform-origin:50% 50%;
}

/* Icon-only global style selector. */
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,
  html.prime-mobile-spatial .pc-spatial-section-field,
  html.prime-mobile-spatial #pcBookReader .pc-spatial-reader-field,
  html.prime-mobile-spatial #pcBookReader .pc-book-reader-toolbar,
  html.prime-mobile-spatial #pcBookReader .pc-reader-frame-dock { transform:none!important; }
  html.prime-mobile-spatial .pc-spatial-source,
  html.prime-mobile-spatial .pc-spatial-eye > img { transition:none!important;will-change:auto; }
}