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

/* ============================================================
   CENA 5 — FILOSOFIA
   ============================================================ */
#scene-5 {
    /*
     * Antes: padding: 8vw 10vw
     * Agora o topo tem um valor fixo confortável (não proporcional
     * ao vw), e o fundo tem folga grande para o conteúdo subir.
     */
    padding: 8vh 10vw 16vh;

    flex-direction: column;

    /*
     * Antes: safe center
     * Agora: conteúdo começa no topo útil (logo abaixo do label).
     * O padding-top acima define o respiro.
     */
    justify-content: flex-start;

    align-items: center;
    text-align: center;
}

#scene-5 h2 {
    /*
     * Antes: clamp(2.6rem, 5vw, 5rem)
     * Reduzido em ~15% para um título equilibrado.
     */
    font-size: clamp(2.2rem, 4.25vw, 4.25rem);
    font-weight: 500;
    margin-bottom: 1.35rem;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#scene-5 p {
    /*
     * Antes: 1.1rem → agora 0.94rem (~15% menor)
     */
    font-size: 0.94rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 660px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.code-snippet {
    /*
     * Antes: 2.4rem margin / 0.72rem font / line-height 1.85
     * Reduzido ~15% em todas as dimensões.
     */
    margin-top: 2rem;
    text-align: left;
    border-left: 2px solid var(--text-color);
    padding-left: 1.35rem;
    line-height: 1.75;
    font-size: 0.61rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================
   MOBILE — LAYOUT CINEMÁTICO
   ============================================================ */
@media (max-width: 768px) {

    /* ---------------- CENA 5 ---------------- */
        #scene-5 {
            padding:
                calc(58px + env(safe-area-inset-top))
                20px
                calc(26px + env(safe-area-inset-bottom));
            flex-direction: column;

            /*
             * Antes: safe center
             * Agora: flex-start. No mobile o conteúdo já é apertado,
             * então começar no topo (abaixo do label) é o certo.
             */
            justify-content: flex-start;
        }

    #scene-5 .label { top: max(16px, env(safe-area-inset-top)); }

    #scene-5 h2 {
            font-size: clamp(3rem, 14vw, 5rem);
            line-height: 0.9;
            margin-bottom: 1.2rem;
            letter-spacing: -0.045em;
        }

    #scene-5 p {
            max-width: 480px;
            font-size: clamp(0.82rem, 3.3vw, 1rem);
            line-height: 1.48;
        }

    .code-snippet {
            max-width: 92vw;
            margin-top: 1.2rem;
            padding-left: 1rem;
            font-size: 0.56rem;
            line-height: 1.7;
        }
}

/* ============================================================
   TELAS MUITO PEQUENAS
   ============================================================ */
@media (max-width: 380px) {

    #scene-5 h2 { font-size: 2.8rem; }

    #scene-5 p  { font-size: 0.76rem; }

    .code-snippet { font-size: 0.5rem; }
}

/* ============================================================
   CELULAR DEITADO — LANDSCAPE
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {

    /* ---------------- CENA 5 ---------------- */
        #scene-5 {
            padding: 52px 6vw 18px;
            justify-content: flex-start;
            align-items: center;
            text-align: center;
        }

    #scene-5 h2 {
            font-size: clamp(1.6rem, 5vw, 2.8rem);
            line-height: 0.92;
            margin-bottom: 0.7rem;
            letter-spacing: -0.04em;
        }

    #scene-5 p {
            max-width: 760px;
            font-size: clamp(0.55rem, 1.3vw, 0.7rem);
            line-height: 1.4;
        }

    .code-snippet {
            max-width: 620px;
            margin-top: 0.85rem;
            padding-left: 0.9rem;
            font-size: 0.45rem;
            line-height: 1.5;
        }
}

/* ============================================================
   CELULAR DEITADO — ALTURA MUITO BAIXA
   ============================================================ */
@media (max-width: 900px)
and (orientation: landscape)
and (max-height: 430px) {

    #scene-5 {
        padding-top: 42px;
        padding-bottom: 12px;
        justify-content: flex-start;
    }

    #scene-5 h2 {
            font-size: clamp(1.4rem, 4.5vw, 2.4rem);
            line-height: 0.9;
            margin-bottom: 0.55rem;
        }

    #scene-5 p {
            font-size: 0.52rem;
            line-height: 1.3;
        }

    .code-snippet {
            margin-top: 0.55rem;
            font-size: clamp(0.42rem, 0.85vw, 0.52rem);
            line-height: 1.35;
        }
}

/* ============================================================
   CELULARES MUITO PEQUENOS — LANDSCAPE
   ============================================================ */
@media (max-width: 700px)
and (orientation: landscape)
and (max-height: 360px) {

    /* CENA 5 */
        #scene-5 {
            padding: 34px 14px 8px;
            justify-content: flex-start;
        }

    #scene-5 h2 {
            font-size: clamp(1.15rem, 4vw, 2rem);
            line-height: 0.88;
            margin-bottom: 0.4rem;
        }

    #scene-5 p {
            max-width: 92vw;
            font-size: clamp(0.42rem, 0.9vw, 0.55rem);
            line-height: 1.28;
        }

    .code-snippet {
            margin-top: 0.4rem;
            padding-left: 0.5rem;
            font-size: clamp(0.4rem, 0.75vw, 0.5rem);
            line-height: 1.32;
        }
}