/*---------------------------------ITEMS IN SITE----------------------------------*/
/*---------------------------------ITEMS IN SITE----------------------------------*/
/*---------------------------------ITEMS IN SITE----------------------------------*/


/*---------------------GEN--------------------------*/

.obBG{
    pointer-events:none;
}

.itemInd{
   font-family: 'helv_bold';
    font-size: 0.8vw;
    color: #7b797a;
    position: absolute;
    width: fit-content;
    height: fit-content;
    animation: glow1 1200ms ease-out infinite;
}


/*---------------------BB--------------------------*/

.obCon-bb{
   position: relative;
    width: 20vw;
    height: auto;
    margin: 0 auto;
}


.obCon-bb .itemInd{
   top: -15px;
   left: -0px;
   right: 0;
   margin: auto;
    animation: float1 3000ms 200ms ease-out infinite;
}

.obCon-bb .obBG{
   position:absolute;
   width:60%;
   height:140%;
   background-color:#f65240;
   border-radius: 50%;
   filter: blur(25px);
   opacity:0;
   top:-20%;
   left:-20%;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
   transform: scale(0.33);
   transition:1000ms;
   /*    animation: orbFlicker 2000ms ease-out infinite;*/
}

.bbBlade_wrpr{
   transition:200ms;
}

#bbBlade-h{
    filter: blur(0.33px);
    opacity: 0.88;
    animation: float1 3000ms ease-out infinite;
    transition: 300ms;
}

.obCon-bb:hover .obBG{
   opacity: 1;
   transform: scale(1);
}


.obCon-bb:hover .bbBlade_wrpr{
   transform: rotate(6deg) scale(1.2) translateY(-10px);
}

.obCon-bb:hover #bbBlade-h{
    filter: blur(0px);
    opacity: 1;
    animation: float1 3000ms ease-out;
   cursor: url(/images/globals/cursors/HoG-pixeled-flipped-01.png) 100 120, auto;
}




/*---------------------RING--------------------------*/

.obCon-ring{
   position: absolute;
    width: 32%;
    height: auto;
    top: -3%;
    bottom: 0;
    left: 14%;
    right: 0;
    margin: auto;
    opacity: 0;
    aspect-ratio: 1/1;
}

.obCon-ring .itemInd{
   top: 0;
   left: -5px;
   right: 0;
   margin: auto;
}

.obCon-ring .obBG{
   position:absolute;
   width:100%;
   height:100%;
   background-color:#fff;
   opacity: 0.33;
   border-radius: 50%;
    filter: blur(25px);
    opacity:0.8;
    transform:scale(10.0);
    pointer-events:none;
/* animation: orbFlicker 100ms ease-out infinite;*/
}

.ringIMG_wrpr{
   position: absolute;
    width: 33%;
    height: fit-content;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0.6;
    filter: blur(0.66px);
    transition: 300ms;
}

.ringIMG_wrpr:hover{
   opacity: 0.8;
   filter: blur(0.22px);
   transform: rotate(12deg) scale(1.6);
}


#puppetRing01{
   position:relative;
   width:100%;
   height: auto;
   animation: float1 3000ms ease-out infinite;

}

.obCon:hover #puppetRing01{
   cursor: url(/images/globals/cursors/HoG-pixeled-01.png) -80 -120, auto;
}

.downCursor{
   cursor: url(/images/globals/cursors/HoG-pixeled-down-01.png) -80 -120, auto;
}





/*---------------------------------INVENTORY----------------------------------*/

.inventoryMain{
   position:fixed;
   width:30vw;
   min-width: 360px;
   height:100%;
   padding: 0 var(--padVal) 0 0;
   right: 0;
   border-left: var(--uniLine);
   z-index: 10004;
   backdrop-filter: blur(5px);
   overflow:hidden;
   transform:translateX(100%);
/* box-shadow: 0px 0px 10px 5px  rgba(0, 0, 0, 0.1);*/
}

.inventoryCon{
   position:relative;
   width:100%;
   height:100%;
   padding: 5vw 0 0 0;
   display:flex;
   flex-direction:column;
   z-index: 2;
}

.itemBlock{
   position:relative;
   height: 15vw;
   padding: 0 var(--uniPadding) 0 0;
   display:grid;
   grid-template-columns: 1fr 1fr;
   border-bottom: var(--uniLine);
   cursor: pointer;
}

.invItemCol{
   position:relative;
   display:flex;
   flex-direction:column;
   justify-content: center;
}

#itemBlock-01 .itemBG{
   position:absolute;
   width:55%;
   height:auto;
   aspect-ratio: 1/1;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
   border-radius: 50%;
   filter: blur(15px);
   background-color:#b4fc75;
   background-color:#f65240;
   opacity: 0.88;
   transition: 330ms 100ms;
}

.invItem_wrpr{
   position:relative;
   transition:330ms;
}

.invItemIMG{
   position:relative;
   width:100%;
   height:auto;
}

#invItem_wrpr-bbBlade{
   width: 100%;
    aspect-ratio: 2 / 1;
    margin: 20% 0 0 0;
    z-index: 2;
}

#bbBlade-inv{
    opacity: 0;
}

.invItemTitle{
   font-size: 1.22rem;
    line-height: 1em;
    margin: 0 0 10px 0;
    position:relative;
   transition:330ms;
}

.invItemSubtTitle{
   transition:330ms 50ms;
}

.investigateText{
   font-family: 'helv_bold_it';
   margin: 10px 0 0 0;
   transition:330ms 100ms;
}

.itemBlock:hover #invItem_wrpr-bbBlade{
   transform: translate(-8%, 20%) scale(1.66) rotate(29deg);
}

.itemBlock:hover .itemBG{
   opacity: 1 !important;
   transform: scale(1.88);
}

.itemBlock:hover .invItemTitle,
.itemBlock:hover .invItemSubtTitle,
.itemBlock:hover .investigateText{
   transform: translateX(10px);
}


.emptyInvCon{
   position:absolute;
   width:fit-content;
   height:fit-content;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
}

.invCloseCon{
   position:absolute;
   width:fit-content;
   height:fit-content;
   top:0;
   bottom:0;
   left:0;
   margin:auto;
   border-top: var(--uniLine);
   border-right: var(--uniLine);
   border-bottom: var(--uniLine);
}

.invCloseCon .closeText{
   font-size:1.33rem;
   line-height: 1em;
   padding: var(--padVal);
   writing-mode: sideways-lr;
}

.invInstructCon{
   position:absolute;
   width:100%;
   left:0;
   right:0;
   display:flex;
   flex-direction:column;
   margin:auto;
   overflow: hidden;
}

.invInstructCon01{
   height:fit-content;
   top:0;
   padding: var(--uniPadding) 7vw var(--padVal) var(--padVal);
   border-bottom: var(--uniLine);
   z-index: 0;
}


.invInstructCon02{
   height:fit-content;
   bottom:0;
   padding: var(--padVal) var(--uniPadding) var(--uniPadding) var(--padVal);
   border-top: var(--uniLine);
   z-index: 2;
}



/*---------------------------------INVENTORY----------------------------------*/






/*---------------------------------------------ITEMS-----------------------------------------*/
/*---------------------------------------------ITEMS-----------------------------------------*/
/*---------------------------------------------ITEMS-----------------------------------------*/



/*---------------------------GEN----------------------------------*/


.itemModal{
   position:fixed;
   width:100vw;
   height: 100vh;
   top: 0;
   backdrop-filter: blur(10px);
   opacity: 0;
   z-index: -100;
}

.itemBG{
   position:absolute;
   width:100%;
   height:100%;
}

.cornerCon{
   position:absolute;
   width:calc(100vw - 60px);
   height:calc(100vh - 60px);
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
}

.crnr_wrpr{
   position:absolute;
   width:22vw;
   height: auto;
   max-height: 50vh;
}

.crnrIMG{
   position:relative;
   width:100%;
   height:auto;
}

#crnr_wrpr-TL{
   top:0;
   left:0;
}

#crnr_wrpr-TR{
   top:0;
   right:0;
}

#crnrIMG-TR{
   transform: rotateY(180deg);
}

#crnr_wrpr-BL{
   bottom:0;
   left:0;
}

#crnrIMG-BL{
   transform: rotateX(180deg);
   
}

#crnr_wrpr-BR{
   bottom:0;
   right:0;
}

#crnrIMG-BR{
   transform: rotate(180deg);
}

.asciIMGCon{
   position: absolute;
    width: fit-content;
    height: auto;
    top: -5%;
    left: -5%;
    aspect-ratio: 2143 / 1310;
}

.asciLetters{
   font-size: 0.66vw;
    line-height: 0.8em;
    white-space:pre;
    /* text-align: justify; */
    letter-spacing: -0.25em;
}

.itemDesBlock{
   position:absolute;
   width:50vw;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
   padding: calc(var(--padVal) + 30px) 0;
   display:flex;
   flex-direction:column;
   justify-content: space-between;
}

.itemDes{
   column-count: 4;
   column-gap: 20px;
    color: var(--lsBlack01-perm);
}

.ic1{
   text-align: center;
}

.ohLookCopy{
   font-size: 3vw;
    color: var(--lsBlack01-perm);
    text-align: center;
    margin: 0 0 20px 0;
}

.itemTitle{
   font-size:4vw;
   line-height: 0.99em;
   color: var(--lsBlack01-perm);
}

.itemSubTitle{
   font-size:1.33vw;
   margin: 20px 0;
   color: var(--lsBlack01-perm);
}

.hmmText{
   font-family:'helv_bold_it';
   font-size:0.8em;
   color: var(--lsBlack01-perm);
}



/*---------------------------------BB_BLADE-----------------------------*/
/*---------------------------------BB_BLADE-----------------------------*/
/*---------------------------------BB_BLADE-----------------------------*/

:root{

   --bbColor01: var(--lsGold01);
   --glC_bb:var(--lsBlack01);

   --bbBG01: #f65240;


}

#bbBladeModal .itemBG{
   background-color:#f96858;
   background-color:var(--bbBG01);
   opacity: 0.98;
}


#bbLetters{
    color: var(--lsGold01);
}

.bbGlitch{
   animation: letterFlip-bb 6000ms steps(4, end) infinite;
}

@keyframes letterFlip-bb{
   0%{text-shadow:1px 0 0 var(--glC_bb),0 1px 0 var(--glC_bb),-0px 0 0 var(--glC_bb),0 -1px 0 var(--glC_bb);}
   25%{text-shadow:6px 0 0 var(--glC_bb),0 4px 0 var(--glC_bb),-0px 0 0 var(--glC_bb),0 -1px 0 var(--glC_bb);}
   50%{text-shadow:2px 0 0 var(--glC_bb),0 0px 0 var(--glC_bb),-1px 0 0 var(--glC_bb),0 -5px 0 var(--glC_bb);}
   75%{text-shadow:3px 0 0 var(--glC_bb),0 3px 0 var(--glC_bb),-0px 0 0 var(--glC_bb),0 -0px 0 var(--glC_bb);}
   100%{text-shadow:0px 0 0 var(--glC_bb),0 1px 0 var(--glC_bb),-3px 0 0 var(--glC_bb),0 -5px 0 var(--glC_bb);}
}  

.bukoPoemCon{
   position:absolute;
   width:fit-content;
   height:fit-content;
   top: 0;
   bottom:0vw;
   left:0vw;
   right: 0;
   margin:auto;
}

.bukoPoemText{
   position:relative;
   font-size:2vw;
   line-height: 1.33em;
   text-align: center;
/*   background-color:#f968587a;*/
}

.itemCon{
   position:relative;
   width:100%;
   height:100%;
   padding: 5vw;
   display:flex;
   justify-content:flex-end;
   align-items:center;
   perspective: 1000px;
}

.bbBladeCon .itemDes{
   background-color:#f968587a;
}

.bbBladeCon .itemCopyCon{
   position:relative;
   width:fit-content;
   margin: -1vw 7vw 0 0;
   display:flex;
   flex-direction:column;
   gap: 6vw;
}

.bbBladeCon .itemIMGCon{
   position:absolute;
   width:90%;
   height:fit-content;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
}

.itemIMG{
   position: relative;
   width:100%;
   height:auto;
}

.backGlow{
   position: absolute;
    width: 12vw;
    height: 7vw;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    background-color: #fff;
    filter: blur(25px);
    mix-blend-mode: overlay;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
}

#flare01{
   position: absolute;
    width: 21vw;
    height: auto;
    top: -1.33vw;
    bottom: 0;
    left: -5vw;
    right: 0;
    margin: auto;
     opacity: 0;
    transform: scale(0);
}

.bladeGleam{
   position: absolute;
    width: 10vw;
    height: 2vw;
    top: 0.25vw;
    bottom: 0;
    right: 2.88vw;
    margin: auto;
    overflow: hidden;
    mix-blend-mode: overlay;
     transform: skewX(-50deg); 
    /* opacity: 0.66;*/
}

.innerGleam{
   position: absolute;
    width: 80%;
    height: 130%;
    background-color: #fff;
    filter: blur(15px);
    border-radius: 50%;
    top: -10%;
    left: 10%;
    opacity: 0.66;
}

.zoomMain{
   position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display:flex;
    justify-content:center;
    align-items:center;
}

.zoomBG{
   position:absolute;
   width:100%;
   height:100%;
    background-color: rgba(0, 0, 0, 0.22);
    opacity: 0;
    transition: 300ms;
}

.fadeIn{
   opacity: 1;
}

.zoomZone{
   position:relative;
   width:10vw;
   height:5vw;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
   background-color:rgba(0,0,0,0.0);
}

.zoomZone:hover{
   cursor: url(/images/globals/cursors/HoG-pixeled-01.png) -80 -120, auto;
}

.zoomCon{
   position: absolute;
    width: 80vw;
    height: fit-content;
    top: -20%;
    bottom: 0;
    left: 0%;
    right: 0;
    margin: auto;
    opacity: 0;
    transform: scale(0.9);
    filter: blur(10px);
    transition: 600ms;
}

#zoomIn{
   position:relative;
   width:100%;
   height:auto;
}

.zoomInIn {
   opacity: 1;
   transform: scale(1);
   filter: blur(0px);
}

/*.zoomZone:hover + .zoomCon{
   opacity: 1;
   transform: scale(1);
   filter: blur(0px);
}
*/
.codeText{
   font-size: 1vw;
    line-height: 1em;
    position: absolute;
    width: fit-content;
    height: fit-content;
    bottom: 13%;
    left: -7%;
    right: 0;
    margin: auto;
    color: var(--lsBlack01-perm);
}

.dummyInput{
   position:absolute;
   opacity: 0;
   z-index: -100;
}

.copiedIt{
   font-size:3vw;
   line-height: 0.8em;
   color: var(--lsBlack01-perm);
   position:absolute;
   width:fit-content;
   height:fit-content;
   bottom:10vw;
   left:0;
   right:0;
   margin:auto;
   text-align: center;
   opacity: 0;
   transform: translateY(100px);
}

.codeItself{
   font-size:4vw;
}

.closeCon{
   position:absolute;
   width:calc(100vw - 100px);
   height:fit-content;
   top:0;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
   display:flex;
   justify-content:space-between;
}

 .closeText{
   font-size:1.66vw;
   cursor: pointer;
 }

.itemModal .closeText{
   position:absolute;
   width:fit-content;
   height:fit-content;
   top: 0;
   bottom: 0;
   margin:auto;
}

.itemModal .closeText:hover{
   animation: letterFlip03-sm 3000ms steps(4, end) infinite;
}

.itemModal .closeText-left{
   left:70px;
   writing-mode: sideways-lr;
}

.itemModal .closeText-right{
   right:70px;
   writing-mode: vertical-rl;
}




/*---------------------------------PUPPET_RING-----------------------------*/
/*---------------------------------PUPPET_RING-----------------------------*/
/*---------------------------------PUPPET_RING-----------------------------*/


/*#puppetRingModal{
   opacity: 1;
   z-index: 1;
}
*/
#puppetRingModal .itemBG{
   background-color:#f96858;
   background-color:#cc9cb1;
    background-color:#f58b8b;
   opacity: 0.98;
}

:root{

   --prColor01: #f08e05;
   --glC_pr:#51fb79;
   --glC_pr2:var(--lsBlack01);


   --bbBG01: #f65240;


}

.prGlitch{
   animation: letterFlip-pr 6000ms steps(4, end) infinite;
}

@keyframes letterFlip-pr{
   0%{text-shadow:1px 0 0 var(--glC_pr),0 1px 0 var(--glC_pr),-0px 0 0 var(--glC_pr),0 -1px 0 var(--glC_pr);}
   25%{text-shadow:6px 0 0 var(--glC_pr2),0 4px 0 var(--glC_pr),-0px 0 0 var(--glC_pr2),0 -1px 0 var(--glC_pr);}
   50%{text-shadow:2px 0 0 var(--glC_pr),0 0px 0 var(--glC_pr),-1px 0 0 var(--glC_pr),0 -5px 0 var(--glC_pr);}
   75%{text-shadow:3px 0 0 var(--glC_pr),0 3px 0 var(--glC_pr2),-0px 0 0 var(--glC_pr),0 -0px 0 var(--glC_pr);}
   100%{text-shadow:0px 0 0 var(--glC_pr),0 1px 0 var(--glC_pr),-3px 0 0 var(--glC_pr),0 -5px 0 var(--glC_pr);}
}  


#prLetters{
   color:#2bbb4e;
   color:var(--prColor01);
}

.soloIMGCon{
   opacity: 0.88;
}

.pupRingCon .itemDes{
   background-color:#f58b8bb5;
}

.pupRingCon .itemIMGCon{
   position: absolute;
    width: fit-content;
    height: fit-content;
    top: 0;
    bottom: 0;
    left: 0;
    right: 34%;
    margin: auto;
}

.pupRingCon .itemCopyCon{
   position:relative;
   width:fit-content;
   margin: -1vw 9vw 0 0;
   display:flex;
   flex-direction:column;
}


#puppetRingIMG{
   width:34vw;
   height: auto;
}