/* Integralis - Playful Colorful Design System */
/* ילדי-צבעוני: פסטלים, פינות עגולות, שמחה */

/* ===== Card Colors (rotating pastels) ===== */
.card-pastel-1 { background: #fef3e2; border-right: 5px solid #f59e0b; }  /* חמאה-כתום */
.card-pastel-2 { background: #f0eeff; border-right: 5px solid #8b5cf6; }  /* לבנדר */
.card-pastel-3 { background: #ecfdf5; border-right: 5px solid #10b981; }  /* מנטה */
.card-pastel-4 { background: #fdf2f8; border-right: 5px solid #ec4899; }  /* ורוד */
.card-pastel-5 { background: #eff6ff; border-right: 5px solid #3b82f6; }  /* תכלת */
.card-pastel-6 { background: #fefce8; border-right: 5px solid #eab308; }  /* לימון */

/* ===== Fun Button Hover ===== */
.btn-bounce:hover {
    transform: translateY(-3px) scale(1.02);
}
.btn-bounce:active {
    transform: translateY(0) scale(0.98);
}

/* ===== Wavy Divider ===== */
.wavy-top {
    position: relative;
}
.wavy-top::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 Q150 0 300 15 Q450 30 600 15 Q750 0 900 15 Q1050 30 1200 15 L1200 30Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x;
    background-size: 600px 15px;
}

/* ===== Toast Animation ===== */
.message-toast {
    animation: bounceIn 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), fadeOut 0.5s ease-in 4.5s forwards;
}

@keyframes bounceIn {
    from {
        opacity: 0;
        transform: translateX(-30px) scale(0.8);
    }
    60% {
        transform: translateX(5px) scale(1.05);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(-20px) scale(0.9);
    }
}

/* ===== Modal Animation ===== */
.modal-backdrop {
    animation: modalFadeIn 0.25s ease-out;
}

.modal-content {
    animation: modalPop 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ===== Doodle Border ===== */
.doodle-border {
    border: 3px dashed #d1d5db;
    border-radius: 20px;
}

/* ===== Colorful scrollbar ===== */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f0eeff;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8b5cf6, #ec4899);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7c3aed, #db2777);
}

/* ===== Recording Pulse ===== */
@keyframes funPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); }
    50% { transform: scale(1.08); box-shadow: 0 4px 25px rgba(239, 68, 68, 0.5); }
}

.recording-pulse {
    animation: funPulse 1s ease-in-out infinite;
}

/* ===== Rainbow underline for headings ===== */
.rainbow-underline {
    background-image: linear-gradient(90deg, #f59e0b, #ec4899, #8b5cf6, #3b82f6, #10b981);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 4px;
}

/* ===== Confetti-like dots background ===== */
.dots-bg {
    background-image:
        radial-gradient(circle, #f59e0b22 1px, transparent 1px),
        radial-gradient(circle, #ec489922 1px, transparent 1px),
        radial-gradient(circle, #8b5cf622 1px, transparent 1px);
    background-size: 40px 40px, 60px 60px, 80px 80px;
    background-position: 0 0, 20px 20px, 10px 40px;
}