/**
 * @fileoverview Landing Page Interactive UI & Feature Cards Stylesheet
 * @module iBotMM/LandingPageStyles
 * @organization Intelligent Software Creation House Company Limited
 * @author Engineering Team <dev@ibotmm.com>
 * @version 1.0.0
 * @license Proprietary
 */

/* ==========================================
   1. LANDING CANVAS & BACKGROUND GRID
   ========================================== */

#flow-design {
    touch-action: none; /* Critical for mobile/touch screen dragging */
    user-select: none; /* Prevents text selection while dragging */
    background: #ffffff;
    background-image: radial-gradient(#ced4da 1px, transparent 1px);
    background-size: 10px 10px;
    text-shadow: #ffffff 0px 1px 0px;
}

/* ==========================================
   2. INTERACTIVE FEATURE CARDS
   ========================================== */

.animated-card {
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
}

.animated-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1) !important;
}

.feature-icon-wrapper {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.animated-card:hover .feature-icon-wrapper {
    transform: scale(1.1) rotate(-3deg);
}

/* ==========================================
   3. IMAGE HOVER EFFECTS
   ========================================== */

.flow-image-hover {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    cursor: pointer;
    border-radius: 0.75rem;
}

.flow-image-hover:hover {
    transform: scale(1.25); /* Zooms image slightly */
}

/* ==========================================
   4. CALL TO ACTION (CTA) BANNER SECTION
   ========================================== */

.cta-banner-section {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #1a58d6 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle background accent glow */
.cta-banner-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.cta-btn-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2) !important;
}