/*=========================================================
    ITKOS - Hall of Beginnings
=========================================================*/

/*=========================================================
    RESET
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
}

body{

    overflow:hidden;

    background:#000;

    font-family:Georgia, serif;

    color:white;
}

/*=========================================================
    MAIN SCENE
=========================================================*/

#scene{

    position:fixed;

    inset:0;

    width:100vw;
    height:100vh;

    opacity:0;

    transition:opacity 1.5s ease;

    overflow:hidden;
}

/*=========================================================
    HALL
=========================================================*/

#hall{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    background-image:url("../ASSETS/BACKGROUNDS/hall.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/*=========================================================
    ATMOSPHERIC EFFECTS
=========================================================*/

#effects{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:2;
}

.dust{

    position:absolute;

    width:3px;
    height:3px;

    border-radius:50%;

    background:white;

    opacity:.22;

    animation:floatDust linear infinite;
}

/*=========================================================
    MOSAIC
=========================================================*/

#mosaicGlow{

    position:absolute;

    left:50%;
    bottom:17%;

    transform:translateX(-50%);

    width:340px;
    height:340px;

    border-radius:50%;

    background:
    radial-gradient(

        circle,

        rgba(255,220,140,.65) 0%,

        rgba(255,185,80,.30) 45%,

        rgba(255,170,40,0) 75%

    );

    filter:blur(45px);

    opacity:0;

    transition:opacity 2s ease;

    z-index:3;

    pointer-events:none;
}

/*=========================================================
    KEEPER
=========================================================*/

#keeperGlow{

    position:absolute;

    left:40%;
    bottom:22%;

    transform:translateX(-50%);

    width:240px;
    height:240px;

    border-radius:50%;

    background:
    radial-gradient(

        circle,

        rgba(255,220,140,.85) 0%,

        rgba(255,200,90,.35) 45%,

        rgba(255,180,70,0) 75%

    );

    filter:blur(35px);

    opacity:0;

    transition:opacity 2s ease;

    z-index:8;
}

#keeper{

    position:absolute;

    left:40%;
    bottom:16%;

    width:18%;

    max-height:85%;

    transform:translate(-50%,20px);

    opacity:0;

    filter:blur(10px);

    transition:

        opacity 2s ease,

        filter 2s ease,

        transform 2s ease;

    z-index:10;

    pointer-events:none;
}

/*=========================================================
    DIALOGUE
=========================================================*/

#dialogueBox{

    position:absolute;

    left:50%;
    bottom:50px;

    transform:translateX(-50%);

    width:650px;

    max-width:82%;

    padding:24px 30px;

    background:rgba(18,18,18,.78);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:16px;

    opacity:0;

    transition:opacity .8s ease;

    z-index:100;
}

#dialogueText{

    font-size:24px;

    line-height:1.6;

    margin-bottom:20px;

    min-height:70px;
}

.nextButton{

    padding:14px 30px;

    font-size:20px;

    border:none;

    border-radius:8px;

    background:#b98b45;

    color:white;

    cursor:pointer;

    transition:.25s;
}

.nextButton:hover{

    background:#d5a95d;
}
/*=========================================================
    KEEPER OVERLAY
=========================================================*/

#keeperOverlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(8,8,8,.82);

    opacity:0;

    pointer-events:none;

    transition:opacity .9s ease;

    z-index:500;
}

#keeperOverlay.active{

    opacity:1;

    pointer-events:auto;
}

#keeperCloseup{

    width:88%;

    max-width:1400px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;
}

#keeperPortrait{

    width:420px;

    max-width:40vw;

    opacity:0;

    transform:translateY(25px);

    transition:all 1.2s ease;
}

#keeperOverlay.active #keeperPortrait{

    opacity:1;

    transform:translateY(0);
}

#keeperDialoguePanel{

    width:520px;

    max-width:42vw;

    display:flex;

    flex-direction:column;

    gap:24px;
}

#keeperDialoguePanel h2{

    font-size:46px;

    font-weight:normal;

    letter-spacing:3px;
}

#keeperDialogueText{

    font-size:28px;

    line-height:1.7;

    min-height:180px;
}

#keeperNext{

    align-self:flex-start;
}

/*=========================================================
    ANIMATIONS
=========================================================*/

@keyframes floatDust{

    from{

        transform:translateY(30px);

        opacity:0;
    }

    20%{

        opacity:.25;
    }

    80%{

        opacity:.25;
    }

    to{

        transform:translateY(-70px);

        opacity:0;
    }
}

@keyframes mosaicPulse{

    0%{

        transform:translateX(-50%) scale(.96);

        opacity:.45;
    }

    50%{

        transform:translateX(-50%) scale(1.03);

        opacity:1;
    }

    100%{

        transform:translateX(-50%) scale(.96);

        opacity:.45;
    }
}

/*=========================================================
    RESPONSIVE
=========================================================*/

@media (max-width:1100px){

    #keeperCloseup{

        flex-direction:column;

        gap:40px;

        text-align:center;
    }

    #keeperPortrait{

        width:320px;

        max-width:75vw;
    }

    #keeperDialoguePanel{

        width:90%;

        max-width:700px;

        align-items:center;
    }

    #keeperDialogueText{

        font-size:22px;
    }

    #keeper{

        width:28%;
    }

    #dialogueBox{

        width:90%;
    }
}

@media (max-width:700px){

    #keeper{

        width:42%;
    }

    #dialogueText{

        font-size:20px;
    }

    #keeperDialoguePanel h2{

        font-size:34px;
    }

    #keeperDialogueText{

        font-size:20px;
    }

    .nextButton{

        width:100%;
    }
}