@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h2 {
        line-height: 2.5rem !important;
    }

    @screen md {
        h2 {
            line-height: 3rem !important;
        }
    }
}

/* Custom Component Classes */
.btn-primary {
    @apply bg-emerald-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-emerald-700 transition-colors shadow-lg hover:shadow-emerald-200 disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-secondary {
    @apply bg-white text-gray-700 px-6 py-3 rounded-lg font-semibold border-2 border-gray-200 hover:border-emerald-500 hover:text-emerald-600 transition-colors;
}

.input-field {
    @apply w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 outline-none transition-all;
}

.card {
    @apply bg-white p-6 rounded-2xl shadow-sm border border-gray-100;
}

/* Animations */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Glassmorphism */
.glass-panel {
    @apply bg-white bg-opacity-70 backdrop-blur-lg border border-white/20;
}

.blob {
    @apply absolute w-72 h-72 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob;
}

.blob-1 {
    @apply top-0 -left-4 bg-purple-300;
}

.blob-2 {
    @apply top-0 -right-4 bg-yellow-300 animation-delay-2000;
}

.blob-3 {
    @apply -bottom-8 left-20 bg-pink-300 animation-delay-4000;
}

/* Audio Waveform Animation */
.waveform-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.1;
    /* Subtle background effect */
    padding-right: 24px;
}

.waveform-bar {
    display: block;
    width: 6px;
    background-color: #6B7280;
    /* gray-500 */
    border-radius: 9999px;
    animation: wave 1.2s ease-in-out infinite;
}

@keyframes wave {

    0%,
    100% {
        height: 20%;
    }

    50% {
        height: 70%;
    }
}

/* Stagger animation for each bar */
.waveform-bar:nth-child(1) {
    animation-delay: 0s;
}

.waveform-bar:nth-child(2) {
    animation-delay: 0.2s;
}

.waveform-bar:nth-child(3) {
    animation-delay: 0.4s;
}

.waveform-bar:nth-child(4) {
    animation-delay: 0.1s;
}

.waveform-bar:nth-child(5) {
    animation-delay: 0.3s;
}

.waveform-bar:nth-child(6) {
    animation-delay: 0.5s;
}