/* ==========================================================
   Juntos pela Isadora — estilos complementares ao Tailwind
   Aqui fica apenas o que o Tailwind não resolve com classes:
   base anti-FOUC, ícones SVG, fundos, animações, popup e FAQ.
   ========================================================== */

/* Mesma ordem de camadas do Tailwind v4: utilitários sempre vencem */
@layer theme, base, components, utilities;

/* ---------- Base (evita "flash" antes do Tailwind carregar) ---------- */
@layer base {
    html {
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: 5rem;
    }

    body {
        margin: 0;
        background-color: #fff8f3;
        color: #2a1f2d;
        font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
        text-rendering: optimizeLegibility;
    }

    img,
    svg {
        max-width: 100%;
    }

    .font-display {
        font-variation-settings: "SOFT" 100;
    }

    ::selection {
        background: #fdc7d5;
        color: #2a1f2d;
    }

    :focus-visible {
        outline: 3px solid #e5486f;
        outline-offset: 3px;
        border-radius: 0.5rem;
    }
}

@layer components {
    /* ---------- Ícones do sprite SVG ---------- */
    .icon {
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .icon-fill {
        fill: currentColor;
        stroke: none;
    }

    /* ---------- Fundo pastel (inspirado no céu de arco-íris da Isa) ---------- */
    .hero-aurora {
        background:
            radial-gradient(42rem 28rem at 92% 8%, rgb(253 199 213 / 0.55), transparent 70%),
            radial-gradient(36rem 26rem at 4% 92%, rgb(239 233 253 / 0.9), transparent 70%),
            radial-gradient(28rem 20rem at 55% 105%, rgb(255 237 211 / 0.8), transparent 70%),
            #fff8f3;
    }

    /* ---------- Barras de progresso da vaquinha ---------- */
    .progress-fill {
        width: 0;
        transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .progress-fill.is-visible {
        width: var(--pct, 0%);
    }

    .progress-stripes {
        background-size: 200% 100%;
        position: relative;
        overflow: hidden;
    }

    .progress-stripes::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
        transform: translateX(-100%);
        animation: brilho 2.8s ease-in-out 1.6s infinite;
    }

    /* ---------- Brilho nos botões principais ---------- */
    .btn-shine {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .btn-shine::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%);
        transform: translateX(-100%);
        animation: brilho 4s ease-in-out 2s infinite;
    }

    /* ---------- Ponto pulsante "campanha ativa" ---------- */
    .pulse-dot {
        box-shadow: 0 0 0 0 rgb(229 72 111 / 0.6);
        animation: pulsar 1.8s ease-out infinite;
    }

    /* ---------- FAQ ---------- */
    .faq summary {
        list-style: none;
    }

    .faq summary::-webkit-details-marker {
        display: none;
    }

    /* ---------- Popup ---------- */
    .popup {
        border: 0;
        overscroll-behavior: contain;
    }

    .popup[open] {
        animation: popup-entrar 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .popup::backdrop {
        background: rgb(42 31 45 / 0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        animation: fade 0.3s ease-out;
    }
}

@keyframes brilho {
    0% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(100%); }
}

@keyframes pulsar {
    0% { box-shadow: 0 0 0 0 rgb(229 72 111 / 0.6); }
    70% { box-shadow: 0 0 0 8px rgb(229 72 111 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(229 72 111 / 0); }
}

@keyframes popup-entrar {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}