/* PRANAV V2.1 CINEMATIC ART DIRECTION
Version: 2026.09.01-cinematic-art-direction-v2.1
Approved art is decomposed into moving texture; live HTML remains the only readable interface.
*/
:root.pv21Active{
  --pv21x:.5;--pv21y:.42;--pv21dx:0;--pv21dy:0;--pv21-hit:0;--pv21-teardown:0;
}
.pv21Atmosphere{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;contain:strict}
.pv21Halo{position:absolute;width:72vmin;height:72vmin;left:calc(var(--pv21x)*100%);top:calc(var(--pv21y)*100%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(142,74,255,calc(.055 + var(--pv21-hit)*.025)),rgba(215,255,56,.016) 34%,transparent 69%);filter:blur(18px);mix-blend-mode:screen}
.pv21Sweep{position:absolute;inset:-30%;background:linear-gradient(112deg,transparent 39%,rgba(174,239,255,.028) 48%,rgba(215,255,56,.018) 50%,transparent 57%);transform:translateX(calc(var(--pv21dx)*10%)) rotate(-2deg);mix-blend-mode:screen;animation:pv21Sweep 12s ease-in-out infinite alternate}
.pv21Aperture{position:absolute;inset:0;background:radial-gradient(ellipse at calc(var(--pv21x)*100%) calc(var(--pv21y)*100%),transparent 0 31%,rgba(0,0,0,.08) 57%,rgba(0,0,0,.48) 100%);opacity:.72}
@keyframes pv21Sweep{from{translate:-4% 0}to{translate:4% 0}}

/* Original screenshots stop being readable duplicate UI. */
.pv21Active .pvArt{isolation:isolate;overflow:hidden}
.pv21Active .pvArt>img{transition:opacity .5s ease,filter .5s ease,transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform,filter}
.pv21Active .pvHeroArt>img{opacity:.20!important;filter:blur(.45px) saturate(1.25) contrast(1.12)!important;transform:scale(1.11) translate(calc(var(--pv21dx)*-8px),calc(var(--pv21dy)*-7px))!important;mask-image:radial-gradient(ellipse at 50% 38%,#000 0 28%,rgba(0,0,0,.66) 49%,transparent 79%)}
.pv21Active .pvExploreArt>img{opacity:.035!important;filter:blur(2.2px) grayscale(.35) saturate(.65) contrast(1.15)!important;transform:scale(1.16) translate(calc(var(--pv21dx)*10px),calc(var(--pv21dy)*7px))!important;mask-image:linear-gradient(100deg,transparent 2%,rgba(0,0,0,.35) 34%,#000 58%,transparent 96%)}
.pv21Active .pvPlayArt>img{opacity:.075!important;filter:blur(1.1px) saturate(.72) contrast(1.2)!important;transform:scale(1.18) translate(calc(var(--pv21dx)*-10px),calc(var(--pv21dy)*-8px))!important;mask-image:radial-gradient(circle,#000 8%,rgba(0,0,0,.45) 39%,transparent 74%)}
.pv21Active .pvResultArt>img{opacity:.045!important;filter:blur(2px) grayscale(.28) saturate(.60) contrast(1.16)!important;transform:scale(1.14) translate(calc(var(--pv21dx)*8px),calc(var(--pv21dy)*6px))!important;mask-image:linear-gradient(95deg,transparent 0%,rgba(0,0,0,.28) 32%,#000 63%,transparent 100%)}

/* Four independently moving crops turn each approved image into texture, not screenshot. */
.pv21Fragments{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.pv21Fragments i{position:absolute;inset:-12%;background-repeat:no-repeat;background-size:175% auto;opacity:.08;filter:blur(1.2px) saturate(1.25) contrast(1.22);transform-origin:center;will-change:transform,opacity}
.pv21Fragments i:nth-child(1){clip-path:polygon(0 8%,70% 0,43% 33%,0 48%);background-position:18% 18%;transform:translate(calc(var(--pv21dx)*-22px),calc(var(--pv21dy)*-15px)) rotate(-1.2deg)}
.pv21Fragments i:nth-child(2){clip-path:polygon(28% 18%,100% 4%,100% 43%,54% 54%);background-position:82% 28%;transform:translate(calc(var(--pv21dx)*18px),calc(var(--pv21dy)*-10px)) rotate(.8deg)}
.pv21Fragments i:nth-child(3){clip-path:polygon(0 48%,47% 36%,76% 100%,0 93%);background-position:22% 76%;transform:translate(calc(var(--pv21dx)*-12px),calc(var(--pv21dy)*17px)) rotate(.55deg)}
.pv21Fragments i:nth-child(4){clip-path:polygon(48% 51%,100% 40%,100% 100%,67% 91%);background-position:78% 78%;transform:translate(calc(var(--pv21dx)*20px),calc(var(--pv21dy)*15px)) rotate(-.7deg)}
.pv21Fragments[data-scene="landing"] i{opacity:.13;filter:blur(.65px) saturate(1.4) contrast(1.25)}
.pv21Fragments[data-scene="explore"] i{opacity:.052;filter:blur(2.5px) grayscale(.2) saturate(.78)}
.pv21Fragments[data-scene="result"] i{opacity:.06;filter:blur(2.4px) grayscale(.15) saturate(.72)}

/* Landing is a scene, not a poster. */
.pv21Active #landing{position:relative;overflow-x:clip}
.pv21Active #landing h1{position:relative;z-index:4;text-shadow:0 12px 70px rgba(124,67,255,.11)}
.pv21Active #landing .sub,.pv21Active #landing .terms,.pv21Active #landing .context,.pv21Active #landing .actions,.pv21Active #landing .signature{position:relative;z-index:5}
.pv21Active #landing:before{content:"";position:absolute;left:0;right:0;top:18%;height:1px;background:linear-gradient(90deg,transparent,rgba(174,239,255,.18),rgba(215,255,56,.12),transparent);transform:translateX(calc(var(--pv21dx)*8px));box-shadow:0 0 32px rgba(174,239,255,.12)}

/* Explore: live nodes dominate; approved screen becomes atmospheric memory. */
.pv21Active #explore .worldField{perspective:900px;box-shadow:inset 0 0 90px rgba(69,31,124,.10),0 28px 100px rgba(0,0,0,.25)}
.pv21Active #explore .worldNode{z-index:3;background:linear-gradient(145deg,rgba(8,7,14,.72),rgba(3,3,6,.54));border:1px solid rgba(255,255,255,.045);border-radius:13px;backdrop-filter:blur(4px)}
.pv21Active #explore .worldNode:hover,.pv21Active #explore .worldNode.active{z-index:9;background:linear-gradient(145deg,rgba(15,12,24,.88),rgba(4,4,8,.78));box-shadow:0 20px 50px rgba(0,0,0,.25),0 0 32px color-mix(in srgb,var(--node) 15%,transparent)}

/* Mechanic consequences: stronger but still readable. */
:root.pv21Active body[data-pv21-mechanic="hold"] .pv21Aperture{background:radial-gradient(circle at 50% 52%,transparent 0 19%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.58) 100%)}
:root.pv21Active body[data-pv21-mechanic="drag"] .pv21Fragments i:nth-child(odd){transform:translate(calc(var(--pv21dx)*42px),calc(var(--pv21dy)*32px)) skewX(calc(var(--pv21dx)*3deg))}
:root.pv21Active body[data-pv21-mechanic="swipe"] .pv21Sweep{opacity:.9;transform:translateX(calc(var(--pv21dx)*22%)) skewX(-9deg)}
:root.pv21Active body[data-pv21-mechanic="both"] .pv21Aperture{background:linear-gradient(90deg,rgba(141,77,255,.045),transparent 43% 57%,rgba(215,255,56,.035))}
:root.pv21Active body[data-pv21-mechanic="rhythm"] .pv21Halo{transform:translate(-50%,-50%) scale(calc(1 + var(--pv2pulse)*.10))}
:root.pv21Active body[data-pv21-mechanic="wait"] .pv21Sweep{opacity:.12;animation-duration:25s}:root.pv21Active body[data-pv21-mechanic="wait"] .pv21Fragments i{opacity:.018}
:root.pv21Active body[data-pv21-mechanic="flip"] .pv21Fragments i:nth-child(1),:root.pv21Active body[data-pv21-mechanic="flip"] .pv21Fragments i:nth-child(4){transform:perspective(800px) rotateY(calc(var(--pv2pulse)*5deg)) translateX(calc(var(--pv21dx)*14px))}
:root.pv21Active body[data-pv21-mechanic="throw"] .pv21Fragments i{transition:transform .16s ease-out}

/* Nothing should recede, not display a second readable result screen. */
:root.pv21Active #result[data-pv-result="nothing"] .pvResultArt>img,:root.pv21Active body[data-pv21-result="nothing"] .pvResultArt>img{opacity:.018!important;filter:blur(3.3px) grayscale(.7) saturate(.35)!important;transition:none!important}
:root.pv21Active #result[data-pv-result="nothing"] .pv21Fragments i,:root.pv21Active body[data-pv21-result="nothing"] .pv21Fragments i{opacity:.018;filter:blur(4px) grayscale(.7)}
:root.pv21Active body[data-pv21-result="nothing"] .pv21Halo{opacity:.28}
:root.pv21Active body[data-pv21-result="nothing"] #result{filter:saturate(.92)}

/* C128: one PRANAV only. The backdrop disappears and the presentation layer breaks outward. */
.pv21ExitShards{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible;opacity:0}
.pv21ExitShards i{position:absolute;left:50%;top:50%;width:22vmin;height:2px;background:linear-gradient(90deg,transparent,rgba(215,255,56,.22),rgba(141,77,255,.16),transparent);transform-origin:left center;opacity:calc(var(--pv21-teardown)*.7)}
.pv21ExitShards i:nth-child(1){--a:0deg}.pv21ExitShards i:nth-child(2){--a:30deg}.pv21ExitShards i:nth-child(3){--a:60deg}.pv21ExitShards i:nth-child(4){--a:90deg}.pv21ExitShards i:nth-child(5){--a:120deg}.pv21ExitShards i:nth-child(6){--a:150deg}.pv21ExitShards i:nth-child(7){--a:180deg}.pv21ExitShards i:nth-child(8){--a:210deg}.pv21ExitShards i:nth-child(9){--a:240deg}.pv21ExitShards i:nth-child(10){--a:270deg}.pv21ExitShards i:nth-child(11){--a:300deg}.pv21ExitShards i:nth-child(12){--a:330deg}
:root.pv21Active body.pv2C128 .pvPlayArt>img,:root.pv21Active body.pv21C128 .pvPlayArt>img{opacity:.012!important;filter:blur(4px) grayscale(.9)!important;transition:none!important}
:root.pv21Active body.pv2C128 .pvPlayArt .pv21Fragments i,:root.pv21Active body.pv21C128 .pvPlayArt .pv21Fragments i{opacity:.012}
:root.pv21Active body.pv2C128 .pv21ExitShards,:root.pv21Active body.pv21C128 .pv21ExitShards{opacity:1}
:root.pv21Active body.pv2C128 .pv21ExitShards i,:root.pv21Active body.pv21C128 .pv21ExitShards i{transform:rotate(var(--a)) translateX(calc(var(--pv21-teardown)*28vmin)) scaleX(calc(.45 + var(--pv21-teardown)*1.4))}
:root.pv21Active body.pv2C128 #exitLogo,:root.pv21Active body.pv21C128 #exitLogo{position:relative;z-index:8;box-shadow:0 0 calc(20px + var(--pv21-teardown)*80px) rgba(141,77,255,.10);transform:translate(calc(var(--pv21dx)*8px),calc(var(--pv21dy)*6px)) scale(calc(1 - var(--pv21-teardown)*.08))}
:root.pv21Active body.pv2C128 #play:after,:root.pv21Active body.pv21C128 #play:after{content:"";position:absolute;inset:5%;border:1px solid rgba(241,231,211,calc(.08 - var(--pv21-teardown)*.06));transform:scale(calc(1 + var(--pv21-teardown)*.10)) rotate(calc(var(--pv21-teardown)*.6deg));pointer-events:none}

.pv21NoEscapedNewlinePseudo::before,.pv21NoEscapedNewlinePseudo::after{content:none!important}

/* Composition cleanup */
.pv21Active .footer{position:relative;z-index:4}
:root.pv21Active body[data-pv21-view="play"] .footer,:root.pv21Active body[data-pv21-view="result"] .footer{opacity:.38}
@media(max-width:700px){
  .pv21Active .wrap{padding-bottom:38px}
  .pv21Active #landing{min-height:auto;padding-top:22px;padding-bottom:24px}
  .pv21Active #landing .pvHeroArt{max-height:34vh;opacity:.86}
  .pv21Active #landing .pvHeroArt>img{opacity:.17!important;transform:scale(1.17)!important}
  .pv21Active #landing .context{margin-top:22px}
  .pv21Active #landing .actions{margin-top:24px}
  .pv21Active .pv21Aperture{background:radial-gradient(ellipse at calc(var(--pv21x)*100%) calc(var(--pv21y)*100%),transparent 0 34%,rgba(0,0,0,.12) 62%,rgba(0,0,0,.43) 100%)}
  .pv21Fragments i{background-size:220% auto}
  :root.pv21Active body[data-pv21-view="play"] .wrap{padding-bottom:18px}
}
@media(prefers-reduced-motion:reduce){
  .pv21Sweep{animation:none!important;opacity:.18}
  .pv21Fragments i,.pv21Active .pvArt>img,.pv21Active #exitLogo{transition:none!important;transform:none!important}
  .pv21Halo{filter:blur(22px)}
}