/* Prime Creation // CLEAN ROOM MOTION BACKGROUND v2
   Shared decoder in shell normally, inside gallery on Page 04. CSS-native geometry. Zero page-scroll or PrimeLayout coupling. */

html[data-prime-viewport-motion] #main[data-app-shell]{isolation:isolate!important}

/* Spatial scrollport integrity: a forced root isolation layer flattens the
   child Z chain and can make iOS repaint a native scroller while panning.
   Main is already a fixed stacking context. Preserve depth without altering
   the scroll owner, z-index, viewport size or motion video visibility. */
html[data-prime-viewport-motion][data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
#main[data-app-shell]{isolation:auto!important}

html[data-prime-viewport-motion] body.prime-v2 #main[data-app-shell]>.prime-viewport-motion-layer{
  position:absolute!important;
  z-index:0!important;
  top:var(--prime-native-safe-top,env(safe-area-inset-top,0px))!important;
  right:var(--prime-native-safe-right,env(safe-area-inset-right,0px))!important;
  bottom:var(--prime-pill-system-reserve,68px)!important;
  left:var(--prime-native-safe-left,env(safe-area-inset-left,0px))!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  border:0!important;
  border-radius:clamp(1.05rem,2.4vw,1.7rem)!important;
  background:#02060b!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  contain:layout paint style!important;
  transform:none!important;
  transition:opacity 120ms linear!important;
}
html[data-prime-viewport-motion] body.prime-v2 #main[data-app-shell]>.prime-viewport-motion-layer[data-active="true"]{
  opacity:1!important;
  visibility:visible!important;
}
/* The portfolio route shares the same visible compositor underlay. */
html[data-prime-viewport-motion] body.prime-v2 #main[data-app-shell]>.prime-viewport-motion-layer>video[data-prime-video-background="true"]{
  position:absolute!important;
  z-index:0!important;
  inset:-2%!important;
  width:104%!important;
  height:104%!important;
  min-width:104%!important;
  min-height:104%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
  background:#02060b!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  transform:none!important;
}

/* Active page always stays above the stationary underlay. */
html[data-prime-viewport-motion] body.prime-v2 #main[data-app-shell]>.app-window[data-prime-motion-active="true"]{
  z-index:1!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}

/* Readable page structures stay above the underlay. */
html[data-prime-viewport-motion] #main[data-app-shell]>.app-window[data-prime-motion-active="true"]>:is(
  .tab01-intro-zone,.tab01-continuity,.tab01-services,.children03-surface,.page04-signage,.page04-spatial-shell,
  .video-grid,.pc-book-layout,.sprite-copy,.console,#process>div[data-reveal],#process>ol,.studio-layout,
  [data-page10-contact-copy="true"],#projectForm,form
){
  position:relative!important;
  z-index:2!important;
  isolation:isolate!important;
}

/* Longform native scroll protection: compositing-isolated content wrappers
   inside a scrolling route compete with WebKit's touch compositor and flatten
   the nested 3D machines. Preserve the existing positioned z-index/readability,
   but do not create an extra paint group on pages 02, 07, 08, 09 or 10. */
html[data-prime-viewport-motion] body.prime-v2 #main[data-app-shell]
>:is(#intro,#sprite,#process,#studio,#contact).app-window.is-prime-viewport-active[data-prime-motion-active="true"]
>:is(.tab01-intro-zone,.tab01-continuity,.tab01-services,.sprite-copy,.console,.studio-layout,[data-page10-contact-copy="true"],#projectForm,form){
  isolation:auto!important;
}

/* Simple glass treatment. No dynamic pane enrollment and no geometry mutation. */
html[data-prime-viewport-motion] #main[data-app-shell]>#intro[data-prime-motion-active="true"] :is(.tab01-intro-zone,.tab01-continuity,.tab01-services,.service-card){
  background-color:rgba(3,14,22,.56)!important;
}
html[data-prime-viewport-motion] #main[data-app-shell]>#music[data-prime-motion-active="true"] [data-resonance-player]{
  background-color:rgba(3,12,20,.66)!important;
}
html[data-prime-viewport-motion] #main[data-app-shell]>#portfolio[data-prime-motion-active="true"] .page04-spatial-shell{background:rgba(2,8,15,.22)!important}
html[data-prime-viewport-motion] #main[data-app-shell]>#portfolio[data-prime-motion-active="true"] #gallery.page04-world{background:rgba(2,8,15,.08)!important}
html[data-prime-viewport-motion] #main[data-app-shell]>#portfolio[data-prime-motion-active="true"] .page04-catalog{background:rgba(2,8,15,.76)!important}
html[data-prime-viewport-motion] #main[data-app-shell]>#video[data-prime-motion-active="true"] .pc-video-shell{
  background-color:rgba(3,11,18,.68)!important;
}
html[data-prime-viewport-motion] #main[data-app-shell]>#book[data-prime-motion-active="true"]{
  background:transparent!important;
}
html[data-prime-viewport-motion] #main[data-app-shell]>#sprite[data-prime-motion-active="true"]>.console,
html[data-prime-viewport-motion] #main[data-app-shell]>#studio[data-prime-motion-active="true"] :is(.studio-console,.studio-request-shell),
html[data-prime-viewport-motion] #main[data-app-shell]>#contact[data-prime-motion-active="true"] #projectForm{
  background-color:rgba(3,12,20,.68)!important;
}

html[data-prime-motion-backgrounds="off"] body.prime-v2 #main[data-app-shell]>.prime-viewport-motion-layer{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
@media(prefers-reduced-motion:reduce){
  body.prime-v2 #main[data-app-shell]>.prime-viewport-motion-layer{transition:none!important}
}


/* Continuous video transport: never hide the compositor during native scroll. */

/* Only Page 04 rehouses the existing shell video's container in the gallery field. */
html[data-prime-viewport-motion] body.prime-v2 #main[data-app-shell]>#portfolio #gallery.page04-world>.prime-viewport-motion-layer[data-prime-motion-host="page04-gallery-background-field"]{
  position:absolute!important;inset:0!important;z-index:0!important;
  display:block!important;width:100%!important;height:100%!important;
  min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;
  overflow:hidden!important;box-sizing:border-box!important;border:0!important;border-radius:0!important;
  background:#02060b!important;opacity:0!important;visibility:hidden!important;
  pointer-events:none!important;contain:layout paint style!important;
  transition:opacity 120ms linear!important;
}
html[data-prime-viewport-motion] body.prime-v2 #main[data-app-shell]>#portfolio #gallery.page04-world>.prime-viewport-motion-layer[data-active="true"]{
  opacity:1!important;visibility:visible!important;
}
html[data-prime-viewport-motion] body.prime-v2 #main[data-app-shell]>#portfolio #gallery.page04-world>.prime-viewport-motion-layer>video[data-prime-video-background="true"]{
  position:absolute!important;inset:-2%!important;z-index:0!important;
  width:104%!important;height:104%!important;min-width:104%!important;min-height:104%!important;
  margin:0!important;padding:0!important;border:0!important;
  object-fit:cover!important;object-position:center!important;opacity:1!important;visibility:visible!important;
  pointer-events:none!important;transform:none!important;
}
html[data-prime-motion-backgrounds="off"] body.prime-v2 #main[data-app-shell]>#portfolio #gallery.page04-world>.prime-viewport-motion-layer{
  display:none!important;visibility:hidden!important;opacity:0!important;
}

/* SHARED MOTION DEPTH HYDRATION r3
   One existing video decoder, one far plane. The glass and machine panels
   are nearer; their 2-5 interior tiers remain shallow and readable.
   The Z transform itself belongs exclusively to PrimeSpatialField, so no
   duplicate sensor subscription or second full-viewport camera is created.
   No blur/backdrop-filter/continuous CSS animation: one static vignette.
*/
html[data-prime-viewport-motion] body.prime-v2
.prime-viewport-motion-layer[data-prime-background-layer="true"]{
  --prime-motion-depth-role:deepest-visual-world;
  transform-style:preserve-3d!important;
  transform-origin:50% 50%!important;
  backface-visibility:visible!important;
  pointer-events:none!important;
}
html[data-prime-viewport-motion] body.prime-v2
.prime-viewport-motion-layer[data-prime-background-layer="true"]::after{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse 86% 86% at 50% 47%,transparent 40%,rgba(0,4,10,.18) 100%),
    linear-gradient(180deg,rgba(0,4,9,.08),transparent 30%,transparent 72%,rgba(0,4,9,.12));
  pointer-events:none;
  transform:none;
  opacity:.84;
}
html[data-prime-viewport-motion] body.prime-v2
#main[data-app-shell]>#portfolio #gallery.page04-world
>.prime-viewport-motion-layer[data-prime-motion-host="page04-gallery-background-field"]{
  transform-style:preserve-3d!important;
  transform-origin:50% 50%!important;
}
@media(prefers-reduced-transparency:reduce){
  html[data-prime-viewport-motion] body.prime-v2
  .prime-viewport-motion-layer[data-prime-background-layer="true"]::after{
    opacity:.45;
  }
}


/* SPATIAL MACHINE ANCESTOR INTEGRITY r4
   Differential audit: Page02 service-card machines use an open preserve-3d
   shell. The shared motion layer was assigning isolation:isolate to
   .sprite-copy, .video-grid, .studio-layout etc, flattening every machine
   descended from that intermediate paint group. Retain the existing
   background-plane z-index but remove compositing isolation ONLY in Spatial.
   Do not touch the one Page04 framed-image/gallery pose or 2D site mode. */
html[data-prime-viewport-motion][data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
#main[data-app-shell]>.app-window:not(#top):not(#portfolio)[data-prime-motion-active="true"]
>:is(.sprite-copy,.video-grid,.pc-book-layout,.children03-surface,.music-copy,.studio-layout,.studio-copy,.contact-routes,form,#projectForm,.tab01-services,#process>ol):has([data-prime-z-screen="true"]){
  isolation:auto!important;
  contain:none!important;
  transform-style:preserve-3d!important;
  overflow:visible!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
}
/* Select the actual Page07 route and other multi-panel scaffolds even if
   their motion-background flag temporarily hydrates after Spatial first paint.
   Crucial: do NOT neutralize the layout's own transform or scroll. */
html[data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window:not(#top):not(#portfolio)
:is(.sprite-copy,.video-grid,.studio-layout,.pc-book-layout,.tab01-services,.children03-surface):has([data-prime-z-screen="true"]){
  isolation:auto!important;
  contain:none!important;
  transform-style:preserve-3d!important;
  filter:none!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  mask:none!important;
  -webkit-mask:none!important;
}


/* PRIME MOTION ATMOSPHERE HYDRATION r5.
   Far = the ORIGINAL one-decoder video at Spatial Field's negative Z.
   Middle = one static, sparse CSS caustic/dust plane with restrained parallax.
   Near = the existing inert optical vignette at the panel-facing edge.
   No cloned video, canvases, animated gradients, blur or additional sensors.
   The mid-plane is updated by PrimeSpatialField at <=30Hz, only on changes.
   Glass machines stay nearer and clickable. */
html[data-prime-viewport-motion] body.prime-v2
.prime-viewport-motion-layer[data-prime-background-layer="true"]{
  --prime-motion-atmosphere-x:0px;
  --prime-motion-atmosphere-y:0px;
  --prime-motion-hydration:"video-far + css-mid + vignette-near";
}
html[data-prime-viewport-motion] body.prime-v2
.prime-viewport-motion-layer[data-prime-background-layer="true"]::before{
  content:"";
  position:absolute;
  inset:-4%;
  display:block;
  z-index:1;
  pointer-events:none;
  opacity:.64;
  background:
    radial-gradient(ellipse 31% 38% at 15% 23%,rgba(112,222,245,.105),transparent 76%),
    radial-gradient(ellipse 25% 39% at 84% 68%,rgba(58,181,229,.092),transparent 82%),
    radial-gradient(circle 1px at 19% 64%,rgba(175,250,255,.26) 0 1px,transparent 2px),
    radial-gradient(circle 1px at 75% 24%,rgba(150,234,251,.2) 0 1px,transparent 2px),
    linear-gradient(117deg,transparent 19%,rgba(80,174,213,.032) 43%,transparent 61%);
  background-repeat:no-repeat;
  transform:translate3d(var(--prime-motion-atmosphere-x,0px),var(--prime-motion-atmosphere-y,0px),0);
  backface-visibility:hidden;
  will-change:auto;
}
html[data-prime-viewport-motion] body.prime-v2
.prime-viewport-motion-layer[data-prime-background-layer="true"]::after{
  z-index:2;
}
/* Promote only the active Spatial/visible atmosphere, not a permanent
   full-screen surface on paused, hidden or non-Spatial pages. */
html[data-prime-viewport-motion][data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 .prime-viewport-motion-layer[data-prime-background-layer="true"][data-active="true"]::before{
  will-change:transform;
}
@media(prefers-reduced-motion:reduce){
  html[data-prime-viewport-motion] body.prime-v2
  .prime-viewport-motion-layer[data-prime-background-layer="true"]::before{
    transform:none!important;
    will-change:auto!important;
  }
}
@media(prefers-reduced-transparency:reduce){
  html[data-prime-viewport-motion] body.prime-v2
  .prime-viewport-motion-layer[data-prime-background-layer="true"]::before{
    opacity:.32;
  }
}