/* ═══════════════════════════════════════════════════════════
   ESTILOS PRINCIPAIS - FUNIL DE AVALIAÇÃO DE CONTEÚDO
   Inspirado no rewardedtasks.com com melhorias de UI/UX
   ═══════════════════════════════════════════════════════════ */

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #e5e7eb;
    color: #050505;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Transições suaves de passos - apenas .active é exibido */
.step {
    display: none !important;
    opacity: 0;
}

.step.active {
    display: flex !important;
    opacity: 1;
    animation: stepFadeIn 0.3s ease-out forwards;
}

@keyframes stepFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Animações do Modal de Sucesso (Checkmark SVG) ─── */
@keyframes drawCircle {
    from { stroke-dashoffset: 251; }
    to   { stroke-dashoffset: 0; }
}

@keyframes drawCheck {
    from { stroke-dashoffset: 60; }
    to   { stroke-dashoffset: 0; }
}

.anim-circle {
    stroke-dasharray: 251;
    stroke-dashoffset: 251;
    animation: drawCircle 0.7s cubic-bezier(0.65, 0, 0.45, 1) forwards 0.2s;
}

.anim-check {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: drawCheck 0.45s cubic-bezier(0.65, 0, 0.45, 1) forwards 0.85s;
}

/* Modal Overlay & Card Animation */
.modal-overlay.open {
    display: flex !important;
}

.modal-overlay.open #modal-balance-box {
    transform: scale(1);
    opacity: 1;
}

/* Scrollbar sutil para comentários */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Botões com micro-interações */
button {
    user-select: none;
}

/* Efeito de clique ativo */
.btn-press:active {
    transform: scale(0.97);
}

/* Linha de separação estilo feed */
.feed-divider {
    height: 1px;
    background-color: #e5e7eb;
}

/* ─── Splash Screen ─── */
#splash-screen {
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.splash-spinner {
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.splash-content {
    animation: splashPulse 1.5s ease-in-out infinite alternate;
}
@keyframes splashPulse {
    from { transform: scale(1); }
    to   { transform: scale(1.02); }
}

/* ─── Cards do App (entrada escalonada) ─── */
.app-card {
    opacity: 0;
    transform: translateY(12px);
    animation: cardSlideIn 0.35s ease-out forwards;
    animation-delay: var(--delay, 0s);
}
@keyframes cardSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Fade-in genérico ─── */
.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Toast de atividade (prova social) ─── */
.toast-notification {
    animation: toastIn 0.4s ease-out forwards;
}
.toast-notification.removing {
    animation: toastOut 0.3s ease-in forwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-10px) scale(0.95); }
}

/* ─── Responsivo: telas pequenas (altura ≤ 780px) ─── */
@media (max-height: 780px) {
    #app-body {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    #app-body > * + * {
        margin-top: 5px !important;
    }
    .compact-profile { padding: 10px !important; }
    .compact-wallet-header { padding: 10px 14px !important; }
    .compact-wallet-header .text-2xl { font-size: 1.25rem !important; }
    .compact-wallet-stats { padding-top: 5px !important; padding-bottom: 5px !important; }
    .compact-notif { padding: 8px 10px !important; }
    .compact-notif .w-10 { width: 2rem !important; height: 2rem !important; }
    .compact-grid > div { padding: 5px !important; }
    .compact-grid .w-8 { width: 1.5rem !important; height: 1.5rem !important; }
    .compact-cta { padding: 5px 12px !important; }
    .compact-cta button { padding-top: 11px !important; padding-bottom: 11px !important; }
    .compact-navbar { padding-top: 3px !important; padding-bottom: 4px !important; }
    .compact-appheader { padding-top: 6px !important; padding-bottom: 6px !important; }
}

@media (max-height: 680px) {
    .compact-wallet-header > .text-\[11px\]:last-child { display: none !important; }
    .compact-notif p { display: none !important; }
    .compact-notif .flex.items-center.gap-1\.5 { display: none !important; }
    .compact-profile .w-12 { width: 2.5rem !important; height: 2.5rem !important; }
    .compact-grid { gap: 4px !important; }
}

@media (max-height: 580px) {
    .compact-grid { display: none !important; }
    .compact-notif .text-\[11px\] { font-size: 10px !important; }
}

/* ─── Shimmer no botão CTA ─── */
.cta-shimmer {
    animation: shimmer 2.5s ease-in-out infinite;
    transform: translateX(-100%);
}
@keyframes shimmer {
    0%, 100% { transform: translateX(-100%); }
    50%      { transform: translateX(100%); }
}