/* Paddle Drawing Animation Feedback System */
.paddle-feedback-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(2px);
    z-index: 8888;
    display: none !important; /* Hidden by default with !important */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none !important; /* Disable pointer events when hidden with !important */
    visibility: hidden; /* Additional layer of hiding */
}

.paddle-feedback-overlay.show {
    display: flex !important; /* Show and enable flexbox with !important */
    opacity: 1;
    pointer-events: auto !important; /* Enable pointer events when visible with !important */
    visibility: visible; /* Make visible when showing */
}

.paddle-drawing-container {
    position: relative;
    width: 200px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* SVG Paddle Drawing Animation */
.paddle-svg {
    width: 120px;
    height: 160px;
    margin-bottom: 1rem;
}

.paddle-face {
    fill: none;
    stroke: #1f2937;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.paddle-handle {
    fill: none;
    stroke: #8b5cf6;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.paddle-grip {
    fill: none;
    stroke: #6b46c1;
    stroke-width: 2;
    stroke-linecap: round;
}

/* Animation Classes */
.draw-fast {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 0.8s ease-out forwards;
}

.draw-medium {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 1.2s ease-out forwards;
}

.draw-slow {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 1.8s ease-out forwards;
}

.draw-very-slow {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 2.5s ease-out forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Stagger the drawing of different parts */
.paddle-face.draw-fast { animation-delay: 0s; }
.paddle-handle.draw-fast { animation-delay: 0.3s; }
.paddle-grip.draw-fast { animation-delay: 0.6s; }

.paddle-face.draw-medium { animation-delay: 0s; }
.paddle-handle.draw-medium { animation-delay: 0.4s; }
.paddle-grip.draw-medium { animation-delay: 0.8s; }

.paddle-face.draw-slow { animation-delay: 0s; }
.paddle-handle.draw-slow { animation-delay: 0.6s; }
.paddle-grip.draw-slow { animation-delay: 1.2s; }

.paddle-face.draw-very-slow { animation-delay: 0s; }
.paddle-handle.draw-very-slow { animation-delay: 0.8s; }
.paddle-grip.draw-very-slow { animation-delay: 1.6s; }

/* Feedback Message */
.paddle-feedback-message {
    text-align: center;
    color: #1f2937;
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 1rem;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.5s ease-out 0.2s forwards;
}

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

/* Success/Error Color Variations */
.paddle-feedback-overlay.success .paddle-face,
.paddle-feedback-overlay.success .paddle-handle {
    stroke: #059669;
}

.paddle-feedback-overlay.success .paddle-grip {
    stroke: #047857;
}

.paddle-feedback-overlay.success .paddle-feedback-message {
    color: #059669;
}

.paddle-feedback-overlay.error .paddle-face,
.paddle-feedback-overlay.error .paddle-handle {
    stroke: #dc2626;
}

.paddle-feedback-overlay.error .paddle-grip {
    stroke: #b91c1c;
}

.paddle-feedback-overlay.error .paddle-feedback-message {
    color: #dc2626;
}

.paddle-feedback-overlay.info .paddle-face,
.paddle-feedback-overlay.info .paddle-handle {
    stroke: #2563eb;
}

.paddle-feedback-overlay.info .paddle-grip {
    stroke: #1d4ed8;
}

.paddle-feedback-overlay.info .paddle-feedback-message {
    color: #2563eb;
}

/* Hide animation after completion */
.paddle-feedback-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none !important; /* Ensure no interactions during fade-out */
    visibility: hidden; /* Ensure hidden during fade-out */
}

/* Responsive design */
@media (max-width: 640px) {
    .paddle-drawing-container {
        width: 160px;
        height: 240px;
    }
    
    .paddle-svg {
        width: 100px;
        height: 140px;
    }
    
    .paddle-feedback-message {
        font-size: 1rem;
    }
}

/* Subtle background pattern for depth */
.paddle-feedback-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 25% 25%, rgba(5, 150, 105, 0.03) 0%, transparent 50%),
                      radial-gradient(circle at 75% 75%, rgba(37, 99, 235, 0.03) 0%, transparent 50%);
    pointer-events: none;
}