/* =============================================================================
   landing.css — página de destino (modo minimalista)
   =============================================================================

   Arquivo único e independente: não carrega base.css nem fontes externas.
   A página inteira é uma requisição de HTML + este CSS + o vídeo.

   A composição tem um trabalho só: levar o olho do vídeo para a ação, sem
   nada no caminho.
   ========================================================================== */

:root {
    /* Azul-noite, não preto puro. O preto absoluto atrás de um vídeo com
       barras pretas faz o player "sumir"; um azul muito escuro mantém a
       moldura visível sem competir com a imagem. */
    --bg:        #0a0a16;
    --bg-deep:   #06060f;
    --fg:        #e8eaf0;
    --fg-dim:    #6a7085;
    --cta:       #ff1f2e;
    --cta-hover: #ff4753;

    --font-ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

/* Centralização.
 *
 * Flex em coluna com `justify-content: center` para o eixo vertical, e o
 * bloco centralizado no eixo horizontal por `max-width` + `margin-inline:
 * auto`. É o padrão mais previsível que existe.
 *
 * A versão anterior usava `display: grid; place-items: center` com um filho
 * de `width: 100%`. Isso centraliza em telas médias e FALHA em telas largas:
 * com `justify-items: center` o item não estica, então o navegador dimensiona
 * a coluna implícita pelo conteúdo e o bloco encosta à esquerda. Foi
 * exatamente o que aconteceu em 1920px.
 */
body.landing {
    min-height: 100dvh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
}

.landing__stage {
    width: 100%;
    max-width: 62rem;
    margin-inline: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.25rem);
}

/* -----------------------------------------------------------------------------
   Player
   -------------------------------------------------------------------------- */

.landing__player {
    width: 100%;
    background: #000;
    border-radius: 6px;
    overflow: hidden;

    /* Sombra profunda e difusa: separa o player do fundo sem precisar de
       borda, que num vídeo com barras pretas ficaria dupla. */
    box-shadow:
        0 24px 60px -24px rgba(0, 0, 0, .9),
        0 2px 12px rgba(0, 0, 0, .5);

    animation: landing-in 480ms cubic-bezier(.16, 1, .3, 1) both;
}

.landing__video {
    display: block;
    width: 100%;
    /* 16:9 com o vídeo contido: um vídeo vertical aparece inteiro, com
       barras laterais, em vez de ser cortado. */
    aspect-ratio: 16 / 9;
    max-height: 76dvh;
    object-fit: contain;
    background: #000;
}

@keyframes landing-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   Chamada para ação
   -------------------------------------------------------------------------- */

.landing__cta {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 1.15;

    animation: landing-in 480ms cubic-bezier(.16, 1, .3, 1) 140ms both;
    transition: color .18s ease, transform .18s ease, opacity .18s ease;
}

/* Variante "loud": texto vermelho grande, como um letreiro.
   clamp() faz caber no celular sem quebrar em duas linhas desalinhadas. */
.landing__cta--loud,
.landing__cta--ember {
    font-size: clamp(1.75rem, 5.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--cta);

    /* drop-shadow em vez de text-shadow: acompanha o contorno real das
       letras e continua funcionando quando o texto vira gradiente
       recortado (o shimmer abaixo). */
    filter: drop-shadow(0 2px 18px rgba(255, 31, 46, .3));

    /* Respira devagar. O ciclo de ~2s é lento o bastante para não irritar
       em uma página onde o visitante fica parado assistindo, e rápido o
       bastante para o olho registrar movimento na visão periférica. */
    animation:
        landing-in 480ms cubic-bezier(.16, 1, .3, 1) 140ms both,
        cta-breathe 2.1s cubic-bezier(.45, 0, .55, 1) 800ms infinite;

    will-change: transform, filter;
}

@keyframes cta-breathe {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 2px 16px rgba(255, 31, 46, .26));
    }
    50% {
        transform: scale(1.045);
        filter: drop-shadow(0 3px 34px rgba(255, 31, 46, .62));
    }
}

/* Brilho que atravessa o texto.
 *
 * O gradiente é recortado na forma das letras (background-clip: text) e
 * deslocado pela animação, o que cria um reflexo passando de um lado ao
 * outro — como letreiro de cinema.
 *
 * Fica dentro de @supports porque depende de `color: transparent`: se o
 * recorte não fosse suportado, o texto sumiria por completo. Sem o suporte,
 * o navegador simplesmente ignora este bloco e o texto continua vermelho
 * sólido, com a pulsação acima.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .landing__cta--loud {
        background-image: linear-gradient(
            100deg,
            var(--cta) 0%,
            var(--cta) 42%,
            #ff9aa1 50%,
            var(--cta) 58%,
            var(--cta) 100%
        );
        background-size: 280% 100%;
        background-position: 100% 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;

        animation:
            landing-in 480ms cubic-bezier(.16, 1, .3, 1) 140ms both,
            cta-breathe 2.1s cubic-bezier(.45, 0, .55, 1) 800ms infinite,
            cta-shine 3.4s linear 1.2s infinite;
    }
}

@keyframes cta-shine {
    /* A pausa é intencional: o brilho passa, some por um tempo e volta.
       Um reflexo contínuo vira ruído visual e o olho para de notar. */
    0%   { background-position: 100% 0; }
    45%  { background-position: -80% 0; }
    100% { background-position: -80% 0; }
}

.landing__cta--loud:hover,
.landing__cta--ember:hover {
    /* Ao passar o mouse a animação para e o botão fica firme: o visitante
       já decidiu clicar, e alvo em movimento atrapalha. */
    animation-play-state: paused;
    transform: scale(1.06);
    filter: drop-shadow(0 4px 40px rgba(255, 31, 46, .75));
}

.landing__cta--ember:hover { color: var(--cta-hover); }

/* Variante sólida: botão claro, para quando o vermelho gritado não combina. */
.landing__cta--light {
    padding: .875rem 2.25rem;
    border-radius: 999px;
    background: #f2f3f7;
    color: #0a0a16;
    font-size: 1.0625rem;
    font-weight: 700;
}

.landing__cta--light:hover { background: #fff; transform: translateY(-2px); }

/* Variante discreta: contorno. */
.landing__cta--outline {
    padding: .8125rem 2rem;
    border: 1px solid rgba(232, 234, 240, .28);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fg);
}

.landing__cta--outline:hover { border-color: rgba(232, 234, 240, .55); transform: translateY(-2px); }

.landing__cta:focus-visible {
    outline: 2px solid var(--cta);
    outline-offset: 6px;
    border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   Rodapé discreto
   -------------------------------------------------------------------------- */

.landing__foot {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    opacity: .5;
    transition: opacity .24s ease;
}

.landing__foot:hover { opacity: 1; }

.landing__share {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;

    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;

    color: var(--fg-dim);
    font: inherit;
    font-size: .8125rem;
    text-decoration: none;

    transition: color .18s ease;
}

.landing__share:hover { color: var(--fg); }
.landing__share svg { width: .9375rem; height: .9375rem; flex: none; }
.landing__share.is-copied { color: #4ade80; }

/* -----------------------------------------------------------------------------
   Aviso de pré-visualização (só para o admin logado)
   -------------------------------------------------------------------------- */

.landing__preview {
    padding: .625rem 1rem;
    border: 1px solid rgba(251, 191, 36, .3);
    border-radius: 6px;
    background: rgba(251, 191, 36, .07);
    color: #fcd34d;
    font-size: .8125rem;
}

.landing__preview a { color: #fff; }

/* -----------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    /* Sem a animação, o gradiente do shimmer ficaria congelado numa posição
       que pode deixar parte das letras clara demais. Volta para vermelho
       sólido, que é o estado legível garantido. */
    .landing__cta--loud {
        background-image: none;
        color: var(--cta);
        transform: none;
    }
}