/* PRANAV DYNAMIC LIVING VISUAL SYSTEM v2
Version: 2026.09.01-dynamic-living-visual-v2
The approved five images remain art direction; motion is live HTML/Canvas/CSS.
*/
:root.pv2Active{
  --pv2x:0px;--pv2y:0px;--pv2rx:0deg;--pv2ry:0deg;
  --pv2energy:.08;--pv2pulse:0;--pv2hold:0;--pv2both:0;--pv2teardown:0;
}
.pv2Layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;contain:strict}
.pv2Canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.82;mix-blend-mode:screen}
.pv2Lens{position:absolute;width:42vmin;height:42vmin;border-radius:50%;left:calc(var(--pv2px,.5)*100%);top:calc(var(--pv2py,.45)*100%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(174,239,255,calc(.025 + var(--pv2energy)*.04)),rgba(141,77,255,calc(.015 + var(--pv2energy)*.025)) 38%,transparent 72%);filter:blur(12px);transition:opacity .3s ease}
.pv2Scan{position:absolute;inset:-20%;opacity:calc(.08 + var(--pv2energy)*.07);background:repeating-linear-gradient(180deg,transparent 0 8px,rgba(215,255,56,.025) 8px 9px,transparent 9px 17px);transform:translateY(calc(var(--pv2y)*.25));mask-image:radial-gradient(circle at center,#000,transparent 76%)}
.pv2Active .wrap{position:relative;z-index:2}

/* Approved images become live depth surfaces instead of static cards. */
.pv2Active .pvArt{will-change:transform,filter,opacity;transform-style:preserve-3d}
.pv2Active .pvHeroArt{transform:perspective(900px) translate3d(calc(var(--pv2x)*.85),calc(var(--pv2y)*.72),0) rotateX(var(--pv2rx)) rotateY(var(--pv2ry)) scale(calc(1.015 + var(--pv2energy)*.018));filter:drop-shadow(0 0 calc(28px + var(--pv2energy)*35px) rgba(118,69,255,.18))}
.pv2Active .pvExploreArt{transform:translate3d(calc(var(--pv2x)*-.45),calc(var(--pv2y)*-.32),0) scale(calc(1.02 + var(--pv2energy)*.012))}
.pv2Active .pvPlayArt{transform:perspective(900px) translate3d(calc(var(--pv2x)*.30),calc(var(--pv2y)*.24),0) rotateX(calc(var(--pv2rx)*.45)) rotateY(calc(var(--pv2ry)*.55)) scale(calc(1.015 + var(--pv2energy)*.025));filter:saturate(calc(1 + var(--pv2energy)*.18)) contrast(1.04)}
.pv2Active .pvResultArt{transform:translate3d(calc(var(--pv2x)*-.28),calc(var(--pv2y)*-.20),0) scale(calc(1.02 + var(--pv2energy)*.018));transition:transform .22s ease,opacity .55s ease,filter .55s ease,clip-path .55s cubic-bezier(.2,.8,.2,1)}
.pv2Active .pvArt img{transform:scale(1.025);animation:pv2Breathe 8s ease-in-out infinite alternate;will-change:transform,filter}
@keyframes pv2Breathe{0%{transform:scale(1.018) translateY(0);filter:saturate(1.02) contrast(1.03)}100%{transform:scale(1.045) translateY(-1.2%);filter:saturate(1.11) contrast(1.06)}}

/* Landing: the approved orb/void is now a live object. */
.pv2Active #landing h1{transform:perspective(900px) translate3d(calc(var(--pv2x)*-.09),calc(var(--pv2y)*-.07),0);text-shadow:calc(var(--pv2x)*-.12) calc(var(--pv2y)*-.10) 34px rgba(141,77,255,.10)}
.pv2Active #landing:after{transform:translate3d(calc(var(--pv2x)*.20),calc(var(--pv2y)*.16),0);box-shadow:inset 0 0 calc(70px + var(--pv2energy)*45px) rgba(92,47,190,.09),0 0 calc(24px + var(--pv2energy)*35px) rgba(215,255,56,.03)}

/* Explore: 128 nodes are a field, not pinned stickers. */
.pv2Active #explore .worldNode{
  transform:translate(calc(-50% + var(--pv2-dx,0px)),calc(-50% + var(--pv2-dy,0px))) scale(var(--pv2-node-scale,1));
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.pv2Active #explore .worldNode:hover,.pv2Active #explore .worldNode.active{
  transform:translate(calc(-50% + var(--pv2-dx,0px)),calc(-50% + var(--pv2-dy,0px))) scale(calc(var(--pv2-node-scale,1)*1.065));
  box-shadow:0 0 calc(25px + var(--pv2energy)*30px) rgba(126,71,255,.16),inset 0 0 24px rgba(215,255,56,.025)
}
.pv2Active #explore .worldField{background:
  radial-gradient(circle at calc(var(--pv2px,.5)*100%) calc(var(--pv2py,.45)*100%),rgba(174,239,255,.055),transparent 18%),
  radial-gradient(circle at 22% 20%,rgba(125,68,255,.09),transparent 26%),
  radial-gradient(circle at 77% 76%,rgba(215,255,56,.04),transparent 26%),rgba(3,3,8,.56)}

/* Mechanic-native world response. */
.pv2Active[data-pv2-mechanic="hold"] #play{transform:scale(calc(1 - var(--pv2hold)*.006))}
.pv2Active[data-pv2-mechanic="hold"] .pvPlayArt{filter:blur(calc(var(--pv2hold)*.6px)) saturate(calc(1 + var(--pv2hold)*.22));transform:scale(calc(1.02 - var(--pv2hold)*.025))}
.pv2Active[data-pv2-mechanic="hold"] #hold{transform:scale(calc(1 - var(--pv2hold)*.055));box-shadow:0 0 calc(45px + var(--pv2hold)*70px) rgba(141,77,255,.22),inset 0 0 calc(30px + var(--pv2hold)*40px) rgba(215,255,56,.055)}
.pv2Active[data-pv2-mechanic="drag"] #play{background-position:calc(50% + var(--pv2x)) calc(50% + var(--pv2y))}
.pv2Active[data-pv2-mechanic="swipe"] .pvPlayArt{transform:translate3d(calc(var(--pv2x)*.85),calc(var(--pv2y)*.18),0) skewX(calc(var(--pv2energy)*-1.1deg)) scale(1.025)}
.pv2Active[data-pv2-mechanic="both"] #play:before{box-shadow:inset calc(-22px*var(--pv2both)) 0 40px rgba(215,255,56,.035),inset calc(22px*var(--pv2both)) 0 40px rgba(141,77,255,.06)}
.pv2Active[data-pv2-mechanic="rhythm"] .pvPlayArt{filter:saturate(calc(1.02 + var(--pv2pulse)*.36)) brightness(calc(1 + var(--pv2pulse)*.08));transform:scale(calc(1.015 + var(--pv2pulse)*.018))}
.pv2Active[data-pv2-mechanic="wait"] .pvPlayArt{opacity:calc(.13 - min(.07,var(--pv2energy)*.04));filter:saturate(.88)}
.pv2Active[data-pv2-mechanic="flip"] .pvPlayArt{transform:perspective(850px) rotateY(calc(var(--pv2pulse)*2.2deg)) scale(1.02)}
.pv2Active[data-pv2-mechanic="throw"] .pvPlayArt{transform:translate3d(calc(var(--pv2x)*.8),calc(var(--pv2y)*.55),0) rotateZ(calc(var(--pv2pulse)*.4deg)) scale(1.02)}

/* Result states assemble / decay instead of simply appearing. */
.pv2Active #result[data-pv-result="comic"] .pvResultArt{clip-path:polygon(0 0,100% 0,96% 28%,100% 31%,97% 63%,100% 66%,100% 100%,0 100%,4% 72%,0 69%,3% 38%,0 35%);animation:pv2PanelAssemble .72s cubic-bezier(.2,.8,.2,1) both}
@keyframes pv2PanelAssemble{from{opacity:.04;transform:translate3d(32px,18px,0) scale(.96);clip-path:polygon(12% 0,100% 8%,92% 44%,100% 48%,86% 100%,8% 92%)}to{opacity:.25}}
.pv2Active #result[data-pv-result="nothing"] .pvResultArt{opacity:.14!important;filter:grayscale(.45) blur(.35px) saturate(.65);transform:translate3d(calc(var(--pv2x)*-.15),calc(18px + var(--pv2y)*-.10),0) scale(.985)}
.pv2Active #result[data-pv-result="nothing"] .humanResultWhy,.pv2Active #result[data-pv-result="nothing"] .rtext{animation:pv2Quiet .9s ease both}
@keyframes pv2Quiet{from{opacity:.25;filter:blur(1px)}to{opacity:1;filter:none}}

/* C128 dismantles the visual system itself. */
.pv2Active.pv2C128 .pv2Layer{opacity:calc(1 - var(--pv2teardown)*.92);filter:blur(calc(var(--pv2teardown)*3px));transform:scale(calc(1 + var(--pv2teardown)*.035))}
.pv2Active.pv2C128 #play{transform:translate3d(calc(var(--pv2x)*var(--pv2teardown)*2),calc(var(--pv2y)*var(--pv2teardown)*2),0) rotate(calc(var(--pv2teardown)*-.45deg));border-color:rgba(215,255,56,calc(.08 - var(--pv2teardown)*.07))}
.pv2Active.pv2C128 .pvPlayArt{opacity:calc(.13 - var(--pv2teardown)*.12);filter:blur(calc(var(--pv2teardown)*2px)) grayscale(var(--pv2teardown));transform:translate3d(calc(var(--pv2x)*3),calc(var(--pv2y)*3),0) scale(calc(1 + var(--pv2teardown)*.09))}
.pv2Active.pv2C128 #exitLogo{filter:blur(calc(var(--pv2teardown)*.7px));text-shadow:calc(var(--pv2teardown)*8px) calc(var(--pv2teardown)*-5px) 14px rgba(215,255,56,.16)}

/* Low-power and user-directed reduced motion remain fully usable. */
@media(max-width:700px){
  .pv2Canvas{opacity:.68}.pv2Lens{width:54vmin;height:54vmin}
  .pv2Active .pvHeroArt{transform:translate3d(calc(var(--pv2x)*.35),calc(var(--pv2y)*.24),0) scale(calc(1.01 + var(--pv2energy)*.01))}
}
@media(prefers-reduced-motion:reduce){
  .pv2Active .pvArt img{animation:none!important;transform:scale(1.02)}
  .pv2Active .pvArt,.pv2Active #landing h1,.pv2Active #landing:after{transition:none!important}
  .pv2Scan{display:none}.pv2Lens{opacity:.35}
}
.forceReduce .pv2Active .pvArt img,.forceReduce.pv2Active .pvArt img{animation:none!important}
.forceReduce .pv2Scan{display:none}