@import url('https://fonts.cdnfonts.com/css/terminal-grotesque-open');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

@font-face {
    font-family: 'vivi-lang';
    src: url('fonts/vivi-lang.ttf') format('truetype');
}

.vivi-font {
    font-family: 'vivi-lang', sans-serif;
    color: #ffffff; 
    text-transform: uppercase;
}

#story-parallax {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

.parallax-layer {
    position: absolute;
    inset: 0;
    height: 100%;
}


.parallax-layer img {
    width: 100%;
    height: auto;
    position: absolute;
}


.dialogue-box {
    position: fixed;
    bottom: 0;
    max-width:25vmax;
    min-width:10vmax;
    min-height: 0vh;
    z-index: 1000;
    
    background-color: #000000db;
    border: 3px solid #2828287c;
    box-shadow: 0px 28px 32px rgba(0, 0, 0, 1.8);
    border-radius: 74px;
    display: flex;
    align-items: center;
    padding-right: 0.9vw;
}

.profile-image {
    position: absolute;
    width: 5vmax;
    height: auto;
    aspect-ratio: 1 / 1;

    flex-shrink: 0;
    border: 3px solid #000000;
    overflow: hidden;
    border-radius: 128px;
}

.profile-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
    position: absolute; 
    opacity: 0; 
}

.dialogue-content {
    padding-left: 6vmax;
    flex-grow: 1;
    color: white;
}

.character-name {
    font-size: 1.4vmax;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 0.5vh;
    text-transform: uppercase;
}

.dialogue-text {
    margin: 0;
    font-size: 1.1vmax;
    line-height: 1vmax;
    margin-bottom: 1vmax;

}


























/* ==========================================
    LAYERS
   ==================================================================================== */


#S1-FG,
#S3-FG-0{

    position: absolute;
    z-index: 1;
}


#S1-L1{
    width: 60%;
    left: 19%;
}

#S2-LW{width: 5%;}

#S3-LS{
    width: 15%;}


#S1-L2{
    width: 90%;
    left: 0%;
}
#S1-TOWER{
    width: 20%;
    left: 41%;

}

#S3-LS{
    top: 14.5%;
    left: 47.5%;
}


#S3-LE{
    position: absolute;
    background-image: url('img/Layers/S3-LE.webp');
    width:96vh;
    height: 200vh;
    background-size: cover;
    background-repeat: no-repeat;
    animation: S3-LE-SPRITE 1.5s steps(2) infinite;
}


.fog{
    position: absolute;
    background: url("img/Layers/S1-FOG.webp") repeat-x;
    background-size: 90% auto;
    animation-name: fogAnim;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.fog.fone {
    background-position: 0%;
    opacity: 0.9;
    top: 25%;
    animation-duration: 15s;}
.fog.ftwo {
    background-position: 50%;
    opacity: 0.9;
    top: 5%;
    animation-duration: 120s; }
.fog.fthree {
    background-position: 100%;
    top: -60%;
    opacity: 0.6;
    animation-duration: 120s;}


#S4-FG{
    opacity: 1.0;
    height: 100vw;
    width: auto;
}
#S4-FG-1{
    left: -30%;
    height: 100vw;
    width: auto;
}





#S5-F-S{
    height: 100vh;
    width: 80vw;
    left: 20%;
}


#S5-Q-S{
    height: 100vh;
    width: 80vw;
    right: 15%;
}

#S5-SVG {
    position: absolute;
    stroke-width: 2px;
    width: 40vw; /* Keep width relative to screen width */
    left: 30%;   /* Horizontal stay same */
    height: auto; 
    display: block;
}



#S5-EXPO{
    position: absolute;
    justify-self: center;
    background-color: #ffffff;
    border-radius: 100%;
    top: -84%;
    right: -23%;
    width: 150vw;
    height: 250vh;
    box-shadow: 
    0 0 10vw rgb(255, 255, 255),
    0 0 260vw rgb(0, 255, 251);
}



#S6-BG{
    filter: brightness(2) saturate(0.5) contrast(1.2);
    transform: scale(1);}

#S6-BG-CLOUDS{
    animation: breathing 6s infinite;
    top: -10%;}


#S6-FG{
    transform: scale(1.8);
    top: 118%;
    left: -35%;
}

#S6-FGFR{
    left: 10%;
    bottom: 50%;
    transform: scaleX(1.4);
}

#S6-RAHAL{
    scale: 1.1;
    height: 100vh;
    width: auto;
    left: -5%;
    top: -4%;
    opacity: 1;
    filter: blur(0px) brightness(1.0);
    border: 50px solid #000000;
}


#S6-R0,#S6-R1,#S6-R2,#S6-R3,#S6-R4,#S6-R5,#S6-R6,#S6-R7{
    height: 100vh;
    width: auto;
    position: absolute;
    bottom: 58%;
    left: 40%;
    scale: 0.5;    
    transform-origin: center;

}

.DRAMA{animation: drama-rahal 0.5s infinite ease-out;}

@keyframes drama-rahal {
    0%{
        left: 40%;
        rotate: 0deg;}
    25%{
        left: 45%;
        rotate: 5deg;}
    50%{
        left: 40%;
        rotate: 0deg;}
    75%{
        left: 35%;
        rotate: -5deg;}
    100%{
        left: 40%;
        rotate: 0deg;}
    
}


#S6-R1{left: 35%;}
#S6-R4{left: 35%;
animation: R-4drama-rahal 2s infinite;}

@keyframes R-4drama-rahal {
    0%{
        left: 35%;
        top: -50%;
        rotate: 0deg;}
    50%{
        left: 30%;
        top: -52%;
        rotate: -10deg;}
    100%{
        left: 35%;
        top: -50%;
        rotate: 0deg;}
    
}

#S6-R5{left: 46%;}
#S6-R6{bottom: 60%; left: 55%;}

#S6-R7{
    animation: breathing 6s infinite ease-in-out;
    bottom: 60%; left: 50%;}


#arfop0,#arfop1{
    animation: breathing 3s infinite ease-in-out;
    width: 15vw;
    left: 13%;
    top: 20%;
    transform-origin: bottom;
}


#S6-ISLAND{
    bottom: -70%;
    transform: scale(0.1);
}


#S6-LHOUSE{
    filter: brightness(1.1) hue-rotate(350deg);
    scale: 0.4;
    top: -45%;
    height: 100vw;
    width: auto;
    left: 5%;
}



#S6-IUPDOWN{
    transform: rotate(30deg) scale(0.15);
    top: -105%;
    left: -40%;
}


#S6-ITREE,#S6-FLOATS-ITREE{
    scale: 0.3;
    left: 34%;
    top: -50%;
}





#S7-FG-00,#S7-FG-0,#S7-1,#S7-L0,#S7-L1,#S7-L2{
    height: 100vh;
    width: auto;
    opacity: 1;
    scale: 1;
}


#S7-FG-00,#S7-FG-0,#S7-FG-1,#S7-FG-2,#S7-L0,#S7-L1,#S7-L2,#S7-BG-CLOUDS,#VIVI-3D,#RAHAL-3D,#ARFOP-3D{animation: DayCycle 48s infinite;}

#S7-BG{
    animation: DayCycle2 48S infinite;
}

@keyframes DayCycle{
    0%{filter: hue-rotate(0deg) brightness(1);}
    25%{filter: hue-rotate(90deg) brightness(1.5);}
    50%{filter: hue-rotate(150deg) brightness(2);}
    75%{filter: hue-rotate(300deg) brightness(1.5);}
    100%{filter: hue-rotate(360deg) brightness(1);}
}

@keyframes DayCycle2{
    0%{filter: hue-rotate(0deg) brightness(2) contrast(1.2) saturate(0.6);}
    25%{filter: hue-rotate(90deg) brightness(2.5) contrast(1) saturate(0.6);}
    50%{filter: hue-rotate(150deg) brightness(3) contrast(0.9) saturate(0.8);}
    75%{filter: hue-rotate(300deg) brightness(2.5) contrast(1) saturate(0.6);}
    100%{filter: hue-rotate(360deg) brightness(2) contrast(1.2) saturate(0.6);}}

#S7-FG-00{
    position: relative;
    transform: scale(0.6);
    opacity: 1;}


#S7-FG-0{
    position: absolute;
    background-image: url('img/Layers/S7/S7-FG-0.webp');
    background-repeat: repeat-x;
    background-position: 0% 100%;
    background-size: 100% 100%;
    width: 100vw;
    height: 100vh;
    animation: 
    DayCycle 48s infinite,
    S7-FG 64s steps(1024) infinite;
    bottom: -98%;
    transform: scale(2)
}


#S7-FG-1{
    background-image: url('img/Layers/S7/S7-FG-0.webp');
    background-repeat: repeat-x;
    width: 100vw;
    height: 100vh;
    background-position: 0% 100%;
    background-size: 100% 100%;
    animation: 
    DayCycle 48s infinite,
    S7-FG 128s steps(2024) infinite;
    transform: scale(2.5);
}

#S7-FG-2{
    background-image: url('img/Layers/S7/S7-FG-0.webp');
    background-repeat: repeat-x;
    width: 200vw;
    height: 150vh;
    left: -50%;
    background-position: 0% 100%;
    background-size: 100% 100%;
    animation: 
    DayCycle 48s infinite,
    S7-FG 256s steps(4096) infinite;
    transform: scale(1);
}




#S7-L0{
    height: 50vh;
    top: 10%;
    right: 5%;
    width: auto;
}

#S7-L1{
    height: 35vh;
    top: 5%;
    left: 5%;
    rotate: 5deg;
    width: auto;
}


#S7-L2{
    height: 35vh;
    top: 30%;
    left: 27%;
    rotate: 5deg;
    width: auto;
}






/* ==========================================
        Head Layers
   ==================================================================================================================== */


.head {
    transform-origin: -1vw 1vh;
    animation: headanim 2.9s ease-in-out infinite;
}

.shead{
    position: absolute;
    background-image: url('img/Seven/sss.png');
    width: 120%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-repeat: no-repeat;
    animation: sheadanim 0.3s steps(2) infinite;
    z-index: -1;
    right: 35%;
    transform: rotate(-8deg);
}
.shead-talk{animation: sheadanim2 0.3s steps(2) infinite;}
.shead-side{animation: sheadanim3 0.3s steps(2) infinite;}

.fhead{
    position: absolute;
    background-image: url('img/heads/falco.webp');
    width: 120%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    top: -250%;
    animation: headanim 5.9s ease-in-out infinite;
}

#anger-head{
position: relative;
width: 15vw;
left: 42%;
top: 20%;
animation: anger-head-anim 0.9s infinite;
}

























/* ==========================================
        File Layers
   ==================================================================================== */

#file0 {
    pointer-events: all;
    position: absolute;
    width: 15vw;
    left: 30%;
    bottom: 76%;
    
    transform: translate(-50%, 50%); 
    
    filter: brightness(0.1) saturate(1) hue-rotate(350deg);
    cursor: pointer;
    transition: transform 0.2s ease;
}

#file1 {
    pointer-events: all;
    position: absolute;
    width: 5vw;
    right: 88%;
    bottom: 70%;
    transform: translate(-50%, 50%); 
    filter: brightness(0.1) saturate(1) hue-rotate(30deg);
    cursor: pointer;
    rotate: 70deg;
    transition: transform 0.2s ease;
}


#file2 {
    pointer-events: all;
    position: relative;
    width: 2vw;
    right: -11%;
    bottom: -27.5%;
    transform: translate(-50%, 50%); 
    filter: brightness(0.1) saturate(1) hue-rotate(30deg);
    cursor: pointer;
    rotate: 70deg;
    transition: transform 0.2s ease;
}


#file3 {
    pointer-events: all;
    position: absolute;
    width: 5vw;
    right: 150%;
    bottom: -25%;
    transform: translate(-50%, 50%); 
    filter: brightness(0.03) saturate(0) hue-rotate(30deg);
    cursor: pointer;
    rotate: 70deg;
    transition: transform 0.2s ease;
}


#file4 {
    opacity: 0;
    pointer-events: all;
    position: absolute;
    width: 15vw;
    bottom: 0%;
    right: 30%;
    transform: translate(-50%, 50%); 
    filter: brightness(0) saturate(0) hue-rotate(30deg);
    cursor: pointer;
    rotate: 70deg;
    transition: transform 0.2s ease;
}


#file5 {
    pointer-events: all;
    position: absolute;
    width: 8vw;
    bottom: -50%;
    right: 35%;
    transform: translate(-50%, 50%); 
    filter: brightness(0.5) saturate(0.5) hue-rotate(30deg);
    cursor: pointer;
    rotate: 70deg;
    transition: transform 0.2s ease;
    animation:DayCycle 48s infinite,
}


#file0:hover,#file1:hover,#file2:hover,#file3:hover,#file4:hover,#file5:hover {
    transform: translate(-50%, 50%) scale(1.1);
    -webkit-filter: brightness(0.3) saturate(5) hue-rotate(350deg) drop-shadow(5px 5px 0 rgb(255, 0, 0));
}

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   /* ==========================================
        Characters Layers
   ==================================================================================== */


.quinn-character-s1{
    top: -0.5%;
    left: 5.9%;
    width: 19.8%;
    scale: 1.5;
    object-fit: contain;
    animation: breathing 3s infinite;
}

.f4anim{
    top: -22%;
    left: 29%;
    animation: f4-anim 0.3s infinite;
}


.Quinn{
    position: relative;
    background-image: url('img/Quinn/Quinn_Walking-s4.webp');
    background-repeat: no-repeat;
    width: 11%;
    height: 20%;
    left: 37%;
    top: 20%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 30%;
    will-change: opacity,transform;

}

.Quinn.a{
    filter: blur(0.02vw);
    top: 19.7%;
    background-position: -3%;}
.Quinn.b{
    top: 20%;
    background-position: 30%;}
.Quinn.c{
    filter: blur(0.02vw);
    top: 19.7%;
    background-position: 65%;}
.Quinn.d{
    top: 20%;
    background-position: 100%;}

.Quinn-lantern{
    position: absolute;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    left: 0%;
    top: 0%;
    background-size:contain;
    background-repeat: no-repeat;
    background-image: url('img/Quinn/quinn-wc-light-2-4.webp');
    will-change: opacity,transform;
    animation: breathing 3s infinite;
}
.Quinn-lantern.a,.Quinn-lantern.c{background-image: url('img/Quinn/quinn-wc-light-1-3.webp');}
.Quinn-lantern.b,.Quinn-lantern.d{background-image: url('img/Quinn/quinn-wc-light-2-4.webp');}

@keyframes breathing {
    0% {filter: brightness(65%);}
    50% {filter: brightness(100%);}
    100% {filter: brightness(55%); }
}


.Seven{
    position: relative;
    background-image: url('img/Seven/sss-s1.png');
    width: 15%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(10%) hue-rotate(340deg) saturate(70%) grayscale(30%);
}
.Seven.is-back {animation: propeller-back 0.3s steps(2) infinite;}
.Seven.is-front {animation: propeller-front 0.3s steps(2) infinite;}
.Seven.is-front-wave {animation: propeller-front-wave 0.3s steps(2) infinite;}
.Seven.is-side {animation: propeller-side 0.3s steps(2) infinite;}
.Seven.is-expo {animation: propeller-expo 0.3s steps(2) infinite;}
.Seven.is-reading {animation: propeller-reading 0.3s steps(2) infinite;}





#secret-vivi {
    position: absolute;
    filter: brightness(var(--intensity, 1));
    transition: filter 1.0s ease;
}



#RAHAL-3D{
    position: absolute;
    background-image: url('img/Chara/RAHAL-3D-WALK-SPRITE-SHEET.webp');
    width: 44%;
    height: 100%;
    left: 28%;
    top: -3%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:0%;
    animation: 
    DayCycle 48s infinite,
    rahal-3d-walk 1.5s steps(1) infinite;
    transform: scale(0.2)
}

@keyframes rahal-3d-walk {
    0%, 100%{background-position: 0%;}
    10% {background-position: 10.5%;}
    20% {background-position: 21.5%;}
    30% {background-position: 32%;}
    40% {background-position: 42.5%;}
    50% {background-position: 53.5%;}
    60% {background-position: 65.5%;}
    70% {background-position: 76%;}
    80% {background-position: 88%;}
    90% {background-position: 100%;}
}


#VIVI-3D{
    position: absolute;
    background-image: url('img/Chara/VIVI-3D-DEFAULT-SPRITE-SHEET.webp');
    width: 52%;
    height: 100%;
    left: 12%;
    top: -10%;
    transform: scale(0.05);
    background-size: cover;
    background-repeat: no-repeat;
    animation: 
    DayCycle 48s infinite,
    vivi-default-3d-walk 0.76s steps(1) infinite;
}

#VIVI-3D.VIVI-3D-READING{
    background-image: url('img/Chara/VIVI-3D-READING-SPRITE-SHEET.webp');
    animation: 
    DayCycle 48s infinite,
    vivi-reading-3d-walk 0.76s steps(1) infinite;
}

@keyframes vivi-default-3d-walk {
    0%, 100%{
        background-position: 0%;}
    10% {background-position: 20%;}
    30% {background-position: 41%;}
    50% {background-position: 60%;}
    70% {background-position: 80%;}
    90% {background-position: 100%;}
}

@keyframes vivi-reading-3d-walk {
    0%, 100%{
        background-position: 0%;}
    10% {background-position: 19%;}
    30% {background-position: 38.3%;}
    50% {background-position: 59%;}
    70% {background-position: 80%;}
    90% {background-position: 100%;}
}


#ARFOP-3D{
    pointer-events: all;
    position: absolute;
    background-image: url('img/Chara/ARFOP-3D-WALK-SPRITE-SHEET.webp');
    width: 42%;
    height: 100%;
    left: 35%;
    top: 0%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 98.5%;
    transform: scale(0.1);
    animation:
    DayCycle 48s infinite,arfop-3d-walk 1.3s infinite steps(1);


}

#ARFOP-3D:hover{
    animation: arfop-3d-walk 1.3s infinite steps(1);;
    -webkit-filter: brightness(0.3) saturate(5) hue-rotate(350deg) drop-shadow(5px 5px 0 rgb(255, 0, 0));
}


@keyframes arfop-3d-walk {
    0%, 100%{background-position: -0.5%;}
    10% {background-position: 10.5%;}
    20% {background-position: 21.5%;}
    30% {background-position: 32.5%;}
    40% {background-position: 43.5%;}
    50% {background-position: 54.5%;}
    60% {background-position: 65%;}
    70% {background-position: 76.5%;}
    80% {background-position: 87.5%;}
    90% {background-position: 98.5%;}

}







/* ==========================================
        Animations
   ==================================================================================================================== */

@keyframes S7-FG{
    from{background-position: 0px 100%;}
    to{background-position: 3840px 100%;}
}


   @keyframes fogAnim{
    from{background-position: 0px top;}
    to{background-position: 1700px top;}
}


@keyframes S3-LE-SPRITE {
    from{background-position: 0%;}
    to{background-position: 199%;}
}


@keyframes headanim {
    0%, 100% {transform: translateY(1vh) rotate(-8deg) scale(1);}
    50% {transform: translateY(-1vh) rotate(8deg);}
}


@keyframes anger-head-anim {
    0%{scale:0.6;}
    50%{transform: translateY(1vh) rotate(-9deg) scale(0.6);}
    100%{scale: 0.6;}
}


@keyframes sheadanim {
    from{background-position:18.2%;top:-105%}
    to{background-position:36.3%; top:-115%}
}


@keyframes sheadanim2 {
    from{background-position:36.4%;top:-105%}
    to{background-position:55%; top:-115%}
}
@keyframes sheadanim3 {
    from{background-position:54.7%;top:-105%}
    to{background-position:73%; top:-115%}
}


@keyframes f4-anim {
    0%{transform: rotate(0deg) scale(0.45);}
    50%{transform:rotate(3deg) scale(0.40);}
    100%{transform:rotate(0deg) scale(0.45);}
}




















/* ==========================================
        Seven Animations
   ============================================================================================================================== */


@keyframes propeller-back {
    from { background-position: 0% 0; }
    to {
        top: 0.2%;
        background-position: 18.3% 0; }
}
@keyframes propeller-front {
    from { background-position: 27% 0; }
    to {
        top: 0.2%;
        background-position: 9% 0; }
}
@keyframes propeller-expo {
    from { background-position: 90.4% 0; }
    to {
        top: 0.2%;
        background-position:108.6% 0; }
}
@keyframes propeller-reading {
    from { background-position: 72.8% 0; }
    to {
        top: 0.2%;
        background-position: 91% 0; }
}
@keyframes propeller-front-wave {
    from { background-position: 36.4% 0; }
    to {
        top: 0.2%;
        background-position: 54.5% 0; }
}
@keyframes propeller-side {
    from { background-position:  54.5% 0; }
    to { 
        top: 0.2%;
        background-position: 72.7% 0;}
}