/* ============================================================
   CENA 1 — INTRO
   Mobile é padrão. Desktop só quando NÃO é device móvel.
   Isso faz o "modo computador" do celular continuar mobile.
   ============================================================ */

/* ------------------------------------------------------------
   PADRÃO — MOBILE (qualquer orientação)
   ------------------------------------------------------------ */
#scene-1 {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding:
        calc(48px + env(safe-area-inset-top))
        20px
        calc(26px + env(safe-area-inset-bottom));
    gap: 12px;
}

#scene-1 .intro-text {
    width: 100%;
    max-width: 540px;
    margin-top: 7vh;
}

.intro-text h1 {
    font-size: clamp(2.9rem, 13vw, 4.8rem);
    line-height: 0.96;
    letter-spacing: -0.045em;
    margin-bottom: 1.15rem;
    perspective: 1200px;
    white-space: pre-line;
}

.intro-text p {
    max-width: 440px;
    margin: 0 auto;
    font-size: clamp(0.9rem, 3.8vw, 1.02rem);
    line-height: 1.5;
    color: var(--text-muted);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.intro-text h1 {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#video-canvas-container {
    width: min(72vw, 290px);
    height: min(43vh, 300px);
    min-height: 220px;
    position: relative;
    margin-top: 4px;
}

#video-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    font-size: 0.57rem;
    white-space: nowrap;
    bottom: 40px;
}

/* Flip letters — iguais em todas as versões */
.flip-letter {
    display: inline-block;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: visible;
    will-change: transform;
    animation: flipLetter 8s infinite;
}

.flip-space {
    display: inline-block;
    width: 0.28em;
}

@keyframes flipLetter {
    0%, 92% { transform: rotateX(0deg); }
    100%    { transform: rotateX(-360deg); }
}

/* ------------------------------------------------------------
   CELULAR PEQUENO — retrato (≤380px)
   ------------------------------------------------------------ */
@media (max-width: 380px) {
    #scene-1 .intro-text { margin-top: 5vh; }
    .intro-text h1 { font-size: 2.65rem; }

    #video-canvas-container {
        min-height: 190px;
        height: 34vh;
    }
}

/* ------------------------------------------------------------
   CELULAR DEITADO — landscape
   (pega por classe JS pra funcionar em modo computador também)
   ------------------------------------------------------------ */
html.is-mobile-device.is-landscape #scene-1 {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4vw;
    padding:
        42px 6vw max(18px, env(safe-area-inset-bottom));
    text-align: left;
}

html.is-mobile-device.is-landscape #scene-1 .intro-text {
    width: 55%;
    max-width: 620px;
    margin: 0;
}

html.is-mobile-device.is-landscape .intro-text h1 {
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 0.94;
    letter-spacing: -0.045em;
    margin-bottom: 1rem;
}

html.is-mobile-device.is-landscape .intro-text p {
    max-width: 520px;
    margin: 0;
    font-size: clamp(0.72rem, 2.2vw, 0.98rem);
    line-height: 1.5;
}

html.is-mobile-device.is-landscape #video-canvas-container {
    flex-shrink: 0;
    width: min(34vw, 280px);
    height: min(76dvh, 340px);
    min-height: 150px;
    max-height: 76dvh;
    margin: 0;
}

html.is-mobile-device.is-landscape .scroll-hint {
    left: 20px;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: none;
    font-size: 0.5rem;
}

/* Fallback: desktop com janela baixa e horizontal */
@media (orientation: landscape) and (max-height: 560px) {
    #scene-1 {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 4vw;
        padding: 42px 6vw max(18px, env(safe-area-inset-bottom));
        text-align: left;
    }
    #scene-1 .intro-text { width: 55%; max-width: 620px; margin: 0; }
    .intro-text h1 { font-size: clamp(2.5rem, 8vw, 5rem); line-height: 0.94; margin-bottom: 1rem; }
    .intro-text p { max-width: 520px; margin: 0; font-size: clamp(0.72rem, 2.2vw, 0.98rem); line-height: 1.5; }
    #video-canvas-container { flex-shrink: 0; width: min(34vw, 280px); height: min(76dvh, 340px); min-height: 150px; max-height: 76dvh; margin: 0; }
    .scroll-hint { left: 20px; bottom: max(12px, env(safe-area-inset-bottom)); transform: none; font-size: 0.5rem; }
}

/* ------------------------------------------------------------
   DESKTOP REAL — só quando NÃO é device móvel
   ------------------------------------------------------------ */
@media (min-width: 901px) {
    html:not(.is-mobile-device) #scene-1 {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 10vw;
        text-align: left;
    }

    html:not(.is-mobile-device) #scene-1 .intro-text {
        max-width: 560px;
        margin-top: 0;
    }

    html:not(.is-mobile-device) .intro-text h1 {
        font-size: clamp(3rem, 6vw, 6rem);
        line-height: 1.02;
        letter-spacing: -0.03em;
        margin-bottom: 2rem;
    }

    html:not(.is-mobile-device) .intro-text p {
        font-size: 1.15rem;
        line-height: 1.7;
        max-width: 520px;
        margin: 0;
    }

    html:not(.is-mobile-device) #video-canvas-container {
        width: 400px;
        height: 600px;
        margin: 0;
    }

    html:not(.is-mobile-device) .scroll-hint {
        position: absolute;
        left: 10vw;
        bottom: 40px;
        transform: none;
    }
}