/* ============================================================
   SHARED ANIMATIONS — Spygram Upsells HTML
   Equivalente ao @layer components do Tailwind original
   Todos @keyframes globais usados em qualquer UP.
   ============================================================ */

/* Shimmer (botões CTA) */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.btn-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: shimmer 2.5s infinite;
    pointer-events: none;
}

/* Pulse glow (orb fundo) */
@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
}

.orb-glow {
    animation: pulse-glow 4s ease-in-out infinite;
}

/* Terminal cursor blink */
@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

.terminal-cursor {
    animation: blink 1s step-end infinite;
}

/* Alert pulse (pontos vermelhos pulsantes) */
@keyframes alert-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.alert-dot {
    animation: alert-pulse 1.5s ease-in-out infinite;
}

/* Shake (erro detectado) */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

.shake {
    animation: shake 0.6s ease-in-out;
}

/* Progress bar glow */
@keyframes progress-glow {

    0%,
    100% {
        box-shadow: 0 0 8px oklch(0.65 0.25 350 / 40%);
    }

    50% {
        box-shadow: 0 0 16px oklch(0.65 0.25 350 / 60%);
    }
}

.progress-glow {
    animation: progress-glow 2s ease-in-out infinite;
}

/* Loading dots (...) */
@keyframes loading-dots {
    0% {
        content: "";
    }

    25% {
        content: ".";
    }

    50% {
        content: "..";
    }

    75% {
        content: "...";
    }

    100% {
        content: "";
    }
}

.loading-dots::after {
    content: "";
    animation: loading-dots 1.5s infinite;
}

/* Highlight CTA — pulso ao rolar pra ele */
@keyframes highlight-cta {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 24px rgba(34, 197, 94, 0.3);
    }

    15% {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(34, 197, 94, 0.6), 0 0 80px rgba(34, 197, 94, 0.3);
    }

    30% {
        transform: scale(1);
        box-shadow: 0 4px 24px rgba(34, 197, 94, 0.3);
    }

    45% {
        transform: scale(1.05);
        box-shadow: 0 0 40px rgba(34, 197, 94, 0.6), 0 0 80px rgba(34, 197, 94, 0.3);
    }

    60% {
        transform: scale(1);
        box-shadow: 0 4px 24px rgba(34, 197, 94, 0.3);
    }

    75% {
        transform: scale(1.03);
        box-shadow: 0 0 30px rgba(34, 197, 94, 0.5), 0 0 60px rgba(34, 197, 94, 0.2);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 4px 24px rgba(34, 197, 94, 0.3);
    }
}

.highlight-cta {
    animation: highlight-cta 2.5s ease-in-out;
}

/* Equivalentes Framer Motion */

/* fade-in (initial: opacity:0 → animate: opacity:1) */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* slide-up (initial: opacity:0, y:20 → animate: opacity:1, y:0) */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* slide-down (initial: opacity:0, y:-20 → animate: opacity:1, y:0) */
@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* scale-in (initial: scale:0.9, opacity:0 → animate: scale:1, opacity:1) */
@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* spin */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* pulse (Tailwind animate-pulse) */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ping (Tailwind animate-ping) */
@keyframes ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* bounce sutil pra ícones */
@keyframes bounce-soft {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.bounce-soft {
    animation: bounce-soft 2s ease-in-out infinite;
}

/* Modal fade + scale (entrada de modais) */
@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modal-out {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes overlay-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Phase transitions (AnimatePresence mode="wait") */
.phase {
    animation: fade-in 0.4s ease-out;
}

.phase-exit {
    animation: fade-in 0.3s ease-out reverse;
}