/* =====================================================
   GRAND TOMERO
   ===================================================== */


/* =====================================================
   VARIÁVEIS
   ===================================================== */

:root {

    --yellow: #f6c900;
    --yellow-light: #ffe45c;

    --black: #050505;
    --dark: #0b0b0b;

    --white: #e8e8e8;
    --gray: #a7a7a7;

    --mono: "JetBrains Mono", monospace;

    --metal: "Pirata One", serif;
}



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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}



html {

    scroll-behavior: smooth;

    background: var(--black);
}



body {

    margin: 0;

    background: var(--black);

    color: var(--white);

    font-family: var(--mono);

    overflow-x: hidden;
}



/* =====================================================
   HERO
   ===================================================== */

.hero {

    position: relative;

    width: 100%;

    min-height: 100vh;

    min-height: 100svh;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    background: var(--black);
}



/* =====================================================
   BACKGROUND
   ===================================================== */

.background {

    position: absolute;

    inset: 0;

    z-index: 0;


    background-image:

        url("assets/grand-tomero-bg.png");


    background-size:

        cover;


    background-position:

        center right;


    background-repeat:

        no-repeat;


    transform:

        scale(1.01);
}



/* =====================================================
   OVERLAY
   ===================================================== */

.overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;


    background:

        linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.96) 0%,

            rgba(0, 0, 0, 0.91) 18%,

            rgba(0, 0, 0, 0.72) 34%,

            rgba(0, 0, 0, 0.22) 57%,

            rgba(0, 0, 0, 0.03) 100%

        ),

        linear-gradient(

            180deg,

            rgba(0, 0, 0, 0.40) 0%,

            transparent 25%,

            transparent 75%,

            rgba(0, 0, 0, 0.40) 100%

        );
}



/* =====================================================
   HEADER
   ===================================================== */

.header {

    position: relative;

    z-index: 10;

    width: 100%;

    min-height: 100px;


    display: flex;

    justify-content: flex-end;

    align-items: center;


    padding:

        0 clamp(
            30px,
            5vw,
            90px
        );


    border-bottom:

        1px solid
        rgba(246, 201, 0, 0.55);


    background:

        linear-gradient(

            180deg,

            rgba(0, 0, 0, 0.82),

            rgba(0, 0, 0, 0.45)

        );
}



/* =====================================================
   NAVEGAÇÃO
   ===================================================== */

.navigation {

    display: flex;

    align-items: center;

    gap:

        clamp(
            20px,
            3vw,
            55px
        );
}



.nav-link {

    position: relative;

    text-decoration: none;

    color: #aaaaaa;


    font-size:

        clamp(
            0.75rem,
            1vw,
            1rem
        );


    font-weight: 600;

    letter-spacing: 1px;


    transition:

        color 0.25s ease,

        text-shadow 0.25s ease,

        transform 0.25s ease;
}



.nav-link span {

    color: #796918;

    transition:

        color 0.25s ease;
}



.nav-link:hover {

    color: var(--yellow);

    transform:

        translateY(-2px);


    text-shadow:

        0 0 15px
        rgba(246, 201, 0, 0.5);
}



.nav-link:hover span {

    color: var(--yellow);
}



.nav-link.active {

    color: var(--yellow);


    text-shadow:

        0 0 15px
        rgba(246, 201, 0, 0.35);
}



.nav-link.active span {

    color: var(--yellow);
}



/* =====================================================
   CONTEÚDO PRINCIPAL
   ===================================================== */

.content {
    position: relative;

    z-index: 5;

    flex: 1;

    width: 100%;
    min-height: 0;

    display: flex;

    flex-direction: column;

    /*
       Em vez de prender o conteúdo
       totalmente no fundo da tela,
       controlamos a posição com padding.
    */

    justify-content: flex-end;

    padding:
        0
        22px
        42px;

    /*
       Move todo o bloco de texto
       um pouco para cima.
    */

    transform:
        translateY(-50px);

    animation:
        contentEntranceMobile
        1s
        ease
        forwards;
}



/* =====================================================
   WHOAMI
   ===================================================== */

.terminal-title {

    display: flex;

    align-items: center;

    gap: 10px;


    margin-bottom: 28px;


    color: var(--yellow);


    font-size:

        clamp(
            0.85rem,
            1.1vw,
            1.1rem
        );


    font-weight: 600;

    letter-spacing: 1px;
}



.prompt {

    color: var(--yellow);

    font-weight: 700;


    text-shadow:

        0 0 10px
        rgba(246, 201, 0, 0.6);
}



/* =====================================================
   GRAND TOMERO
   ===================================================== */

h1 {

    position: relative;

    display: inline-block;

    width: fit-content;


    font-family: var(--metal);


    color: var(--yellow);


    font-size:

        clamp(
            4rem,
            7.4vw,
            8.2rem
        );


    font-weight: 400;

    line-height: 0.88;

    white-space: nowrap;

    letter-spacing: 4px;

    margin-bottom: 28px;


    text-shadow:

        0 0 8px
        rgba(246, 201, 0, 0.15),

        0 4px 20px
        rgba(0, 0, 0, 0.8);
}



/* =====================================================
   GLITCH
   ===================================================== */

.glitch {

    animation:

        glitch-main
        7s
        infinite;
}



.glitch::before,
.glitch::after {

    content:

        attr(data-text);


    position: absolute;

    top: 0;

    left: 0;


    width: 100%;

    height: 100%;


    font-family: inherit;

    color: var(--yellow);


    pointer-events: none;

    opacity: 0;
}



.glitch::before {

    text-shadow:

        -3px 0 #ff004c;


    animation:

        glitch-top
        7s
        infinite;
}



.glitch::after {

    text-shadow:

        3px 0 #00eaff;


    animation:

        glitch-bottom
        7s
        infinite;
}



/* =====================================================
   GLITCH PRINCIPAL
   ===================================================== */

@keyframes glitch-main {

    0%,
    87%,
    91%,
    94%,
    100% {

        transform:

            translate(0);
    }


    88% {

        transform:

            translate(-3px, 1px);
    }


    89% {

        transform:

            translate(4px, -1px);
    }


    90% {

        transform:

            translate(-2px, 0);
    }


    92% {

        transform:

            translate(3px, 1px);
    }


    93% {

        transform:

            translate(-4px, -1px);
    }

}



/* =====================================================
   GLITCH SUPERIOR
   ===================================================== */

@keyframes glitch-top {

    0%,
    87%,
    94%,
    100% {

        opacity: 0;
    }


    88% {

        opacity: 0.8;


        transform:

            translate(-5px, -2px);


        clip-path:

            inset(
                10% 0
                65% 0
            );
    }


    89% {

        opacity: 0.6;


        transform:

            translate(5px, 1px);


        clip-path:

            inset(
                45% 0
                35% 0
            );
    }


    90% {

        opacity: 0;
    }


    91% {

        opacity: 0.7;


        transform:

            translate(-3px, 0);


        clip-path:

            inset(
                70% 0
                10% 0
            );
    }


    92% {

        opacity: 0;
    }

}



/* =====================================================
   GLITCH INFERIOR
   ===================================================== */

@keyframes glitch-bottom {

    0%,
    87%,
    94%,
    100% {

        opacity: 0;
    }


    88% {

        opacity: 0.7;


        transform:

            translate(5px, 2px);


        clip-path:

            inset(
                65% 0
                10% 0
            );
    }


    89% {

        opacity: 0;
    }


    90% {

        opacity: 0.8;


        transform:

            translate(-5px, 1px);


        clip-path:

            inset(
                30% 0
                50% 0
            );
    }


    91% {

        opacity: 0.5;


        transform:

            translate(4px, -1px);


        clip-path:

            inset(
                55% 0
                25% 0
            );
    }


    92% {

        opacity: 0;
    }

}



/* =====================================================
   ROLES
   ===================================================== */

.roles {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;


    color: #d4d4d4;


    font-size:

        clamp(
            1rem,
            1.55vw,
            1.6rem
        );


    letter-spacing: 1px;


    margin-bottom: 45px;
}



.slash {

    color: var(--yellow);

    font-weight: bold;
}



/* =====================================================
   FRASE
   ===================================================== */

blockquote {

    position: relative;


    display: flex;

    flex-direction: column;


    gap: 7px;


    max-width: 640px;


    padding-left: 27px;


    color: var(--yellow);


    font-size:

        clamp(
            0.85rem,
            1.15vw,
            1.15rem
        );


    line-height: 1.5;
}



blockquote::before {

    content: "";


    position: absolute;


    left: 0;

    top: 0;


    width: 4px;

    height: 100%;


    background:

        var(--yellow);


    box-shadow:

        0 0 15px
        rgba(246, 201, 0, 0.35);
}



blockquote span {

    display: block;
}



/* =====================================================
   CURSOR
   ===================================================== */

.cursor {

    color: var(--yellow);


    animation:

        cursorBlink
        0.8s
        infinite;
}



@keyframes cursorBlink {

    0%,
    49% {

        opacity: 1;
    }


    50%,
    100% {

        opacity: 0;
    }

}



/* =====================================================
   ENTRADA
   ===================================================== */

@keyframes contentEntrance {

    from {

        opacity: 0;


        transform:

            translateX(-30px);
    }


    to {

        opacity: 1;


        transform:

            translateX(0);
    }

}



/* =====================================================
   LINHA INFERIOR
   ===================================================== */

.bottom-line {

    position: absolute;


    z-index: 5;


    bottom: 0;

    left: 0;


    width: 100%;

    height: 2px;


    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(246, 201, 0, 0.7),

            transparent

        );
}



/* =====================================================
   UNDER CONSTRUCTION
   ===================================================== */

.construction {

    position: relative;


    width: 100%;


    min-height: 100vh;

    min-height: 100svh;


    display: flex;


    justify-content: center;

    align-items: center;


    padding:

        80px 30px;


    background:

        radial-gradient(

            circle at center,

            #111111 0%,

            #080808 45%,

            #030303 100%

        );


    border-top:

        1px solid
        rgba(246, 201, 0, 0.25);


    scroll-margin-top: 0;


    overflow: hidden;
}



/* EFEITO DE SCANLINES */

.construction::before {

    content: "";


    position: absolute;

    inset: 0;


    pointer-events: none;


    opacity: 0.035;


    background-image:

        linear-gradient(

            rgba(255, 255, 255, 0.5)
            1px,

            transparent
            1px

        );


    background-size:

        100% 4px;
}



/* =====================================================
   CONTAINER
   ===================================================== */

.construction-container {

    position: relative;

    z-index: 2;


    width: 100%;

    max-width: 800px;


    text-align: center;
}



/* =====================================================
   SYSTEM STATUS
   ===================================================== */

.construction-terminal {

    display: flex;


    justify-content: center;

    align-items: center;


    gap: 10px;


    color: var(--yellow);


    font-size: 0.9rem;


    font-weight: 600;


    letter-spacing: 2px;


    margin-bottom: 35px;
}



/* =====================================================
   UNDER CONSTRUCTION TITLE
   ===================================================== */

.construction h2 {

    font-family: var(--mono);


    color: var(--yellow);


    font-size:

        clamp(
            2rem,
            5vw,
            4rem
        );


    letter-spacing: 4px;


    margin-bottom: 25px;


    text-shadow:

        0 0 20px
        rgba(246, 201, 0, 0.15);
}



.construction-cursor {

    animation:

        cursorBlink
        0.8s
        infinite;
}



/* =====================================================
   DESCRIPTION
   ===================================================== */

.construction-description {

    color: #888888;


    font-size: 1rem;


    margin-bottom: 60px;
}



/* =====================================================
   STATUS
   ===================================================== */

.construction-status {

    width: 100%;


    max-width: 500px;


    margin:

        0 auto 60px;


    border-top:

        1px solid
        rgba(246, 201, 0, 0.18);


    border-bottom:

        1px solid
        rgba(246, 201, 0, 0.18);


    padding:

        20px 0;
}



.status-item {

    display: flex;


    justify-content: space-between;

    align-items: center;


    padding:

        14px 20px;


    color: #aaaaaa;


    font-size: 0.9rem;


    letter-spacing: 2px;


    transition:

        background 0.25s ease,

        color 0.25s ease;
}



.status-item:hover {

    background:

        rgba(246, 201, 0, 0.035);


    color: #dddddd;
}



.status-locked {

    color: #5f5f5f;


    font-size: 0.8rem;
}



/* =====================================================
   FOOTER
   ===================================================== */

.construction-footer {

    color: var(--yellow);


    font-size: 0.8rem;


    letter-spacing: 3px;


    opacity: 0.65;
}



/* =====================================================
   TABLETS
   ===================================================== */

@media (max-width: 1100px) {

    .header {

        min-height: 85px;


        padding:

            0 35px;
    }


    .navigation {

        gap: 25px;
    }


    .content {

        width: 55vw;


        padding-left: 45px;
    }


    h1 {

        font-size:

            clamp(
                4rem,
                8vw,
                6.5rem
            );
    }


    .roles {

        font-size: 1.1rem;
    }

}



/* =====================================================
   CELULARES
   ===================================================== */

/* =====================================================
   MOBILE — PRIMEIRA TELA COMPLETA
   ===================================================== */

@media (max-width: 768px) {

    /* =========================
       HERO
       ========================= */

    .hero {
        position: relative;

        width: 100%;
        height: 100svh;
        min-height: 100svh;

        display: flex;
        flex-direction: column;

        overflow: hidden;

        background: #050505;
    }


    /* =========================
       IMAGEM
       ========================= */

    .background {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 62%;

        background-size: cover;

        /*
           Controla a posição do personagem.
           Aumente para mover a imagem
           mais para a esquerda.
        */

        background-position: 64% center;

        background-repeat: no-repeat;

        transform: none;

        z-index: 0;
    }


    /* =========================
       GRADIENTE
       ========================= */

    .overlay {
        position: absolute;

        inset: 0;

        z-index: 1;

        pointer-events: none;

        background:

            linear-gradient(
                180deg,

                rgba(0,0,0,0.20) 0%,

                rgba(0,0,0,0.05) 20%,

                rgba(0,0,0,0.08) 35%,

                rgba(5,5,5,0.45) 48%,

                rgba(5,5,5,0.90) 58%,

                #050505 68%,

                #050505 100%
            );
    }


    /* =========================
       HEADER
       ========================= */

    .header {
        position: relative;

        z-index: 10;

        width: 100%;
        height: 56px;
        min-height: 56px;

        display: flex;

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

        padding: 0 10px;

        background:

            linear-gradient(
                180deg,
                rgba(0,0,0,0.90),
                rgba(0,0,0,0.30)
            );

        border-bottom:
            1px solid rgba(246,201,0,0.35);

        overflow: hidden;
    }


    /* =========================
       MENU
       ========================= */

    .navigation {
        width: 100%;

        display: flex;

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

        gap: 3px;
    }


    .nav-link {
        flex: 1;

        text-align: center;

        font-size:
            clamp(
                0.52rem,
                2.2vw,
                0.72rem
            );

        letter-spacing: 0;

        white-space: nowrap;
    }


    /* =========================
       CONTEÚDO
       ========================= */

    .content {
        position: relative;

        z-index: 5;

        flex: 1;

        width: 100%;
        min-height: 0;

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

        padding:
            0
            22px
            26px;

        animation:
            contentEntranceMobile
            1s
            ease
            forwards;
    }


    /* =========================
       WHOAMI
       ========================= */

    .terminal-title {
        margin-bottom: 10px;

        gap: 7px;

        font-size:
            clamp(
                0.65rem,
                2.5vw,
                0.8rem
            );

        letter-spacing: 1px;
    }


    /* =========================
       GRAND TOMERO
       ========================= */

    h1 {
        width: fit-content;

        max-width: 100%;

        margin-bottom: 12px;

        font-size:
            clamp(
                2.9rem,
                14vw,
                5rem
            );

        line-height: 0.82;

        letter-spacing: 1px;

        white-space: nowrap;
    }


    /* =========================
       MUSICIAN / POKER / HACKER
       ========================= */

    .roles {
        display: flex;

        flex-wrap: nowrap;

        gap: 6px;

        margin-bottom: 17px;

        font-size:
            clamp(
                0.65rem,
                2.7vw,
                0.9rem
            );

        line-height: 1.3;

        letter-spacing: 0;

        white-space: nowrap;
    }


    /* =========================
       FRASE
       ========================= */

    blockquote {
        width: 100%;

        max-width: 100%;

        gap: 2px;

        padding-left: 13px;

        font-size:
            clamp(
                0.62rem,
                2.5vw,
                0.82rem
            );

        line-height: 1.4;
    }


    blockquote::before {
        width: 2px;
    }


    /* =========================
       UNDER CONSTRUCTION
       ========================= */

    .construction {
        width: 100%;

        height: 100svh;
        min-height: 100svh;

        padding:
            40px
            22px;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .construction-container {
        width: 100%;

        max-width: 100%;
    }


    .construction-terminal {
        margin-bottom: 20px;

        font-size: 0.72rem;
    }


    .construction h2 {
        margin-bottom: 18px;

        font-size:
            clamp(
                1.6rem,
                7vw,
                2.8rem
            );

        letter-spacing: 1px;
    }


    .construction-description {
        margin-bottom: 30px;

        font-size: 0.8rem;
    }


    .construction-status {
        width: 100%;

        margin-bottom: 30px;

        padding:
            12px 0;
    }


    .status-item {
        padding:
            11px 5px;

        font-size: 0.75rem;
    }


    .status-locked {
        font-size: 0.68rem;
    }


    .construction-footer {
        font-size: 0.7rem;
    }


    /* =========================
       ANIMAÇÃO
       ========================= */

    @keyframes contentEntranceMobile {

    from {
        opacity: 0;

        transform:
            translateY(-50px);
    }

    to {
        opacity: 1;

        transform:
            translateY(-70px);
    }
}
}



/* =====================================================
   CELULARES PEQUENOS
   ===================================================== */

@media (max-width: 480px) {

    /* MENU */

    .header {
        height: 52px;

        min-height: 52px;

        padding:
            0 6px;
    }


    .navigation {
        gap: 1px;
    }


    .nav-link {
        font-size:
            clamp(
                0.48rem,
                2.25vw,
                0.62rem
            );
    }


    /*
       Em telas pequenas retiramos
       os colchetes para ganhar espaço.
    */

    .nav-link span {
        display: none;
    }


    /* =========================
       IMAGEM
       ========================= */

    .background {
        height: 60%;

        background-position:
            64% center;
    }


    /* =========================
       CONTEÚDO
       ========================= */

    .content {
        padding:
            0
            18px
            22px;
    }


    .terminal-title {
        margin-bottom: 8px;

        font-size: 0.65rem;
    }


    h1 {
        margin-bottom: 10px;

        font-size:
            clamp(
                2.7rem,
                14.5vw,
                4rem
            );

        letter-spacing: 0;
    }


    .roles {
        gap: 5px;

        margin-bottom: 14px;

        font-size:
            clamp(
                0.59rem,
                2.55vw,
                0.75rem
            );
    }


    blockquote {
        padding-left: 11px;

        font-size:
            clamp(
                0.58rem,
                2.4vw,
                0.72rem
            );

        line-height: 1.35;
    }

}



/* =====================================================
   CELULARES BAIXOS
   Ex: aparelhos com pouca altura útil
   ===================================================== */

@media (max-width: 768px) and (max-height: 700px) {

    .header {
        height: 48px;

        min-height: 48px;
    }


    .background {
        height: 57%;
    }


    .content {
        padding-bottom: 15px;
    }


    .terminal-title {
        margin-bottom: 6px;

        font-size: 0.6rem;
    }


    h1 {
        margin-bottom: 7px;

        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }


    .roles {
        margin-bottom: 9px;

        font-size: 0.6rem;
    }


    blockquote {
        font-size: 0.57rem;

        line-height: 1.25;
    }

}



/* =====================================================
   CELULARES MUITO ESTREITOS
   ===================================================== */

@media (max-width: 360px) {

    .nav-link {
        font-size: 0.46rem;
    }


    .content {
        padding-left: 14px;

        padding-right: 14px;
    }


    h1 {
        font-size: 2.55rem;
    }


    .roles {
        font-size: 0.55rem;

        gap: 4px;
    }


    blockquote {
        font-size: 0.54rem;
    }

}