/* PRIME /website-transitions.css */
/* Prime Creation page transitions: overlay-only, transform/opacity for smooth compositing.
   Layer lane: page transition overlay stays below persistent Command Deck chrome. */
html body.prime-v2 #primeSiteTransition.prime-site-transition{position:fixed!important;inset:0!important;z-index:9980!important;display:block!important;width:100%!important;height:100%!important;overflow:hidden!important;pointer-events:none!important;visibility:hidden!important;opacity:0!important;background:transparent!important;transform:translateZ(0);contain:layout paint style;}
html body.prime-v2 #primeSiteTransition.prime-site-transition.is-active{visibility:visible!important;opacity:1!important}
#primeSiteTransition .pst-layer{position:absolute;inset:0;pointer-events:none;will-change:transform,opacity}
#primeSiteTransition .pst-backdrop{background:linear-gradient(135deg,rgba(2,5,9,.28),rgba(7,19,29,.22));opacity:0}
#primeSiteTransition .pst-grid{opacity:0;background-image:linear-gradient(rgba(105,231,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(105,231,255,.10) 1px,transparent 1px);background-size:34px 34px}
#primeSiteTransition .pst-field{opacity:0}
#primeSiteTransition .pst-beam{opacity:0}
#primeSiteTransition .pst-core{opacity:0;background:radial-gradient(circle at 50% 50%,rgba(190,247,255,.5),rgba(77,220,255,.14) 12%,transparent 34%)}
#primeSiteTransition .pst-particles i{position:absolute;left:var(--pst-x,50%);top:100%;width:2px;height:16px;background:rgba(145,237,255,.85);box-shadow:0 0 12px rgba(85,221,255,.55);opacity:0;will-change:transform,opacity}
#primeSiteTransition.is-active .pst-backdrop{animation:pstFade var(--prime-transition-duration,660ms) cubic-bezier(.2,.72,.2,1) both}
#primeSiteTransition.is-active .pst-core{animation:pstCore var(--prime-transition-duration,660ms) ease both}
#primeSiteTransition.effect-scan .pst-beam{top:-4px;height:3px;background:#a1f4ff;box-shadow:0 0 22px rgba(89,225,255,.9)}
#primeSiteTransition.effect-scan.is-active .pst-grid{animation:pstGrid var(--prime-transition-duration,660ms) ease both}
#primeSiteTransition.effect-scan.is-active .pst-beam{animation:pstScan var(--prime-transition-duration,660ms) cubic-bezier(.18,.78,.2,1) both}
#primeSiteTransition.effect-prism .pst-field{inset:-20% -40%;background:linear-gradient(105deg,transparent 28%,rgba(255,72,156,.38) 38%,rgba(169,95,255,.55) 45%,rgba(68,224,255,.72) 52%,rgba(255,226,109,.42) 58%,transparent 70%)}
#primeSiteTransition.effect-prism.is-active .pst-field{animation:pstSweep var(--prime-transition-duration,660ms) cubic-bezier(.2,.82,.2,1) both}
#primeSiteTransition.effect-grid .pst-grid{inset:-30%;transform-origin:50% 100%}
#primeSiteTransition.effect-grid.is-active .pst-grid{animation:pstRush var(--prime-transition-duration,660ms) cubic-bezier(.18,.8,.2,1) both}
#primeSiteTransition.effect-shutter .pst-field{background:linear-gradient(180deg,#07131d 0 49.7%,transparent 49.7% 50.3%,#07131d 50.3%);transform:scaleY(0)}
#primeSiteTransition.effect-shutter.is-active .pst-field{animation:pstShutter var(--prime-transition-duration,660ms) cubic-bezier(.2,.8,.2,1) both}
#primeSiteTransition.effect-warp .pst-field{left:50%;top:50%;right:auto;bottom:auto;width:18vmin;height:18vmin;margin:-9vmin;border:2px solid rgba(138,238,255,.8);border-radius:50%;box-shadow:0 0 0 8vmin rgba(68,220,255,.08),0 0 70px rgba(68,220,255,.35)}
#primeSiteTransition.effect-warp.is-active .pst-field{animation:pstWarp var(--prime-transition-duration,660ms) cubic-bezier(.16,.84,.2,1) both}
#primeSiteTransition.effect-pixel .pst-grid{background-size:28px 28px;background-image:linear-gradient(rgba(100,225,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(181,88,255,.13) 1px,transparent 1px)}
#primeSiteTransition.effect-pixel.is-active .pst-grid{animation:pstPixel var(--prime-transition-duration,660ms) cubic-bezier(.2,.75,.2,1) both}
#primeSiteTransition.effect-circuit .pst-field{background:linear-gradient(90deg,transparent 0 18%,rgba(86,223,255,.3) 18% 18.4%,transparent 18.4% 42%,rgba(176,94,255,.22) 42% 42.4%,transparent 42.4% 72%,rgba(86,223,255,.22) 72% 72.4%,transparent 72.4%)}
#primeSiteTransition.effect-circuit.is-active .pst-field{animation:pstCircuit var(--prime-transition-duration,660ms) ease both}
#primeSiteTransition.is-active .pst-particles i{animation:pstParticle calc(var(--prime-transition-duration,660ms)*.85) ease-out both;animation-delay:calc(var(--pst-i)*12ms)}
@keyframes pstFade{0%,100%{opacity:0}18%,78%{opacity:1}}
@keyframes pstCore{0%,100%{opacity:0;transform:scale(.8)}45%{opacity:.85;transform:scale(1.08)}60%{opacity:.45;transform:scale(1.35)}}
@keyframes pstGrid{0%,100%{opacity:0;transform:translateY(-2%)}28%,70%{opacity:.65}55%{transform:translateY(2%)}}
@keyframes pstScan{0%{opacity:0;transform:translateY(0)}15%{opacity:1}68%{opacity:1;transform:translateY(100vh)}100%{opacity:0;transform:translateY(105vh)}}
@keyframes pstSweep{0%{opacity:0;transform:translate3d(-28%,0,0) skewX(-8deg)}25%{opacity:1}62%{opacity:.9}100%{opacity:0;transform:translate3d(28%,0,0) skewX(8deg)}}
@keyframes pstRush{0%{opacity:0;transform:perspective(700px) rotateX(62deg) scale(1.35) translateY(16%)}35%{opacity:.8}70%{opacity:.55}100%{opacity:0;transform:perspective(700px) rotateX(62deg) scale(2.2) translateY(-6%)}}
@keyframes pstShutter{0%{opacity:0;transform:scaleY(0)}28%{opacity:1;transform:scaleY(1)}62%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(0)}}
@keyframes pstWarp{0%{opacity:0;transform:scale(.25)}28%{opacity:1}58%{opacity:.95;transform:scale(3.2)}100%{opacity:0;transform:scale(5)}}
@keyframes pstPixel{0%{opacity:0;transform:scale(.96)}25%{opacity:.75}58%{opacity:.65;transform:scale(1.03)}100%{opacity:0;transform:scale(1.08)}}
@keyframes pstCircuit{0%{opacity:0;transform:translateX(-10%)}28%{opacity:.9}62%{opacity:.7}100%{opacity:0;transform:translateX(10%)}}
@keyframes pstParticle{0%{opacity:0;transform:translate3d(0,0,0) scaleY(.4)}20%{opacity:.85}100%{opacity:0;transform:translate3d(0,-110vh,0) scaleY(1.3)}}
@media (prefers-reduced-motion:reduce){html body.prime-v2 #primeSiteTransition.prime-site-transition{display:none!important}}

/* 2026-09-15 isolated visual seal: full-width command deck color fill, including the rounded right cap, in initializer and online states. */
html body.prime-v2 > #primeCommandDeck.prime-command-deck{
  background:
    linear-gradient(102deg,
      rgba(84,225,255,.34) 0%,
      rgba(137,218,255,.42) 24%,
      rgba(196,205,235,.54) 50%,
      rgba(181,148,244,.62) 76%,
      rgba(160,116,255,.70) 100%),
    linear-gradient(180deg,rgba(13,24,34,.97),rgba(4,10,16,.94))!important;
}
html body.prime-v2 > #primeCommandDeck.prime-command-deck::before{
  background-color:rgba(156,118,255,.18)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.18),
    inset 0 0 18px rgba(105,233,255,.08),
    inset -64px 0 58px rgba(164,116,255,.30),
    inset -28px 0 36px rgba(105,233,255,.20)!important;
}
@media(max-width:680px){
  html body.prime-v2 > #primeCommandDeck.prime-command-deck::before{
    background-color:rgba(156,118,255,.20)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(0,0,0,.18),
      inset 0 0 18px rgba(105,233,255,.08),
      inset -58px 0 52px rgba(164,116,255,.34),
      inset -24px 0 32px rgba(105,233,255,.22)!important;
  }
}

/* PRIME /prime-viewport-motion.css */
/* 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;
  }
}