/* ==================================================================
   Página inicial · movimento ao rolar (30/10/2026)
   Ligado por inicio-movimento.js, que põe a classe "mov" no <html>.
   Sem JavaScript, ou com "movimento reduzido" no aparelho, nada fica
   escondido: as regras abaixo só valem com html.mov.
   As animações se repetem: quando um bloco sai da tela, ele se rearma;
   ao voltar, entra de novo pelo lado de onde a pessoa está rolando.
   ================================================================== */
:root {
    --mov-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --mov-dist: 34px;
}

/* ----- 1. Blocos de texto: sobem (ou descem) com suavidade ----- */
.mov .mov-sobe {
    opacity: 0;
    transform: translate3d(0, var(--mov-dist), 0);
    transition:
        opacity 0.9s var(--mov-ease),
        transform 1.1s var(--mov-ease),
        filter 0.9s var(--mov-ease);
    transition-delay: var(--d, 0ms);
}
.mov .mov-sobe[data-dir="cima"] { transform: translate3d(0, calc(var(--mov-dist) * -1), 0); }
.mov .mov-sobe.is-visible { opacity: 1; transform: none; }
@media (min-width: 900px) {
    .mov .mov-sobe:not(.is-visible) { filter: blur(5px); }
}
/* Depois de entrar, o hover dos cartões volta a ser rápido e a subir 4px */
.mov .mov-sobe.mov-pronto { transition-delay: 0ms; transition-duration: 0.35s; }
.mov .card.mov-sobe.is-visible:hover { transform: translateY(-4px); }
@media (max-width: 768px) { .mov .card.mov-sobe.is-visible:hover { transform: none; } }

/* ----- 2. Títulos: palavra por palavra ----- */
.mov .mov-palavra {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.45em, 0) rotate(1.5deg);
    transform-origin: 0 100%;
    transition: opacity 0.7s var(--mov-ease), transform 0.9s var(--mov-ease);
    transition-delay: calc(var(--d, 0ms) + 120ms + var(--p, 0) * 45ms);
}
.mov .is-visible .mov-palavra { opacity: 1; transform: none; }

/* ----- 3. Linha dourada acima dos títulos: se desenha ----- */
.mov .mov-sobe:is(.sec-head, .bloco)::before {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1s var(--mov-ease);
    transition-delay: calc(var(--d, 0ms) + 80ms);
}
.mov .mov-sobe.sec-head--centro::before { transform-origin: 50% 50%; }
.mov .mov-sobe.is-visible:is(.sec-head, .bloco)::before { transform: scaleX(1); }
/* Linhas do eyebrow do topo e do fechamento se abrem para os lados */
.mov .eyebrow--lados::before,
.mov .eyebrow--lados::after {
    transform: scaleX(0);
    transition: transform 1s var(--mov-ease) 0.25s;
}
.mov .eyebrow--lados::before { transform-origin: 100% 50%; }
.mov .eyebrow--lados::after { transform-origin: 0 50%; }
.mov .is-visible .eyebrow--lados::before,
.mov .is-visible .eyebrow--lados::after,
.mov .eyebrow--lados.is-visible::before,
.mov .eyebrow--lados.is-visible::after { transform: scaleX(1); }

/* ----- 4. Listas e grades: os itens entram um depois do outro ----- */
.mov .mov-filhos > * {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.6s var(--mov-ease), transform 0.8s var(--mov-ease), border-color 0.3s ease, background-color 0.3s ease;
    transition-delay: calc(var(--d, 0ms) + 60ms + var(--i, 0) * 55ms);
}
.mov .mov-filhos[data-dir="cima"] > * { transform: translate3d(0, -18px, 0); }
.mov .mov-filhos.is-visible > * { opacity: 1; transform: none; }
/* Depois de entrar, o hover dos itens volta a ser rápido */
.mov .mov-filhos.mov-pronto > * { transition-delay: 0ms; }

/* ----- 5. Fotos e vídeo: entram com escala; nas molduras, uma cortina se abre ----- */
.mov .mov-midia {
    opacity: 0;
    transform: translate3d(0, 48px, 0) scale(0.955);
    transition: opacity 1s var(--mov-ease), transform 1.4s var(--mov-ease);
    transition-delay: var(--d, 0ms);
}
.mov .mov-midia[data-dir="cima"] { transform: translate3d(0, -48px, 0) scale(0.955); }
.mov .mov-midia.is-visible { opacity: 1; transform: none; }

.mov .moldura::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #17110A, #0C0906);
    transform-origin: 50% 0;
    transform: scaleY(1);
    transition: transform 1.25s var(--mov-ease);
    transition-delay: calc(var(--d, 0ms) + 120ms);
    pointer-events: none;
}
.mov .is-visible .moldura::after,
.mov .moldura.is-visible::after { transform: scaleY(0); }
.mov .moldura img {
    scale: 1.14;
    transition: scale 1.8s var(--mov-ease);
    transition-delay: calc(var(--d, 0ms) + 120ms);
}
.mov .is-visible .moldura img,
.mov .moldura.is-visible img { scale: 1.05; }

/* ----- 6. Profundidade (paralaxe leve), com o valor vindo do JS ----- */
.mov [data-par] { translate: 0 var(--par, 0px); }

/* ----- 7. Topo: brilho dourado que respira devagar ----- */
.mov .hero--bf { background-size: 100% 100%; }
.mov .hero--bf::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(520px 380px at 78% 42%, rgba(226, 198, 156, 0.16), transparent 70%);
    pointer-events: none;
    animation: mov-respira 9s ease-in-out infinite;
}
.mov .hero--bf::after { z-index: 0; }
.mov .hero--bf > .wrap { position: relative; z-index: 1; }
@keyframes mov-respira {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}
/* Selo dos livros: flutua de leve */
.mov .hero-foto.is-visible .hero-selo { animation: mov-flutua 6s ease-in-out 1.6s infinite; }
@keyframes mov-flutua {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ----- 8. Botões: brilho que passa no hover ----- */
.mov .btn { position: relative; overflow: hidden; isolation: isolate; }
.mov .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 248, 232, 0.55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.9s var(--mov-ease);
    pointer-events: none;
}
.mov .btn:hover::before { transform: translateX(120%); }

/* ----- Celular: menos distância, nada de desfoque ----- */
@media (max-width: 600px) {
    :root { --mov-dist: 24px; }
    .mov .mov-midia { transform: translate3d(0, 32px, 0) scale(0.97); }
}

/* ----- Movimento reduzido: tudo visível e parado ----- */
@media (prefers-reduced-motion: reduce) {
    .mov .mov-sobe, .mov .mov-palavra, .mov .mov-filhos > *, .mov .mov-midia {
        opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
    }
    .mov .moldura::after { display: none; }
    .mov .hero--bf::after, .mov .hero-selo { animation: none !important; }
    .mov [data-par] { translate: none; }
}