/* ═══════════════════════════════════════════
   animations.css — Visual Doxa
   Fade-in on scroll · Parallax · Stacked Cards
   ═══════════════════════════════════════════ */

/* ─── Page fade-in ao carregar ─── */
@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-fade-in {
    animation: fadeInPage 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ──────────────────────────────────────────
   EFEITO 1 — FADE-IN ON SCROLL
   Ativado pelo IntersectionObserver em animations.js
   ────────────────────────────────────────── */

/* Estado inicial — elemento invisível e deslocado para baixo */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Estado final — visível e na posição original */
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delays escalonados para grids (adicione data-delay="1/2/3" no HTML) */
.fade-in[data-delay="1"] { transition-delay: 0.1s; }
.fade-in[data-delay="2"] { transition-delay: 0.2s; }
.fade-in[data-delay="3"] { transition-delay: 0.3s; }

/* ──────────────────────────────────────────
   EFEITO 2 — PARALLAX SCROLLING
   Camadas se movem em velocidades diferentes
   controladas via JS com requestAnimationFrame
   ────────────────────────────────────────── */

/*
   Marque os elementos com data-parallax="speed" onde speed é:
     "slow"   → 0.3× da velocidade do scroll (fundos, gradientes)
     "medium" → 0.5× (elementos decorativos geométricos)
     "fast"   → 0.8× (conteúdo, texto — movimento quase imperceptível)

   Exemplo:
   <div data-parallax="slow" class="parallax-bg"></div>
   <div data-parallax="medium" class="parallax-deco"></div>
*/
[data-parallax] {
    will-change: transform;
    /* Garante aceleração por GPU */
}

/* Container do hero com suporte a camadas */
.hero-parallax-wrapper {
    position: relative;
    overflow: hidden;
}

/* Camada de fundo decorativa (orbe/gradiente) — movida pelo parallax */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    /* Não usa will-change aqui — será aplicado pelo JS apenas em elementos animados */
}

.hero-orb--top {
    top: -220px;
    right: -180px;
    width: 580px;
    height: 580px;
    background: radial-gradient(circle, var(--accent-subtle) 0%, transparent 65%);
}

.hero-orb--bottom {
    bottom: -180px;
    left: -160px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--accent-subtle) 0%, transparent 65%);
}

/* ──────────────────────────────────────────
   EFEITO 3 — STACKED CARD SECTIONS
   Seções entram por cima da anterior.
   A seção anterior reduz de escala e desbota
   enquanto a nova sobe por baixo.
   ────────────────────────────────────────── */

/*
   Estrutura esperada no HTML:
   <div class="stacked-container">
       <div class="stacked-section">...</div>
       <div class="stacked-section">...</div>
   </div>

   O JS em animations.js lê scroll position e aplica
   transform: scale() e opacity via style inline.
*/
.stacked-container {
    position: relative;
}

/* Cada seção empilhável */
.stacked-section {
    position: relative;
    transform-origin: top center;
    /* will-change aplicado apenas via JS quando necessário */
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    overflow: hidden;
    /* Margem entre cards para criar espaço de scroll */
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    /* Transição suave com cubic-bezier elegante */
    transition: box-shadow 0.4s ease;
}

.stacked-section:last-child {
    margin-bottom: 0;
}

.stacked-section:hover {
    box-shadow: var(--shadow-md);
}

/* Card de pilar no formato horizontal (layout stacked) */
.pillar-card-stacked {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 2.5rem;
}

@media (max-width: 640px) {
    .pillar-card-stacked {
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.75rem;
    }
}

.pillar-card-stacked .pillar-icon {
    flex-shrink: 0;
    margin-bottom: 0; /* sobrescreve o margin-bottom do .pillar-icon padrão */
}

.pillar-card-stacked .pillar-text h3 {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
}

.pillar-card-stacked .pillar-text p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-secondary);
    max-width: 680px;
}

/* Número do pilar (decorativo) */
.pillar-number {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.08;
    position: absolute;
    bottom: 1rem;
    right: 2rem;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* ──────────────────────────────────────────
   RESPEITAR prefers-reduced-motion
   Se o usuário pedir menos movimento,
   todas as animações são desativadas.
   ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    /* Parallax: elementos ficam estáticos */
    [data-parallax] {
        will-change: auto !important;
        transform: none !important;
    }

    /* Fade-in: mostra tudo imediatamente */
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;
    }

    /* Stacked: desativa transforms de scroll */
    .stacked-section {
        will-change: auto !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .page-fade-in {
        animation: none !important;
    }
}