@font-face{
font-family:"Calligstrophe";
src:url("Font/Calligstrophe.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}

body.artworkPage{
margin:0;
overflow-x:hidden;
overflow-y:auto;
min-height:100vh;
font-family:"Calligstrophe","Yuji Boku",serif;
background:#000;
color:#0D0D0D;
}

.pageFade{
position:fixed;
inset:0;
background:#000;
z-index:999999;
pointer-events:none;
opacity:1;
transition:opacity .25s ease;
}

body.loaded .pageFade{opacity:0}
body.page-out .pageFade{opacity:1}

.navBar{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:1vw 3vw 1vw 4vw;
z-index:1000;
box-sizing:border-box;
opacity:0;
transform:translateY(25px);
transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}

body.loaded .navBar{
opacity:1;
transform:translateY(0);
}

body.page-out .navBar{
transform:translateY(-120%);
}

.navLeft,.navRight{
display:flex;
align-items:center;
}

.navLeft{flex-direction:column;align-items:flex-start}
.navRight{gap:80px;margin-top:-70px}

.navItem{
position:relative;
width:120px;
height:40px;
display:block;
cursor:pointer;
transition:transform .2s ease;
transform-origin:center;
}

.navItem:hover{
transform:scale(1.15);
z-index:20;
}

.navLeft .navItem{width:320px;height:70px}

.navItem img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
}

.navItem img:nth-child(1){animation:s1 2.4s infinite}
.navItem img:nth-child(2){animation:s2 2.4s infinite}
.navItem img:nth-child(3){animation:s3 2.4s infinite}

@keyframes s1{0%,32%{opacity:1}33%,100%{opacity:0}}
@keyframes s2{0%,32%{opacity:0}33%,65%{opacity:1}66%,100%{opacity:0}}
@keyframes s3{0%,65%{opacity:0}66%,100%{opacity:1}}

.activePageIndicator{
transform:none !important;
pointer-events:none;
}

.bgLayer{
position:fixed;
inset:0;
z-index:-1;
}

.bgLayer img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.aboutMain{
margin-left:380px;
margin-top:120px;
width:calc(100% - 420px);
color:white;
opacity:0;
transform:translateY(25px);
transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}

body.loaded .aboutMain{
opacity:1;
transform:translateY(0);
}

body.page-out .aboutMain{
transform:translateY(20vh);
opacity:0;
}

.section{
padding:10px 20px;
}

.videoBox{
width:100%;
max-width:900px;
margin:auto;
aspect-ratio:16/9;
box-shadow:0 0 20px rgba(255,255,255,0.05);
}

.videoBox iframe{
width:100%;
height:100%;
display:block;
}

.playlistButtons{
display:flex;
justify-content:center;
gap:30px;
margin-top:10px;
}

.playBtn{
display:block;
position:relative;
width:125px;
height:35px;
text-decoration:none;
transition:transform .2s ease;
}

.playBtn:hover{
transform:scale(1.08);
}

.btnAnimText{
position:absolute;
inset:0;
width:100%;
height:100%;
}

.btnAnimText img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
}

.btnAnimText img:nth-child(1){animation:s1 2.4s infinite}
.btnAnimText img:nth-child(2){animation:s2 2.4s infinite}
.btnAnimText img:nth-child(3){animation:s3 2.4s infinite}

.splitContainer{
display:flex;
gap:30px;
max-width:900px;
margin:auto;
margin-top:-5px;
}

.playlistColumn{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
}

.columnTitleHeader{
position:relative;
width:145px;
height:45px;
margin-bottom:8px;
}

.columnTitleHeader img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
}

.columnTitleHeader img:nth-child(1){animation:s1 2.4s infinite}
.columnTitleHeader img:nth-child(2){animation:s2 2.4s infinite}
.columnTitleHeader img:nth-child(3){animation:s3 2.4s infinite}

.scrollList{
width:100%;
box-sizing:border-box;
height:550px;
overflow-y:scroll;
display:flex;
flex-direction:column;
gap:16px;
background:rgba(0,0,0,0.4);
border:1px solid rgba(255,255,255,0.1);
padding:16px;
border-radius:10px;
}

.scrollList::-webkit-scrollbar{width:6px}
.scrollList::-webkit-scrollbar-track{background:rgba(0,0,0,0.2)}
.scrollList::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:3px}

.scrollItem{
width:100%;
cursor:pointer;
border-radius:8px;
overflow:hidden;
transition:transform .2s ease, box-shadow .2s ease;
background:rgba(255,255,255,0.02);
flex-shrink:0;
}

.scrollItem img{
width:100%;
height:auto;
display:block;
object-fit:contain;
}

.scrollItem:hover{
transform:scale(1.03);
box-shadow:0 0 12px rgba(255,255,255,0.2);
}

.artworkChibi{
position:fixed;
left:0;
top:0;
z-index:50;
width:340px;
height:100vh;
opacity:0;
transition:opacity .6s ease;
pointer-events:none;
}

body.loaded .artworkChibi{
opacity:1;
}

.artworkChibi .chibiLink{
position:absolute;
width:340px;
height:310px;
transform-origin:left center;
transition:transform .8s cubic-bezier(.2,.8,.2,1);
pointer-events:auto;
}

.artworkChibi .chibiLink:nth-child(1){
top:15vh;
left:25px;
transform:translateX(450px);
}

.artworkChibi .chibiLink:nth-child(2){
top:38vh;
left:100px;
transform:translateX(450px);
}

.artworkChibi .chibiLink:nth-child(3){
top:62vh;
left:0px;
transform:translateX(450px);
}

body.loaded .artworkChibi .chibiLink{
transform:translateX(0);
}

body.page-out .artworkChibi .chibiLink{
transform:translateX(-450px);
}

.disabledChibi{
filter: drop-shadow(0 0 15px rgba(233, 132, 219, 0.55));
}

.artworkChibi .chibiBox{
position:absolute;
inset:0;
width:100%;
height:100%;
transition:transform .2s ease;
}
.artworkChibi .chibiLink:hover .chibiBox {
  transform: scale(1.08);
  z-index: 50;
}
.artworkChibi .boxBg,
.artworkChibi .boxTop{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
}

.artworkChibi .boxClip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 1;
}

.artworkChibi .chibiLink:nth-child(1) .boxClip {
  -webkit-mask-image: url("Assets/MainPage/Chibi/boxC3.webp");
  mask-image: url("Assets/MainPage/Chibi/boxC3.webp");
}

.artworkChibi .disabledChibi .boxClip {
  -webkit-mask-image: url("Assets/MainPage/Chibi/boxC2.webp");
  mask-image: url("Assets/MainPage/Chibi/boxC2.webp");
}

.artworkChibi .chibiLink:nth-child(3) .boxClip {
  -webkit-mask-image: url("Assets/MainPage/Chibi/boxC1.webp");
  mask-image: url("Assets/MainPage/Chibi/boxC1.webp");
}

.boxText{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
bottom:-100px;
}

.boxText img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
transform:scale(0.6);
}

.boxText img:nth-child(1){animation:s1 2.4s infinite}
.boxText img:nth-child(2){animation:s2 2.4s infinite}
.boxText img:nth-child(3){animation:s3 2.4s infinite}

.chibiLink:hover .boxTop{
animation:boxBounce .38s cubic-bezier(.2,.8,.2,1);
}

@keyframes boxBounce{
0%{transform:translateY(0)}
30%{transform:translateY(-20px)}
100%{transform:translateY(0)}
}

.footerLinks{
position:fixed;
right:2vw;
bottom:1.5vh;
display:flex;
gap:24px;
z-index:1000;
}

.footerItem{
display:block;
text-decoration:none;
transition:transform .1s ease;
}

.footerItem:hover{transform:scale(1.08)}

.footerAnim{
position:relative;
width:140px;
height:32px;
}

.footerAnim img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
}

.footerAnim img:nth-child(1){animation:s1 2.4s infinite}
.footerAnim img:nth-child(2){animation:s2 2.4s infinite}
.footerAnim img:nth-child(3){animation:s3 2.4s infinite}
@media (max-width: 1900px) {
  .artworkChibi {
    transform: scale(0.8) !important;
    transform-origin: top left !important;
    width: 280px !important;
    left: 0px !important;
  }

  .artworkChibi .chibiLink:nth-child(1) {
    top: 25vh !important;
  }

  .artworkChibi .chibiLink:nth-child(2) {
    top: 54vh !important;
  }

  .artworkChibi .chibiLink:nth-child(3) {
    top: 83vh !important;
  }

  .aboutMain {
    margin-left: 300px !important;
    width: calc(100% - 320px) !important;
  }
}

@media (max-width: 1850px) {
  .artworkChibi {
    top: 5vh;
    transform: scale(0.65) !important;
    transform-origin: top left !important;
    width: 250px !important;
  }

  .aboutMain {
    display: flex !important;
    flex-direction: row !important;
    margin-left: 260px !important;
    width: calc(100% - 280px) !important;
    margin-top: 140px !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  .section:first-child {
    flex: 2 !important;
    max-width: 60% !important;
  }

  .splitContainer {
    flex: 1 !important;
    flex-direction: column !important;
    gap: 30px !important;
    margin-top: 0 !important;
    width: 30% !important;
  }

  .videoBox {
    max-width: 100% !important;
  }

  .playlistColumn {
    width: 100% !important;
    margin: 0 !important;
  }

  .scrollList {
    height: 350px !important;
  }
}


@media (max-width: 1350px) {
  .artworkChibi {
    top: 5vh;
    transform: scale(0.65) !important;
    transform-origin: top left !important;
    width: 250px !important;
  }

  .aboutMain {
    display: flex !important;
    flex-direction: row !important;
    margin-left: 260px !important;
    width: calc(100% - 280px) !important;
    margin-top: 150px !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .section:first-child {
    flex: 2 !important;
    max-width: 70% !important;
    margin-top: 50px !important;
  }

  .splitContainer {
    display: none !important;
  }

  .videoBox {
    max-width: 100% !important;
  }
}

@media (max-width: 1000px) {
  .artworkChibi {
    top: 5vh;
    transform: scale(0.65) !important;
    transform-origin: top left !important;
    width: 250px !important;
  }

  .aboutMain {
    display: flex !important;
    flex-direction: row !important;
    margin-left: 260px !important;
    width: calc(100% - 280px) !important;
    margin-top: 150px !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .section:first-child {
    flex: 2 !important;
    max-width: 70% !important;
    margin-top: 50px !important;
  }

  .splitContainer {
    display: none !important;
  }

  .videoBox {
    max-width: 100% !important;
  }
  .navRight {
    display: none !important;
  }

  .navBar {
    justify-content: center !important;
    padding-right: 4vw !important;
  }

  .navLeft {
    align-items: center !important;
  }
}

@media (max-width: 700px) {
  .artworkChibi {
    display: none !important;
  }

  .aboutMain {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    width: 100% !important;
    margin-top: 200px !important;
    align-items: center !important;
  }

  .section:first-child {
    flex: none !important;
    width: 90% !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .videoBox {
    width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .splitContainer {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: 20px !important;
    align-items: center !important;
  }

  .playlistColumn {
    display: block !important;
    width: 90% !important;
  }

  .navRight {
    display: none !important;
  }

  .navBar {
    justify-content: center !important;
    padding-right: 0 !important;
  }

  .navLeft {
    align-items: center !important;
  }
}

@media (max-height: 550px) and (min-width: 500px) {
  .artworkChibi {
    display: none !important;
  }

    .aboutMain {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 90% !important;
  }

  .videoBox {
    margin: 0 auto !important;
  }
}