/* ============================================================
   CENA 6

   Este arquivo contém apenas os estilos específicos da cena 6
   e seus ajustes responsivos.
   ============================================================ */


/* ============================================================
   CENA 6 — TERMINAL
   ============================================================ */

#scene-6 {
    padding: 8vw 10vw;
    flex-direction: column;
    justify-content: center;
}

.terminal-container {
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1.8;
    color: #00ff66;
    max-width: 800px;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.terminal-container .cmd {
    color: #ffffff;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.terminal-container .quote {
    color: #b0b0b0;
    margin-top: 1rem;
    display: block;

    border-left: 2px solid #555;
    padding-left: 1rem;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.capabilities {
    margin-top: 3.5rem;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 1.6rem 3rem;

    max-width: 900px;

    padding-top: 2rem;

    border-top: 1px solid rgba(0, 255, 102, 0.15);
}

.capabilities > div {
    display: flex;
    flex-direction: column;

    gap: 0.25rem;

    font-family: var(--font-mono);
    font-size: 0.72rem;

    letter-spacing: 0.08em;

    color: #00ff66;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.capabilities > div > span {
    color: #8a8a8a;

    font-size: 0.62rem;

    letter-spacing: 0.1em;

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ============================================================
   MOBILE — LAYOUT CINEMÁTICO
   ============================================================ */

@media (max-width: 768px) {

    #scene-6 {
        box-sizing: border-box;

        width: 100%;

        /*
         * A cena ocupa pelo menos a tela inteira,
         * mas pode crescer caso o conteúdo precise.
         */
        min-height: 100dvh;
        height: auto;

        padding:
            max(54px, calc(40px + env(safe-area-inset-top)))
            18px
            max(50px, calc(30px + env(safe-area-inset-bottom)));

        flex-direction: column;

        /*
         * Não centralizamos verticalmente no mobile.
         * Isso evita que o conteúdo superior/inferior seja
         * cortado quando a altura da tela for pequena.
         */
        justify-content: flex-start;

        /*
         * Horizontal nunca deve gerar scroll.
         * Vertical pode crescer normalmente.
         */
        overflow-x: hidden;
        overflow-y: visible;
    }

    .terminal-container {
        width: 100%;
        max-width: 100%;

        /*
         * Mantém uma margem superior cinematográfica,
         * mas sem depender de uma altura fixa.
         */
        margin-top: clamp(5vh, 10vh, 10vh);

        font-size: clamp(0.56rem, 2.7vw, 0.82rem);

        line-height: 1.45;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .terminal-container .quote {
        margin-top: 0.6rem;
        padding-left: 0.65rem;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .capabilities {
        width: 100%;
        max-width: 100%;

        /*
         * 2 colunas no celular.
         * minmax(0, 1fr) impede uma célula de estourar
         * a largura por causa de texto comprido.
         */
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 0.8rem 0.8rem;

        margin-top: 1.4rem;
        padding-top: 0.9rem;

        border-top: 1px solid rgba(0, 255, 102, 0.15);
    }

    .capabilities > div {
        min-width: 0;
        max-width: 100%;

        font-size: clamp(0.44rem, 1.8vw, 0.56rem);

        line-height: 1.25;

        letter-spacing: 0.04em;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .capabilities > div > span {
        min-width: 0;
        max-width: 100%;

        font-size: clamp(0.38rem, 1.55vw, 0.48rem);

        line-height: 1.2;

        overflow-wrap: anywhere;
        word-break: break-word;
    }
}


/* ============================================================
   TELAS MUITO PEQUENAS
   ============================================================ */

@media (max-width: 380px) {

    #scene-6 {
        padding-left: 14px;
        padding-right: 14px;
    }

    .terminal-container {
        margin-top: 6vh;

        font-size: 0.52rem;
        line-height: 1.35;
    }

    .capabilities {
        gap: 0.55rem 0.55rem;

        margin-top: 1rem;
        padding-top: 0.7rem;
    }

    .capabilities > div {
        font-size: 0.4rem;
        line-height: 1.18;
    }

    .capabilities > div > span {
        font-size: 0.35rem;
        line-height: 1.12;
    }
}


/* ============================================================
   CELULAR DEITADO — LANDSCAPE
   ============================================================ */

@media (max-width: 900px) and (orientation: landscape) {

    #scene-6 {
        box-sizing: border-box;

        min-height: 100dvh;
        height: auto;

        padding:
            max(30px, calc(24px + env(safe-area-inset-top)))
            6vw
            max(24px, calc(18px + env(safe-area-inset-bottom)));

        flex-direction: column;

        justify-content: flex-start;

        overflow-x: hidden;
        overflow-y: visible;
    }

    .terminal-container {
        width: 100%;
        max-width: 100%;

        margin-top: 5vh;

        font-size: clamp(0.46rem, 1.4vw, 0.68rem);

        line-height: 1.3;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .capabilities {
        width: 100%;
        max-width: 100%;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 0.6rem 0.8rem;

        margin-top: 1rem;
        padding-top: 0.7rem;
    }

    .capabilities > div {
        min-width: 0;

        font-size: clamp(0.38rem, 0.7vw, 0.48rem);

        line-height: 1.2;
    }

    .capabilities > div > span {
        min-width: 0;

        font-size: clamp(0.34rem, 0.6vw, 0.42rem);

        line-height: 1.12;
    }
}


/* ============================================================
   CELULAR DEITADO — ALTURA MUITO BAIXA
   ============================================================ */

@media (max-width: 900px)
and (orientation: landscape)
and (max-height: 430px) {

    #scene-6 {
        padding-top: 20px;
        padding-bottom: 18px;
    }

    .terminal-container {
        margin-top: 2vh;

        font-size: clamp(0.4rem, 1vw, 0.52rem);

        line-height: 1.2;
    }

    .capabilities {
        margin-top: 0.65rem;
        padding-top: 0.45rem;

        gap: 0.4rem 0.6rem;
    }

    .capabilities > div {
        font-size: clamp(0.34rem, 0.65vw, 0.42rem);

        line-height: 1.15;
    }

    .capabilities > div > span {
        font-size: clamp(0.3rem, 0.55vw, 0.36rem);

        line-height: 1.1;
    }
}


/* ============================================================
   CELULARES MUITO PEQUENOS — LANDSCAPE
   ============================================================ */

@media (max-width: 700px)
and (orientation: landscape)
and (max-height: 360px) {

    #scene-6 {
        padding:
            18px
            14px
            14px;

        justify-content: flex-start;
    }

    .terminal-container {
        max-width: 100%;

        margin-top: 2vh;

        font-size: clamp(0.38rem, 1vw, 0.48rem);

        line-height: 1.16;
    }

    .capabilities {
        margin-top: 0.35rem;
        padding-top: 0.3rem;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 0.22rem 0.4rem;
    }

    .capabilities > div {
        min-width: 0;

        font-size: clamp(0.34rem, 0.7vw, 0.42rem);

        line-height: 1.1;

        letter-spacing: 0.025em;
    }

    .capabilities > div > span {
        font-size: clamp(0.31rem, 0.6vw, 0.37rem);

        line-height: 1.05;
    }
}