/* Prime Creation // CLEAN ROOM MOTION BACKGROUND v2
   One shell video outside Page 04. CSS-native geometry. Zero page-scroll or PrimeLayout coupling. */

html[data-prime-viewport-motion] #main[data-app-shell]{isolation:isolate!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;
}
/* Page 04 owns its gallery-local specialized plane. The shell underlay is never visible there. */
html[data-prime-viewport-motion-page="portfolio"] body.prime-v2 #main[data-app-shell]>.prime-viewport-motion-layer{
  opacity:0!important;
  visibility:hidden!important;
}
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;
}

/* 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"] :is(.page04-spatial-shell,#gallery.page04-world){
  background-color:rgba(2,8,15,.68)!important;
  background-image:none!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}
}


/* Long-form scroll-safe compositing. The video source and decoder stay alive while the
   visible video plane is withheld from Safari during an active native scroll. This avoids
   pause/reload churn while preserving browser-owned page movement and stable geometry. */
html[data-prime-viewport-motion] body.prime-v2 #main[data-app-shell]>.prime-viewport-motion-layer[data-scroll-safe="true"]{
  opacity:0!important;
  visibility:hidden!important;
  transition:none!important;
}
html[data-prime-viewport-motion-scroll-safe="active"] body.prime-v2 #main[data-app-shell]>.app-window[data-prime-motion-active="true"]{
  background:
    radial-gradient(60rem 38rem at 82% 8%,rgba(54,104,124,.07),transparent 64%),
    linear-gradient(145deg,#070c10,#020406 72%)!important;
  background-color:#020406!important;
}