#intro{
    position:fixed;
    inset:0;
    z-index:999999;
    background:#000000;
    overflow:hidden;
}


#intro{
    opacity:1;
    transition:
        opacity 1.2s ease;
}

#intro.hide{
    opacity:0;
    pointer-events:none;
}

.bg{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

.bg img{
    width:auto;
    height:100vh;
    max-width:none;
}

#age-modal{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    padding-bottom:10vh;
    z-index:100;
}

.modal-inner{
    pointer-events:auto;
    backdrop-filter:blur(4px);
	padding: 20px;
	text-align:center;
}

.modal-inner button{
    padding:12px 24px;
    margin:10px;
    cursor:pointer;
}

#intro.hide{
    opacity:0;
    visibility:hidden;
    transition:
    opacity .5s ease;
}

.character{
    position:absolute;
    left:60%;
    bottom:0;
    transform:
    translateX(-50%);
    z-index:20;
}

.character img{
    height:min(77vh,1200px);
    width:auto;
    max-width:none;
}

.character img{

    filter:
        brightness(0)
        contrast(2)
        drop-shadow(0 0 7px rgba(255,255,255,.7))
        drop-shadow(0 0 30px rgba(186,214,230,.5));

    transition:
        filter 1.2s ease;
}

.character.show img{

    filter:
        brightness(1)
        contrast(1);

}

.backlight{

    position:absolute;

    left:53%;
    bottom:-15vh;

    transform:translateX(-50%);

    width:min(70vw,900px);
    height:min(90vh,1000px);

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.45) 25%,
            rgba(255,255,255,.15) 45%,
            rgba(255,255,255,0) 70%
        );

    filter:blur(40px);

    opacity:0;

    z-index:10;

    pointer-events:none;

}

.backlight.show{

    animation:
        backlightReveal 1.8s ease forwards;

}
@keyframes backlightReveal{

    0%{

        opacity:0;

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

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:.35;

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

    }

}

.bg{
    z-index:1;
}

.character{
    z-index:20;
}

#age-modal{
    z-index:100;
}

.button-group{
    display:flex;
    justify-content:center;
    gap:1rem;
    margin-top:1.5rem;
}

.button-group button{
    min-width:140px;
    padding:12px 24px;
}

.intro-logo{

    position:absolute;

    left:50%;
    top:50%;

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

    z-index:60;

    opacity:0;

    pointer-events:none;

}

.intro-logo img{
    width:auto;
    height:100vh;
    max-width:none;
}

.intro-logo.show{

    animation:
        logoFadeIn 1s ease forwards;

}

@keyframes logoFadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.fade-black{

    position:absolute;
    inset:0;

    background:#000;

    opacity:0;

    z-index:90;

    pointer-events:none;

}

.fade-black.show{

    transition:
        opacity .8s ease;

    opacity:1;

}


.modal-inner img {
    height: auto;
    max-width: 90%;
    margin-bottom: 10px;
    aspect-ratio: auto 90 / 19;
}