/* --- SCREEN TRANSITIONS --- */
.screen.active {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ELEMENT ANIMATIONS --- */
/* Used for Result Screen Entry */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- BUTTON ANIMATIONS --- */
.primary-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(0, 102, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0); }
}

/* --- UI FEEDBACK (Shake for Errors) --- */
.shake {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* --- PATH & NUMBER ANIMATIONS --- */
.path-layer path {
    transition: d 0.05s linear;
}

.number-circle {
    animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

@keyframes scaleIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- NEW HINT ANIMATION --- */
/* Pulses the orange ghost line */
@keyframes hintPulse {
    from { opacity: 0.4; stroke-width: 12px; }
    to { opacity: 0.8; stroke-width: 16px; }
}