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


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

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}


/* =========================================================
   BODY
   ========================================================= */

body {

    background:
        radial-gradient(
            circle at 50% 45%,
            #18263d 0%,
            #0b101b 38%,
            #05070c 75%,
            #020307 100%
        );

    color: white;

    font-family: 'Orbitron', sans-serif;

    overflow: hidden;
}


/* =========================================================
   PAGINA
   ========================================================= */

.pagina {

    position: relative;

    width: 100%;
    height: 100vh;

    display: flex;

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

    overflow: hidden;
}


/* =========================================================
   BAGLIORE CENTRALE DI SFONDO
   ========================================================= */

.sfondo-glow {

    position: absolute;

    width: 700px;
    height: 700px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 210, 255, 0.18) 0%,
            rgba(0, 120, 255, 0.08) 35%,
            transparent 70%
        );

    filter: blur(20px);

    animation:
        respirazione 5s ease-in-out infinite;

}


/* =========================================================
   CONTENITORE PRINCIPALE
   ========================================================= */

.contenitore {

    position: relative;

    z-index: 2;

    width: 100%;

    padding: 40px;

    text-align: center;

}


/* =========================================================
   TITOLO GPA
   ========================================================= */

.titolo {

    margin: 0;

    font-size:
        clamp(90px, 15vw, 220px);

    font-weight: 900;

    letter-spacing: 0.08em;

    line-height: 0.9;

    background:
        linear-gradient(
            120deg,
            #ffffff 0%,
            #9eeaff 25%,
            #00d9ff 50%,
            #7b6cff 75%,
            #ffffff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    text-shadow:
        0 0 20px rgba(0, 220, 255, 0.25),
        0 0 60px rgba(0, 150, 255, 0.15);

    animation:
        entrata-titolo 1.2s
        cubic-bezier(.16, 1, .3, 1)
        forwards;

}


/* =========================================================
   LINEA DECORATIVA
   ========================================================= */

.linea {

    width: 180px;
    height: 3px;

    margin: 35px auto 45px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00d9ff,
            #7c6cff,
            transparent
        );

    box-shadow:
        0 0 15px #00cfff,
        0 0 30px rgba(0, 180, 255, 0.5);

}


/* =========================================================
   CONTENITORE ANELLO + NUMERO
   ========================================================= */

.contatore-container {

    position: relative;

    width: min(500px, 75vw);

    aspect-ratio: 1 / 1;

    margin: 0 auto;

    display: flex;

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

}


/* =========================================================
   SVG DELL'ANELLO
   ========================================================= */

.anello {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    transform: rotate(-90deg);

    overflow: visible;

}


/* =========================================================
   ANELLO DI SFONDO
   ========================================================= */

.anello-background {

    fill: none;

    stroke:
        rgba(255, 255, 255, 0.07);

    stroke-width: 8;

}


/* =========================================================
   ANELLO PROGRESSIVO
   ========================================================= */

.anello-progress {

    fill: none;

    stroke-width: 8;

    stroke-linecap: round;

    stroke: url(#gradiente);

    filter:
        drop-shadow(0 0 6px #00eaff)
        drop-shadow(0 0 18px rgba(0, 200, 255, 0.7))
        drop-shadow(0 0 35px rgba(0, 100, 255, 0.4));

}


/* =========================================================
   BOX DEL NUMERO
   ========================================================= */

.contatore-box {

    position: absolute;

    left: 50%;
    top: 50%;

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

    z-index: 2;

    padding: 0;
    margin: 0;

    background: none;

    border: none;

    box-shadow: none;

}


/* =========================================================
   NUMERO
   ========================================================= */

#contatore {

    margin: 0;
    padding: 0;

    white-space: nowrap;

    text-align: center;

    font-size:
        clamp(70px, 12vw, 170px);

    font-weight: 800;

    letter-spacing: -0.04em;

    font-variant-numeric:
        tabular-nums;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #b8f5ff 35%,
            #00d9ff 65%,
            #756dff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    text-shadow:
        0 0 20px rgba(0, 220, 255, 0.35),
        0 0 50px rgba(0, 130, 255, 0.25);

}


/* =========================================================
   EFFETTO FINALE DEL NUMERO
   ========================================================= */

#contatore.finito {

    animation:
        esplosione-finale
        0.8s
        ease-out;

}


/* =========================================================
   EFFETTO FINALE DELL'ANELLO
   ========================================================= */

.anello-progress.finito {

    filter:
        drop-shadow(0 0 8px #00eaff)
        drop-shadow(0 0 25px #00eaff)
        drop-shadow(0 0 60px rgba(0, 150, 255, 0.8));

    animation:
        anello-finale
        1s
        ease-out;

}


/* =========================================================
   SOTTOTITOLO
   ========================================================= */

.sottotitolo {

    margin-top: 35px;

    font-size: 14px;

    letter-spacing: 0.45em;

    color:
        rgba(190, 230, 255, 0.55);

}


/* =========================================================
   ANIMAZIONE BAGLIORE SFONDO
   ========================================================= */

@keyframes respirazione {

    0%,
    100% {

        transform:
            scale(0.9);

        opacity: 0.6;

    }

    50% {

        transform:
            scale(1.15);

        opacity: 1;

    }

}


/* =========================================================
   ENTRATA DEL TITOLO
   ========================================================= */

@keyframes entrata-titolo {

    from {

        opacity: 0;

        transform:
            translateY(-60px)
            scale(0.8);

        filter:
            blur(15px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0);

    }

}


/* =========================================================
   ESPLOSIONE FINALE NUMERO
   ========================================================= */

@keyframes esplosione-finale {

    0% {

        filter:
            brightness(1);

    }

    40% {

        filter:
            brightness(2);

        text-shadow:
            0 0 20px #00eaff,
            0 0 60px #00cfff,
            0 0 120px
            rgba(0, 150, 255, 0.8);

    }

    100% {

        filter:
            brightness(1);

    }

}


/* =========================================================
   ESPLOSIONE FINALE ANELLO
   ========================================================= */

@keyframes anello-finale {

    0% {

        stroke-width: 8;

    }

    40% {

        stroke-width: 13;

    }

    100% {

        stroke-width: 8;

    }

}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .contenitore {

        padding: 25px;

    }

    .linea {

        margin:
            25px auto
            35px;

    }

    .sottotitolo {

        font-size: 11px;

        letter-spacing: 0.30em;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .contenitore {

        padding: 15px;

    }

    .contatore-container {

        width: 82vw;

    }

    .linea {

        width: 130px;

        margin:
            20px auto
            25px;

    }

    .sottotitolo {

        font-size: 8px;

        letter-spacing: 0.20em;

    }

}


/* =========================================================
   SCHERMI MOLTO PICCOLI
   ========================================================= */

@media (max-height: 650px) {

    .contenitore {

        padding: 10px;

    }

    .titolo {

        font-size:
            clamp(65px, 13vh, 130px);

    }

    .linea {

        margin:
            15px auto
            20px;

    }

    .contatore-container {

        width:
            min(55vh, 420px);

    }

    .sottotitolo {

        margin-top: 20px;

    }

}