/* ================================
   Animations - Keyframes and Transitions
   ================================ */

/* Breathing Animation for CTA Buttons */
@keyframes breathe {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(46,91,255,0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(46,91,255,0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(46,91,255,0.3);
    }
}

/* Subtle Pulse Animations */
@keyframes subtlePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(16,185,129,0.25);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 16px rgba(16,185,129,0.35);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(16,185,129,0.25);
    }
}

@keyframes subtlePulseTeal {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(20,184,166,0.25);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 16px rgba(20,184,166,0.35);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(20,184,166,0.25);
    }
}

@keyframes subtlePulsePurple {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(139,92,246,0.25);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 16px rgba(139,92,246,0.35);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(139,92,246,0.25);
    }
}

/* Pain Points Animation */
@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Logo Ticker Animation */
@keyframes scroll-ticker {
    0% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
}

/* Arrow Animation Keyframes */
@keyframes arrow-fly-diagonal {
    0% {
        transform: translate(-12px, -12px);
        opacity: 0;
    }
    20% {
        transform: translate(-6px, -6px);
        opacity: 1;
    }
    50% {
        transform: translate(0, 0);
        opacity: 1;
    }
    85% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes arrow-position {
    0%, 48% {
        transform: translate(0, 0);
    }
    52%, 100% {
        transform: translate(3px, 3px);
    }
}

@keyframes clip-shaft {
    0%, 48% {
        opacity: 0;
    }
    52%, 100% {
        opacity: 1;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .logos-wrapper {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
}