/* Click Me Prompt Styles */

/* The main container for positioning */
.profile-container {
    position: relative; /* This is crucial for positioning the prompt */
    display: flex;
    align-items: center;
    justify-content: center;
}


/* The container for the text box and arrow */
.click-me-prompt {
    position: absolute;
    top: 50%;
    left: calc(100% + 20px); 
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none; 
}

/* The "Click Me" text box */
.prompt-text {
    background-color: #007bff;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
    white-space: nowrap;
    transform: translateY(-15px);
}

/* The SVG for our cool, dynamic arrow */
.arrow-svg {
    width: 100px;
    height: 80px;
    margin-left: -10px;
    transform: scaleX(-1) rotate(10deg);
}

.arrow-path {
    stroke: #007bff;
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 130;
    stroke-dashoffset: 130;
    animation: draw-arrow 0.5s ease-out 0.5s forwards;
}

/* Keyframe animation for drawing the arrow */
@keyframes draw-arrow {
    to {
        stroke-dashoffset: 0;
    }
}

/* This class will be added by JavaScript on click */
.puff-out {
    animation: puff-animation 0.5s ease-out forwards;
}

/* Keyframe animation for the "puff" effect */
@keyframes puff-animation {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(1.5);
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .click-me-prompt {
        top: -185px;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: column; /* Stack the text and arrow vertically */
        gap: 5px; /* Add a small space between text and arrow */
    }

    .arrow-svg {
        transform: rotate(81deg) translateX(76px) translateY(12px);
        margin-left: 0; /* Remove side margin for better centering */
    }

    .prompt-text {
        font-size: 14px;
        padding: 6px 12px;
        transform: translateY(-50px); /* Reset the desktop vertical alignment */
    }
        @keyframes puff-animation {
        0% {
            opacity: 1;
            transform: translateX(-50%) scale(1); /* Include original transform */
        }
        100% {
            opacity: 0;
            transform: translateX(-50%) scale(1.5); /* Include original transform */
        }
    }
}