/*
 * splash-screen.css — Tela de abertura do app.
 *
 * Markup: mobile-view/includes/splash-screen.php
 * JS:     mobile-view/dist/script/splash-screen.js
 */

.pharus-splash {
    position: fixed;
    inset: 0;
    /* Acima do pageLoader (9999999999): a tela de abertura vem ANTES dele,
       senão o loader apareceria por cima do vídeo. */
    z-index: 10000000000;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Comeca invisivel: o fade-in e' ligado pelo JS (classe is-entrando) no
       frame seguinte ao abrir. Sem isto a tela aparecia de supetao por cima
       do app. */
    opacity: 0;
    transition: opacity 0.35s ease;
}
.pharus-splash[hidden] { display: none; }

.pharus-splash.is-entrando { opacity: 1; }

/* Saida mais longa que a entrada (0.55s): e' ela que disfarca o ultimo
   quadro congelado do video. Com os mesmos 0.35s o congelamento ainda
   aparecia antes do fade terminar. */
.pharus-splash.is-saindo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease;
}

/* O conteudo escurece junto, um pouco antes do fundo — o quadro parado
   some primeiro e o que resta e' so' o preto saindo. */
.pharus-splash.is-saindo .pharus-splash__media {
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 0.4s ease, transform 0.55s ease;
}
.pharus-splash__media {
    transition: opacity 0.4s ease, transform 0.55s ease;
}
/* O Pular sai primeiro: ficar visivel sobre a tela esvanecendo chama
   atencao para o fim da animacao. */
.pharus-splash.is-saindo .pharus-splash__pular {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pharus-splash__media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Enquadramento escolhido no painel (data-ajuste, posto pelo JS).
   `cover` preenche a tela cortando as bordas — bom para vídeo de fundo.
   `contain` mostra o arquivo inteiro com barras — necessário quando a arte
   tem texto nas bordas, que o cover cortaria.
   Default cover: vídeo feito para o app já vem em 9:16 e preenche sem perda. */
.pharus-splash__media > video,
.pharus-splash__media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pharus-splash[data-ajuste="contain"] .pharus-splash__media > video,
.pharus-splash[data-ajuste="contain"] .pharus-splash__media > img {
    object-fit: contain;
}

/* ── Pular ─────────────────────────────────────────────────────────────── */
.pharus-splash__pular {
    position: absolute;
    /* safe-area: no iPhone o canto de cima fica sob o notch/status bar. */
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    /* Alvo de toque confortável mesmo com o texto curto. */
    min-height: 40px;
    animation: pharusSplashPular 0.25s ease;
}
.pharus-splash__pular[hidden] { display: none; }
.pharus-splash__pular i { font-size: 10px; }
.pharus-splash__pular:active { background: rgba(0, 0, 0, 0.65); }

@keyframes pharusSplashPular {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Enquanto a tela está aberta, o app atrás não deve rolar — no celular o
   toque no vídeo arrastaria a home por baixo. */
html.pharus-splash-aberto,
html.pharus-splash-aberto body {
    overflow: hidden;
}

/* Quem pediu menos movimento não precisa do fade.
   O `zoom` do media sai; o fade de opacidade FICA, so' que instantaneo —
   sem ele a tela ficaria visivel ate' o timeout do JS (560ms) e sumiria de
   uma vez, que e' mais brusco do que a animacao que se quis evitar. */
@media (prefers-reduced-motion: reduce) {
    .pharus-splash,
    .pharus-splash__media,
    .pharus-splash.is-saindo .pharus-splash__media {
        transition-duration: 0.01ms;
        transform: none;
    }
    .pharus-splash__pular { animation: none; }
}