/* Falling Cards Background Effect - Card Positioning Only */
/* Card definitions are in analytics-cards.css */

.cards-background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10; /* Level 10-19: Background decorative elements */
    overflow: visible;
}

/* Ensure body allows absolute positioning */
body {
    position: relative;
}

/* Make specific section backgrounds semi-transparent so cards show through */
#call-to-action {
    backdrop-filter: blur(1px);
    position: relative;
}

#sample-reports {
    backdrop-filter: blur(1px);
    position: relative;
}

#faq {
    backdrop-filter: blur(1px);
    position: relative;
}

/* Other sections stay above cards but don't block them */
#understand,
#additional-features,
#plans,
#fork,
#title-section {
    position: relative;
    z-index: 20; /* Level 20-29: Page sections */
}

/* Level 30-39: Section content containers */
section > * {
    position: relative;
    z-index: 30;
}

/* Level 40-49: Interactive elements - always clickable */
button, a, input, select, textarea,
.clickable-block, .feature-button, .cta-button, .nav-btn,
.feature-card, .report-card {
    position: relative;
    z-index: 40 !important;
}

/* HERO SECTION CARDS - Overview cards around CTA */
.card-position-hero-1 { top: 200px; left: 5%; transform: rotate(-25deg); z-index: 11; }
.card-position-hero-2 { top: 300px; right: 10%; transform: rotate(35deg); z-index: 12; }
.card-position-hero-3 { top: 450px; left: 15%; transform: rotate(-15deg); z-index: 13; }
.card-position-hero-4 { top: 600px; right: 25%; transform: rotate(45deg); z-index: 11; }

/* PLANS SECTION CARDS - Different card types */
.card-position-plans-1 { top: 1500px; left: 8%; transform: rotate(-20deg); z-index: 12; }
.card-position-plans-2 { top: 1650px; right: 12%; transform: rotate(30deg); z-index: 11; }
.card-position-plans-3 { top: 1800px; left: 25%; transform: rotate(-10deg); z-index: 13; }
.card-position-plans-4 { top: 1950px; right: 30%; transform: rotate(25deg); z-index: 11; }
.card-position-plans-5 { top: 2100px; left: 45%; transform: rotate(-35deg); z-index: 12; }

/* FEATURES SECTION CARDS - Plot cards */
.card-position-features-1 { top: 2300px; left: 10%; transform: rotate(-15deg); z-index: 11; }
.card-position-features-2 { top: 2450px; right: 15%; transform: rotate(20deg); z-index: 12; }
.card-position-features-3 { top: 2600px; left: 30%; transform: rotate(-25deg); z-index: 11; }
.card-position-features-4 { top: 2750px; right: 35%; transform: rotate(40deg); z-index: 13; }

/* REPORTS SECTION CARDS - Table cards */
.card-position-reports-1 { top: 2900px; left: 5%; transform: rotate(-12deg); z-index: 12; }
.card-position-reports-2 { top: 3050px; right: 8%; transform: rotate(18deg); z-index: 11; }
.card-position-reports-3 { top: 3200px; left: 20%; transform: rotate(-22deg); z-index: 13; }
.card-position-reports-4 { top: 3350px; right: 20%; transform: rotate(15deg); z-index: 11; }
.card-position-reports-5 { top: 3500px; left: 40%; transform: rotate(-30deg); z-index: 12; }

/* FAQ SECTION CARDS - Dense stacked pile effect creating depth */
.card-position-faq-1 { top: 3650px; left: 30%; transform: rotate(-12deg); z-index: 15; }
.card-position-faq-2 { top: 3680px; left: 35%; transform: rotate(8deg); z-index: 14; }
.card-position-faq-3 { top: 3700px; left: 28%; transform: rotate(-5deg); z-index: 13; }
.card-position-faq-4 { top: 3720px; left: 40%; transform: rotate(15deg); z-index: 18; }
.card-position-faq-5 { top: 3660px; left: 32%; transform: rotate(-20deg); z-index: 16; }
.card-position-faq-6 { top: 3740px; left: 25%; transform: rotate(10deg); z-index: 11; }
.card-position-faq-7 { top: 3690px; left: 38%; transform: rotate(-8deg); z-index: 17; }
.card-position-faq-8 { top: 3730px; left: 33%; transform: rotate(25deg); z-index: 12; }
.card-position-faq-9 { top: 3710px; left: 27%; transform: rotate(-15deg); z-index: 19; }
.card-position-faq-10 { top: 3670px; left: 42%; transform: rotate(30deg); z-index: 13; }

/* Animation for subtle floating effect */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(var(--rotation)); }
    50% { transform: translateY(-4px) rotate(var(--rotation)); }
}

/* Apply subtle animation to select cards */
.card-position-hero-2 { animation: float 14s ease-in-out infinite; --rotation: 35deg; }
.card-position-plans-1 { animation: float 16s ease-in-out infinite 2s; --rotation: -20deg; }
.card-position-features-3 { animation: float 18s ease-in-out infinite 4s; --rotation: -25deg; }
.card-position-reports-2 { animation: float 15s ease-in-out infinite 6s; --rotation: 18deg; }
.card-position-faq-5 { animation: float 12s ease-in-out infinite 3s; --rotation: -20deg; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .analytics-card {
        opacity: 0.25;
        transform: scale(0.7) rotate(var(--mobile-rotation));
    }
}