@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap');

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

body{
    background:
        linear-gradient(
            rgba(0,0,0,0.45),
            rgba(0,0,0,0.65)
        ),
        url('/static/background.jpg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow:hidden;
    height:100vh;

    font-family:'Cinzel', serif;
    color:white;
}

/* STELLE */

.stars{
    position:absolute;
    inset:0;
}

.stars::before{
    content:"";
    position:absolute;
    width:2px;
    height:2px;
    background:white;

    box-shadow:
    100px 100px white,
    300px 400px white,
    600px 200px white,
    900px 700px white,
    1200px 300px white,
    1500px 600px white,
    200px 800px white,
    700px 950px white,
    1300px 900px white,
    1700px 150px white;

    animation:twinkle 4s infinite;
}

@keyframes twinkle{
    0%,100%{
        opacity:.4;
    }

    50%{
        opacity:1;
    }
}

/* STELLA CADENTE */

.shooting-star{
    position:absolute;
    top:-100px;
    left:-100px;

    width:250px;
    height:2px;

    background:
    linear-gradient(
        90deg,
        white,
        transparent
    );

    animation:
    shooting 12s linear infinite;
}

@keyframes shooting{

    0%{
        transform:
        translate(-200px,-200px)
        rotate(25deg);

        opacity:0;
    }

    10%{
        opacity:1;
    }

    25%{
        transform:
        translate(1400px,800px)
        rotate(25deg);
    }

    100%{
        opacity:0;
    }
}

/* INTRO */

.intro{
    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:5;

    animation:
    introFade 5s forwards;
}

.intro h2{
    color:#d6e8ff;

    font-weight:400;

    text-shadow:
    0 0 15px #88c9ff;
}

@keyframes introFade{

    0%{
        opacity:0;
    }

    20%{
        opacity:1;
    }

    80%{
        opacity:1;
    }

    100%{
        opacity:0;
        visibility:hidden;
    }
}

/* PORTALE */

.portal-container{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    flex-direction:column;

    opacity:0;

    animation:
    revealPortal 3s forwards;

    animation-delay:5s;
}

@keyframes revealPortal{

    from{
        opacity:0;
        transform:scale(.8);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

.portal{

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.7),
        rgba(130,180,255,.2),
        transparent
    );

    filter:blur(20px);

    animation:
    pulse 6s infinite;
}

@keyframes pulse{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }
}

/* STATION */

.station{

    width:420px;
    height:420px;

    border-radius:50%;

    position:relative;

    border:4px solid rgba(255,255,255,.3);

    backdrop-filter:blur(5px);

    background:
    radial-gradient(
        circle,
        rgba(100,180,255,.15),
        rgba(0,0,0,.2)
    );

    animation:
    rotate 120s linear infinite;
}

@keyframes rotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

.ring{
    position:absolute;

    inset:20px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.3);
}

/* CUORE */

.center-heart{

    position:absolute;

    top:50%;
    left:50%;

    width:100px;
    height:100px;

    background:#8bd2ff;

    transform:
    translate(-50%,-50%)
    rotate(-45deg);

    box-shadow:
    0 0 20px #8bd2ff,
    0 0 50px #8bd2ff;
}

.center-heart::before,
.center-heart::after{

    content:"";

    position:absolute;

    width:100px;
    height:100px;

    background:#8bd2ff;

    border-radius:50%;
}

.center-heart::before{
    top:-50px;
}

.center-heart::after{
    left:50px;
}

#name{

    position:absolute;

    width:100%;

    text-align:center;

    top:75%;

    color:white;

    text-shadow:
    0 0 15px #66bfff,
    0 0 35px #66bfff;
}

/* QUOTE */

.quote-box{

    position:absolute;

    bottom:80px;

    width:100%;

    text-align:center;

    display:flex;
    justify-content:center;
}

#quote{

    max-width:800px;

    font-size:1.4rem;

    color:#dcecff;

    transition:.8s;
}

/* FINALE */

.final-message{

    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    opacity:0;

    background:
    rgba(0,0,0,.75);

    transition:2s;

    pointer-events:none;
}

.final-message.show{
    opacity:1;
}

.final-text{

    font-size:1.5rem;

    line-height:2rem;

    color:white;

    text-shadow:
    0 0 15px #8bd2ff;
}