/* =========================================================================
   DAbeira — Sistema de design "Luxo Moderno Quente"
   Creme profundo em camadas · cantos suaves · dourado discreto · espaço
   (complemento ao Tailwind; tokens de cor no tailwind.config em index.php)
   ========================================================================= */

:root {
    --serra:        #2F4A3B;
    --serra-deep:   #243A2E;
    --areia:        #F1E8D8; /* fundo quente principal */
    --creme:        #F6F2EA; /* superfície clara */
    --surface:      #FCFAF4; /* cartões */
    --dourado:      #C5A46D;
    --dourado-deep: #8C6D34;
    --texto:        #2B2723; /* tinta quente */

    /* Raio suave coeso */
    --r-lg: 2rem;
    --r-md: 1.25rem;
}

/* Esconde elementos Alpine antes de inicializar (evita flash) */
[x-cloak] { display: none !important; }

/* Skip-link acessível */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 100;
    background: var(--serra);
    color: var(--creme);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 0.75rem 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Foco visível e consistente (acessibilidade) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--dourado);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Tipografia base */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* Títulos — serifa com tracking ligeiramente fechado, ar editorial/premium */
.font-display { letter-spacing: -0.015em; }

/* =========================================================================
   Sombras quentes — tingidas de verde-serra (profundidade suave e coesa)
   ========================================================================= */
.shadow-soft    { box-shadow: 0 4px 18px -8px rgba(47, 74, 59, .16); }
.shadow-warm    { box-shadow: 0 18px 40px -22px rgba(47, 74, 59, .28),
                              0 6px 16px -10px rgba(47, 74, 59, .12); }
.shadow-warm-lg { box-shadow: 0 40px 80px -34px rgba(47, 74, 59, .40),
                              0 14px 30px -18px rgba(47, 74, 59, .18); }
.hover\:shadow-gold:hover { box-shadow: 0 24px 50px -20px rgba(197, 164, 109, .50); }

/* Compensa o header flutuante ao saltar para âncoras */
section[id] { scroll-margin-top: 110px; }

/* Micro-interação: elevação suave (sem reflow) */
.lift { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.lift:hover { transform: translateY(-4px); }

/* =========================================================================
   Barra de progresso de scroll (acento dourado, discreto)
   ========================================================================= */
.scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 60;
    background: linear-gradient(90deg, var(--dourado), #e3cb9c);
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

/* =========================================================================
   Detalhes decorativos quentes
   ========================================================================= */
/* Halo dourado suave atrás de imagens-herói */
.glow-gold::before {
    content: "";
    position: absolute;
    inset: -8% -8% -8% -8%;
    z-index: -1;
    background: radial-gradient(60% 60% at 50% 45%, rgba(197,164,109,.35), transparent 70%);
    filter: blur(40px);
}

/* Filete dourado curto */
.rule-gold { display: inline-block; height: 2px; width: 2.75rem; background: var(--dourado); border-radius: 2px; }

/* Numerador de capítulo (sistema deliberado, não eyebrow genérica) */
.chapter-no {
    font-feature-settings: "tnum";
    color: var(--dourado-deep);
}

/* Zoom lento em imagens dentro de molduras (hover) */
.img-zoom { transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.group:hover .img-zoom { transform: scale(1.06); }

/* =========================================================================
   Animações de entrada (hero) + reveal on scroll
   ========================================================================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    opacity: 0;
    animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes floatSoft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(7px); }
}
.animate-float-soft { animation: floatSoft 2.4s ease-in-out infinite; }

/* Zoom lento cinematográfico subtil para a fotografia do hero */
@keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
}
.hero-zoom { animation: heroZoom 18s ease-out forwards; }

/* Reveal on scroll — só esconde quando há JS para revelar */
.reveal {
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.js .reveal {
    opacity: 0;
    transform: translateY(30px);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reveal com máscara suave para imagens (wipe gentil de baixo) */
.js .reveal-mask { clip-path: inset(0 0 100% 0); }
.reveal-mask {
    transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: clip-path;
}
.reveal-mask.is-visible { clip-path: inset(0 0 0 0); }

/* =========================================================================
   Splide — espaçamento entre slides
   ========================================================================= */
.splide__slide { padding: 0.4rem; }
.splide__pagination__page.is-active { background: var(--dourado) !important; }

/* =========================================================================
   prefers-reduced-motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .animate-fade-up {
        opacity: 1 !important;
        transform: none !important;
    }
    .reveal-mask { clip-path: none !important; }
    .lift:hover { transform: none !important; }
    .hero-zoom { animation: none !important; }
}