/* ============================================
   QUICKSCAN ARROW ANIMATION
   Subtle B2B-appropriate visual guidance
   ============================================ */

/* Organic curved arrow - positioned further to the right */
.organic-arrow {
    position: absolute;
    top: -58px;
    right: -120px;
    width: 130px;
    height: 75px;
    pointer-events: none;
    z-index: 10;
}

.organic-arrow svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Arrow curve path - draws from origin */
.organic-arrow .arrow-curve {
    fill: none;
    stroke: var(--primary-400);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    opacity: 0;
}

/* Arrow tip - positioned at end of curve, scales from connection point */
.organic-arrow .arrow-tip {
    fill: var(--primary-400);
    opacity: 0;
    transform-origin: 32px 58px; /* Origin at the connection point where line meets arrow */
}

/* Animation: draw the curve from its starting point */
.organic-arrow.animate .arrow-curve {
    opacity: 0.7;
    animation: drawCurve 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Arrow tip emerges seamlessly as line finishes - no delay */
.organic-arrow.animate .arrow-tip {
    animation: emergeTip 0.2s ease-out 0.85s forwards;
}

@keyframes drawCurve {
    0% {
        stroke-dashoffset: 150;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Tip grows from the line end point in one smooth motion */
@keyframes emergeTip {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 0.7;
        transform: scale(1);
    }
}

/* Button glow effect */
.quickscan-btn-outline.glow-active {
    animation: buttonGlowPulse 1.5s ease-out forwards;
}

@keyframes buttonGlowPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 119, 182, 0);
    }
    30% {
        box-shadow: 0 0 20px 6px rgba(0, 119, 182, 0.3);
        transform: translateY(-2px);
    }
    60% {
        box-shadow: 0 0 12px 3px rgba(0, 119, 182, 0.15);
        transform: translateY(-1px);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 119, 182, 0);
        transform: translateY(0);
    }
}

/* Fade out the arrow after animation */
.organic-arrow.animate.fade-out .arrow-curve,
.organic-arrow.animate.fade-out .arrow-tip {
    animation: fadeOutArrow 0.5s ease-out forwards;
}

@keyframes fadeOutArrow {
    to {
        opacity: 0;
    }
}

/* Hide on smaller screens */
@media (max-width: 767px) {
    .organic-arrow {
        display: none !important;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .organic-arrow {
        display: none !important;
    }
    
    .quickscan-btn-outline.glow-active {
        animation: none;
    }
}