/* SPARKO - Style CSS */
/* מרכז מלודיקה - פיתוח פלוס */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'Heebo', 'Assistant', sans-serif;
    direction: rtl;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(to bottom, #0f172a, #581c87, #0f172a);
    min-height: 100vh;
    color: white;
}

/* ===== Animations ===== */
@keyframes twinkle {
    0%, 100% { 
        opacity: 0.2; 
        transform: scale(0.8); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.4); 
    }
}

@keyframes float3D {
    0%, 100% { 
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(0px); 
    }
    50% { 
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-15px); 
    }
}

@keyframes bounce { 
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(10px); 
    }
}

@keyframes pulse {
    0%, 100% { 
        opacity: 0.5; 
    }
    50% { 
        opacity: 1; 
    }
}

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

@keyframes spin {
    to { 
        transform: rotate(360deg); 
    }
}

@keyframes step-card-appear {
    0% { 
        opacity: 0; 
        transform: translateY(80px) scale(0.9) rotateX(15deg); 
    }
    50% { 
        transform: translateY(-10px) scale(1.02) rotateX(-3deg); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1) rotateX(0deg); 
    }
}

@keyframes card-appear {
    0% { 
        opacity: 0; 
        transform: translateY(50px) scale(0.8) rotateX(20deg); 
    }
    60% { 
        transform: translateY(-10px) scale(1.05) rotateX(-5deg); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1) rotateX(0deg); 
    }
}

/* ===== Animation Classes ===== */
.animate-step-card-appear {
    animation: step-card-appear 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-card-appear-1 { 
    animation: card-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards; 
}

.animate-card-appear-2 { 
    animation: card-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards; 
}

.animate-card-appear-3 { 
    animation: card-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards; 
}

.animate-card-appear-4 { 
    animation: card-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards; 
}

/* ===== SPARKO Logo ===== */
.sparko-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: float3D 4s ease-in-out infinite;
}

.sparko-logo {
    width: clamp(500px, 70vw, 1100px);
    height: auto;
    filter: drop-shadow(0 0 40px rgba(147, 51, 234, 1))
            drop-shadow(0 0 70px rgba(236, 72, 153, 0.9))
            drop-shadow(0 0 100px rgba(59, 130, 246, 0.8))
            drop-shadow(0 0 130px rgba(168, 85, 247, 0.7))
            brightness(1.2);
}

@media (max-width: 768px) {
    .sparko-logo {
        width: 90vw;
    }
}

/* ===== Utility Classes ===== */
.hidden {
    display: none;
}

/* ===== Step Cards ===== */
.step-card {
    position: sticky;
    top: 50px;
    margin-bottom: 8px;
    opacity: 0;
    transform: translateY(80px) scale(0.9);
    transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.step-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ===== Media Cards ===== */
.media-card {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.media-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ===== Use Case Cards ===== */
.use-case-card:hover {
    transform: translateY(-5px) scale(1.03);
}

/* ===== FAQ ===== */
.faq-icon {
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* ===== Stars Background ===== */
.star {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));
}

/* ===== Bounce Animation Helper ===== */
.animate-bounce {
    animation: bounce 2s ease-in-out infinite;
}

/* ===== Pulse Animation Helper ===== */
.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ===== Spin Animation Helper ===== */
.animate-spin {
    animation: spin 0.6s linear infinite;
}