/* PreLogin — mosaico + HALLO! + botão + rodapé (Netflix/Disney style) */

.prelogin-page,
.login-page {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: #000;
    overflow: hidden;
}

/* ─── Mosaico rotacionado (4 linhas) ────────────────────────────────── */
.prelogin-mosaic {
    position: absolute;
    top: -100px; left: -100px;
    width: calc(100vw + 200px); height: calc(100vh + 200px);
    transform: rotate(-8deg);
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 1;
    opacity: 0.9;
}
.prelogin-mosaic-row {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
    height: 260px;
}
.prelogin-mosaic-ltr { animation: mosaicScrollLtr 60s linear infinite; }
.prelogin-mosaic-rtl { animation: mosaicScrollRtl 60s linear infinite; }
/* Tizen 5.0 (Chrome 63) NÃO suporta `aspect-ratio` (Chrome 88+).
 * Usar width/height fixos pra manter proporção 2:3 dos posters. */
.prelogin-mosaic-item {
    width: 173px;
    height: 260px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: cover;
    background: #1a1a1a;
}

@keyframes mosaicScrollLtr {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes mosaicScrollRtl {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ─── Overlay escuro pra legibilidade ────────────────────────────────── */
.prelogin-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.55) 0%,
        rgba(0,0,0,0.75) 55%,
        rgba(0,0,0,0.95) 100%);
    z-index: 2;
}

/* ─── Conteúdo central (só PreLogin — LoginPage tem .login-cards no lugar) ── */
.prelogin-center {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 40px;
}
.prelogin-hallo-logo {
    height: 180px;
    width: auto;
    margin-bottom: 24px;
}
/* Flavor Slim: SLIMPACK já vem cropado (888×423) — width define tamanho. */
.prelogin-logo-slim {
    height: auto;
    width: 1024px;      /* +60% vs 640 */
    max-width: 80vw;
    margin-bottom: 16px;
}
.prelogin-title {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
}
.prelogin-subtitle {
    color: rgba(255,255,255,0.8);
    font-size: 22px;
    text-align: center;
    margin-bottom: 40px;
    max-width: 900px;
}
.prelogin-btn {
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 3px;
    padding: 16px 80px;
    border-radius: 12px;
    min-width: 320px;
    outline: none;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
/* Foco sem outline quadrado — usa scale + glow azul (igual Android TV Full) */
.prelogin-btn.tv-focused,
.prelogin-btn:focus,
.prelogin-btn:focus-visible {
    background: var(--color-primary-hover);
    transform: scale(1.05);
    outline: none;
    box-shadow: 0 0 24px rgba(0, 183, 235, 0.6);
}

/* ─── Rodapé de subprodutos (persiste no login) ─────────────────────── */
.prelogin-footer {
    position: absolute;
    bottom: 32px;
    left: 0;
    width: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.prelogin-logos {
    display: flex;
    justify-content: space-evenly;  /* distribui uniforme sem overflow */
    align-items: center;
    width: 100%;
    padding: 0 40px;
    margin-bottom: 16px;
}
.prelogin-logo-item {
    /* Cada logo é 800×294 (aspect 2.72). 10 logos precisam caber em ~1840px
     * úteis do rodapé. Altura 58 → width natural ~158px × 10 = 1580px + gaps
     * → encaixa confortavelmente sem overlap. */
    height: 58px;
    width: auto;
    object-fit: contain;
}

/* ─── Slim: carrossel infinito ─────────────────────────────────────────
   Track duplicada (A+A) anima translateX(0 → -50%). Ao chegar em -50%,
   o segundo A tá exatamente onde o primeiro começou → loop sem salto.
   translate3d força camada GPU (Chrome 63 do Tizen só GPU-compõe assim). */
.prelogin-logos-marquee {
    display: block;
    padding: 0;
    overflow: hidden;
    width: 100%;
    /* Fade lateral pra transição suave nas bordas */
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
            mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.prelogin-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 32px;
    padding: 0 16px;
    white-space: nowrap;
    will-change: transform;
    animation: preloginMarquee 60s linear infinite;
    transform: translate3d(0, 0, 0);
}
.prelogin-marquee-track .prelogin-logo-item {
    flex: 0 0 auto;   /* impede que flex tente esticar/encolher os itens */
}
@keyframes preloginMarquee {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
.prelogin-caption {
    color: rgba(255,255,255,0.7);
    font-size: 18px;          /* +28% pra ler bem em TV (era 14px) */
    letter-spacing: 0.5px;
}