/* Prime Creation // event-driven kinetic backgrounds // 2026-08-23 */
:root{
  --prime-kinetic-x:0px;
  --prime-kinetic-y:0px;
  --prime-kinetic-intensity:1;
  --prime-kinetic-depth-scale:1.035;
  --prime-kinetic-layer-shift:4px;
  --prime-kinetic-accent:104,226,255;
}
:root[data-prime-stereo-depth="soft"]{--prime-kinetic-depth-scale:1.018;--prime-kinetic-layer-shift:2px;--prime-kinetic-intensity:.62}
:root[data-prime-stereo-depth="deep"]{--prime-kinetic-depth-scale:1.06;--prime-kinetic-layer-shift:9px;--prime-kinetic-intensity:1.24}
:root[data-prime-kinetic-response="prism"]{--prime-kinetic-accent:194,133,255}
:root[data-prime-kinetic-response="signal"]{--prime-kinetic-accent:89,255,160}
:root[data-prime-kinetic-response="wave"]{--prime-kinetic-accent:73,165,255}
:root[data-prime-kinetic-response="shutter"]{--prime-kinetic-accent:255,184,91}
:root[data-prime-kinetic-response="page"]{--prime-kinetic-accent:246,228,168}
:root[data-prime-kinetic-response="collision"]{--prime-kinetic-accent:255,82,132}
:root[data-prime-kinetic-response="gears"]{--prime-kinetic-accent:143,159,255}
:root[data-prime-kinetic-response="network"]{--prime-kinetic-accent:78,255,208}
:root[data-prime-kinetic-response="spark"]{--prime-kinetic-accent:255,207,72}

body.prime-v2 .ambient{
  position:fixed;
  inset:-1.5rem;
  overflow:hidden;
  pointer-events:none!important;
  transform:translate3d(var(--prime-kinetic-x),var(--prime-kinetic-y),0) scale(var(--prime-kinetic-depth-scale));
  transform-origin:50% 50%;
  will-change:transform;
  contain:paint;
  transition:opacity .24s ease,transform .18s cubic-bezier(.2,.72,.22,1),filter .3s ease;
}
body.prime-v2 .ambient::before,
body.prime-v2 .ambient::after{
  position:absolute;
  inset:-8%;
  display:block;
  pointer-events:none;
  opacity:calc(.14 * var(--prime-kinetic-intensity));
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.72,.22,1),background .32s ease;
}
body.prime-v2 .ambient::before{
  content:"";
  background:
    radial-gradient(circle at 22% 28%,rgba(var(--prime-kinetic-accent),.42),transparent 18%),
    radial-gradient(circle at 76% 68%,rgba(128,94,255,.26),transparent 22%),
    repeating-radial-gradient(circle at 50% 50%,rgba(118,229,255,.08) 0 1px,transparent 1px 42px);
  transform:translate3d(calc(var(--prime-kinetic-x) * -.32),calc(var(--prime-kinetic-y) * -.32),0) rotate(-2deg);
  animation:prime-kinetic-ambient 18s ease-in-out infinite alternate;
}
body.prime-v2 .ambient::after{
  content:"PRIME  •  CREATION  •  IMAGINE  •  BUILD  •  MOVE  •  ";
  inset:auto -10% 13%;
  overflow:hidden;
  color:rgba(var(--prime-kinetic-accent),.28);
  font:900 clamp(2rem,7vw,7rem)/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.16em;
  white-space:nowrap;
  opacity:0;
  transform:translate3d(calc(var(--prime-kinetic-layer-shift) * -1),var(--prime-kinetic-layer-shift),0);
}
html[data-prime-kinetic-context="tools-open"] body.prime-v2 .ambient{filter:saturate(1.08) contrast(1.03)}
html[data-prime-kinetic-context="tools-open"] body.prime-v2 .ambient::before{opacity:calc(.24 * var(--prime-kinetic-intensity));transform:translate3d(calc(var(--prime-kinetic-x) * -.48),calc(var(--prime-kinetic-y) * -.48),0) rotate(-3deg) scale(1.035)}
html[data-prime-kinetic-context="tools-open"] body.prime-v2 .ambient::after{opacity:calc(.085 * var(--prime-kinetic-intensity));animation:prime-kinetic-type 22s linear infinite}
html[data-pc-spatial-style="stereo"] body.prime-v2 .ambient::before{filter:drop-shadow(calc(var(--prime-kinetic-layer-shift) * -1) 0 rgba(255,55,104,.17)) drop-shadow(var(--prime-kinetic-layer-shift) 0 rgba(43,224,255,.19))}
html[data-pc-spatial-style="depth"] body.prime-v2 .ambient::before{transform:translate3d(calc(var(--prime-kinetic-x) * -.55),calc(var(--prime-kinetic-y) * -.55),var(--prime-kinetic-layer-shift)) scale(1.05)}
html[data-pc-spatial-style="lenticular"] body.prime-v2 .ambient::before{animation-timing-function:steps(12,end)}
html[data-pc-spatial-style="parallax"] body.prime-v2 .ambient::before{transform:translate3d(calc(var(--prime-kinetic-x) * -.72),calc(var(--prime-kinetic-y) * -.72),0) scale(1.04)}
html[data-prime-kinetic-impact] body.prime-v2 .ambient::before{animation:prime-kinetic-event .64s cubic-bezier(.18,.8,.2,1)}

html[data-prime-kinetic-mode="soft"] body.prime-v2 .ambient{transform:none;will-change:auto}
html[data-prime-kinetic-mode="soft"] body.prime-v2 .ambient::before{animation-duration:30s;opacity:calc(.09 * var(--prime-kinetic-intensity))}
html[data-prime-kinetic-mode="soft"] body.prime-v2 .ambient::after{display:none}
html[data-prime-kinetic="suspended"] body.prime-v2 .ambient{will-change:auto;transform:none!important}
html[data-prime-kinetic="suspended"] body.prime-v2 .ambient::before,html[data-prime-kinetic="suspended"] body.prime-v2 .ambient::after{animation:none!important;transform:none!important}
html[data-prime-resource-tier="low"] body.prime-v2 .ambient{filter:none!important;transform:none!important;will-change:auto!important}
html[data-prime-resource-tier="low"] body.prime-v2 .ambient::before,html[data-prime-resource-tier="low"] body.prime-v2 .ambient::after{display:none!important}
html[data-prime-resource-tier="low"] body.prime-v2 :is(.stars,.music-orbit,.service-orb){animation:none!important}
@keyframes prime-kinetic-ambient{0%{transform:translate3d(-1.2%,-.8%,0) rotate(-2deg) scale(1)}100%{transform:translate3d(1.2%,.8%,0) rotate(2deg) scale(1.035)}}
@keyframes prime-kinetic-type{from{transform:translate3d(2%,var(--prime-kinetic-layer-shift),0)}to{transform:translate3d(-28%,calc(var(--prime-kinetic-layer-shift) * -1),0)}}
@keyframes prime-kinetic-event{0%,100%{opacity:calc(.2 * var(--prime-kinetic-intensity));filter:brightness(1)}38%{opacity:calc(.42 * var(--prime-kinetic-intensity));filter:brightness(1.28);transform:scale(1.045)}}
@media(max-width:720px){body.prime-v2 .ambient::before{opacity:calc(.1 * var(--prime-kinetic-intensity));animation-duration:25s}body.prime-v2 .ambient::after{font-size:2.35rem}}
@media(prefers-reduced-motion:reduce){body.prime-v2 .ambient,body.prime-v2 .ambient::before,body.prime-v2 .ambient::after{animation:none!important;transform:none!important;will-change:auto!important;transition:none!important}body.prime-v2 .ambient::after{display:none!important}}
