@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes recordingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); }
}
@keyframes progressFill {
    0% { 
        width: 0%; 
        background-color: #3b82f6; /* blue-500 */
    }
    100% { 
        width: 100%; 
        background-color: #3b82f6; /* blue-500 */
    }
}
@keyframes hueRotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
@keyframes wiggle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}
.bounce-animation { animation: bounce 2s infinite; }
.pulse-animation { animation: pulse 2s infinite; }
.wiggle-animation { animation: wiggle 0.8s infinite; }
.recording-pulse { animation: recordingPulse 1.5s infinite; }
.gradient-bg {
    background: linear-gradient(to bottom right, #FFFEF1, #F5FFFD, #FBF3F3, #FFFDF5);
}
.fun-border {
    position: relative;
    border: 4px solid transparent;
    background: linear-gradient(white, white) padding-box,
                conic-gradient(from 0deg, 
                    #fecaca, #bbf7d0, #bfdbfe, #c7d2fe, #fde68a, #fbcfe8, #fecaca) border-box;
    border-radius: 1.5rem;
}


.fun-border > * {
    position: relative;
    z-index: 1;
    filter: hue-rotate(0deg) !important;
}

.recording-border {
    background: linear-gradient(to bottom right, #FFFEF1, #F5FFFD, #FBF3F3, #FFFDF5);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
    padding: 3vh;
    border-radius: 1.5vh;
}
.text-responsive {
    font-size: max(3vh, 24px);
}

.text-responsive-sm {
    font-size: max(2.25vh, 18px);
}

.text-responsive-lg {
    font-size: max(4.5vh, 36px);
}

.text-responsive-xl {
    font-size: max(5.0vh, 44px);
}

.btn-primary {
    font-size: max(2.5vh, 24px);
    margin-top: 1.5rem;
    background-color: #10b981;
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 1rem;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 2px solid #34d399;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary:hover {
    background-color: #059669;
    border-color: #10b981;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.btn-secondary {
    font-size: max(2.5vh, 24px);
    margin-top: 1.5rem;
    background-color: #3b82f6;
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 1rem;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 2px solid #60a5fa;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.0rem;
}

.btn-secondary:hover {
    background-color: #2563eb;
    border-color: #3b82f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.w-full-350 {
    width: 100%;
    max-width: max(45vh, 350px);

}
.w-full-400 {
    width: 100%;
    max-width: max(50vh, 400px);
}
.w-full-700 {
    width: 100%;
    max-width: max(70vh, 700px);
}

.min-full-height {
    min-height: 100vh; /* Fallback for older browsers */
}
@supports (min-height: 100dvh) {
    .min-full-height {
        min-height: 100dvh; /* Modern browsers will use dynamic viewport height */
    }
}