/* ══════════════════════════════════════════════════════════════════
   Rally de Vendas — Home Page v4.0
   Below-fold animations + enhancements (loaded async)
   Respects prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════ */

/* ── Card 3D Tilt on Hover ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .card {
        transform-style: preserve-3d;
        perspective: 800px;
    }
    .card:hover {
        transform: translateY(-4px) rotateX(2deg) rotateY(-2deg);
        box-shadow: 0 20px 40px rgba(0,0,0,.3);
    }
}

/* ── Stagger Reveal for Grids ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms }
    .reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms }
    .reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms }
    .reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms }
    .reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms }
    .reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms }

    /* ── Hero gradient background animation ─── */
    .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 40% 40% at 80% 90%, rgba(99,102,241,.08) 0%, transparent 60%);
        pointer-events: none;
        animation: heroGradient 8s ease-in-out infinite alternate;
    }
    @keyframes heroGradient {
        0%   { opacity: .3; transform: translate(0, 0) }
        100% { opacity: .7; transform: translate(-5%, -3%) }
    }

    /* ── Vagas badge pulse ─── */
    .vagas-badge .dot {
        animation: vagasPulse 2s ease-in-out infinite;
    }
    @keyframes vagasPulse {
        0%, 100% { opacity: 1; transform: scale(1) }
        50%      { opacity: .4; transform: scale(1.5) }
    }

    /* ── FAQ smooth open ─── */
    details.faq .faq-body {
        animation: faqOpen .3s ease-out;
    }
    @keyframes faqOpen {
        from { opacity: 0; transform: translateY(-8px) }
        to   { opacity: 1; transform: translateY(0) }
    }

    /* ── Social proof toast slide ─── */
    .toast {
        transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
    }
    .toast.show {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* ── Countdown number change ─── */
    .countdown-num {
        transition: transform .2s ease;
    }

    /* ── Button shimmer effect ─── */
    .btn-hp {
        position: relative;
        overflow: hidden;
    }
    .btn-hp::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
        animation: btnShimmer 3s ease-in-out infinite;
    }
    @keyframes btnShimmer {
        0%, 100% { left: -100% }
        50%      { left: 150% }
    }

    /* ── Stats card subtle float ─── */
    .stats-grid > div:hover {
        transform: translateY(-3px);
        border-color: #3F3F46;
        transition: transform .25s ease, border-color .25s ease;
    }

    /* ── Meet card pulse when today ─── */
    @keyframes meetPulse {
        0%, 100% { box-shadow: 0 0 40px rgba(230,57,70,.3) }
        50%      { box-shadow: 0 0 60px rgba(230,57,70,.5) }
    }
}

/* ── Focus Styles (Accessibility AAA) ──────────────────────────── */
a:focus-visible,
button:focus-visible,
details summary:focus-visible {
    outline: 3px solid #E63946;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── High Contrast Mode ────────────────────────────────────────── */
@media (forced-colors: active) {
    .btn-hp, .btn-cta, .btn-destaque {
        border: 2px solid ButtonText;
    }
    .card, .card-plano {
        border: 1px solid ButtonText;
    }
}

/* ── Print Styles ──────────────────────────────────────────────── */
@media print {
    .hd, .mob-menu, .mob-cta-bar, .cv-overlay, .toast-container,
    .scroll-progress, .skip-nav, .sl {
        display: none !important;
    }
    body {
        background: #fff;
        color: #000;
    }
    .hero, .sec {
        padding: 20px;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10px;
        color: #666;
    }
}