/* ===== MOBILE: ALTERNATING CARD LAYOUTS ===== */
/* Instead of boring vertical stack, cards shift left/right, overlap, and stagger */

@media(max-width:639px){
    /* Features grid becomes a zig-zag cascade */
    .features .grid-3col{
        display:flex;
        flex-direction:column;
        gap:0.8rem;
        perspective:600px; /* For 3D card flip effect */
    }
    
    .feature-card{
        width:88%;
        transition:transform 0.5s cubic-bezier(0.23,1,0.32,1),
                   opacity 0.5s ease,
                   margin 0.5s ease;
    }
    
    /* Odd cards lean right, even cards lean left */
    .feature-card:nth-child(odd){
        align-self:flex-start;
        margin-left:0;
        transform:rotate(-1.5deg) translateX(-8px);
    }
    .feature-card:nth-child(even){
        align-self:flex-end;
        margin-right:0;
        transform:rotate(1.5deg) translateX(8px);
    }
    
    /* When revealed (via Intersection Observer), snap to neutral */
    .feature-card.revealed:nth-child(odd),
    .feature-card.revealed:nth-child(even){
        transform:rotate(0deg) translateX(0);
    }
    
    /* Staggered entrance delays */
    .feature-card:nth-child(1){transition-delay:0s}
    .feature-card:nth-child(2){transition-delay:0.08s}
    .feature-card:nth-child(3){transition-delay:0.16s}
    .feature-card:nth-child(4){transition-delay:0.24s}
    .feature-card:nth-child(5){transition-delay:0.32s}
    .feature-card:nth-child(6){transition-delay:0.4s}

    /* ===== Steps: overlapping card stack ===== */
    .steps{
        display:flex;
        flex-direction:column;
        gap:0;
        position:relative;
        padding-left:0;
    }
    
    .step{
        width:92%;
        margin-bottom:-12px; /* Cards overlap slightly */
        position:relative;
        z-index:1;
        transition:transform 0.4s cubic-bezier(0.23,1,0.32,1),
                   box-shadow 0.4s ease,
                   z-index 0s;
        transform:translateY(0) scale(0.97);
    }
    
    /* Alternate horizontal shift */
    .step:nth-child(odd){
        align-self:flex-start;
        transform:translateX(-4px) scale(0.97);
    }
    .step:nth-child(even){
        align-self:flex-end;
        transform:translateX(4px) scale(0.97);
    }
    
    /* The top card pops forward */
    .step:first-child{
        z-index:5;
        transform:translateX(0) scale(1);
        border-color:var(--accent);
        box-shadow:0 12px 30px rgba(59,130,246,0.2);
    }
    
    /* On hover/tap, card lifts above others */
    .step:active,
    .step:hover{
        z-index:10 !important;
        transform:translateY(-6px) scale(1.02) !important;
        box-shadow:0 18px 40px rgba(59,130,246,0.3);
        border-color:var(--accent);
    }
    
    /* Revealed state — spread out slightly */
    .step.revealed:nth-child(odd){
        transform:translateX(0) scale(1);
    }
    .step.revealed:nth-child(even){
        transform:translateX(0) scale(1);
    }
    
    /* Step connector becomes a vertical dotted line behind cards */
    .step-connector{
        display:block;
        position:absolute;
        left:50%;
        width:2px;
        background:repeating-linear-gradient(
            to bottom,
            var(--accent) 0,
            var(--accent) 4px,
            transparent 4px,
            transparent 12px
        );
        z-index:0;
    }

    /* ===== Leaderboard & Groups: diagonal overlap ===== */
    .social-grid{
        display:flex;
        flex-direction:column;
        gap:0;
        position:relative;
    }
    
    .social-card{
        width:90%;
        transition:transform 0.5s cubic-bezier(0.23,1,0.32,1);
    }
    
    /* Leaderboard card sits top-left */
    .leaderboard-card{
        align-self:flex-start;
        transform:rotate(-1deg) translateY(0);
        z-index:3;
    }
    
    /* Groups card sits bottom-right, overlapping leaderboard */
    .groups-card{
        align-self:flex-end;
        transform:rotate(1deg) translateY(-20px);
        z-index:2;
        margin-top:-30px;
    }
    
    /* Revealed — both straighten out but keep slight overlap */
    .leaderboard-card.revealed{
        transform:rotate(0deg) translateY(0);
        box-shadow:0 15px 40px rgba(0,0,0,0.3);
    }
    .groups-card.revealed{
        transform:rotate(0deg) translateY(-15px);
        box-shadow:0 15px 40px rgba(0,0,0,0.3);
    }
    
    /* On tap, the groups card slides over the leaderboard */
    .groups-card:active{
        z-index:5;
        transform:rotate(0deg) translateY(-5px) scale(1.02);
    }

    /* ===== Pricing: fan-out from center ===== */
    .pricing-cards{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:0.8rem;
        position:relative;
    }
    
    .pricing-card{
        width:90%;
        max-width:340px;
        transition:transform 0.4s cubic-bezier(0.23,1,0.32,1),
                   box-shadow 0.4s ease;
    }
    
    /* Starter: slightly left */
    .pricing-card:nth-child(1){
        transform:translateX(-6px) rotate(-0.5deg);
        z-index:1;
    }
    /* Pro (featured): centered, forward */
    .pricing-card:nth-child(2){
        transform:translateX(0) scale(1.03);
        z-index:3;
        box-shadow:0 0 35px rgba(59,130,246,0.25);
    }
    /* Team: slightly right */
    .pricing-card:nth-child(3){
        transform:translateX(6px) rotate(0.5deg);
        z-index:2;
    }
    
    .pricing-card.revealed:nth-child(1){
        transform:translateX(0) rotate(0deg);
    }
    .pricing-card.revealed:nth-child(2){
        transform:translateX(0) scale(1.03);
    }
    .pricing-card.revealed:nth-child(3){
        transform:translateX(0) rotate(0deg);
    }

    /* ===== Support cards: masonry-like stagger ===== */
    .support-grid{
        display:flex;
        flex-direction:column;
        gap:0.8rem;
    }
    
    .support-card{
        width:90%;
        transition:transform 0.5s cubic-bezier(0.23,1,0.32,1);
    }
    
    .support-card:nth-child(1){
        align-self:flex-start;
        transform:translateX(-6px);
    }
    .support-card:nth-child(2){
        align-self:center;
        transform:translateY(-4px) scale(1.02);
        z-index:2;
    }
    .support-card:nth-child(3){
        align-self:flex-end;
        transform:translateX(6px);
    }
    
    .support-card.revealed:nth-child(1),
    .support-card.revealed:nth-child(2),
    .support-card.revealed:nth-child(3){
        transform:translateX(0) translateY(0);
    }

    /* ===== Timeline: wavy line, cards alternate sides ===== */
    .timeline-track{
        border-left:none;
        padding-left:0;
        position:relative;
    }
    
    /* Wavy vertical line using CSS */
    .timeline-track::before{
        content:'';
        position:absolute;
        left:20px;
        top:0;
        bottom:0;
        width:3px;
        background:repeating-linear-gradient(
            to bottom,
            var(--accent) 0,
            var(--accent) 6px,
            transparent 6px,
            transparent 14px
        );
        border-radius:2px;
        z-index:0;
    }
    
    .timeline-node{
        display:flex;
        align-items:flex-start;
        gap:0.8rem;
        margin-bottom:2rem;
        position:relative;
        padding-left:40px;
    }
    
    /* Alternate card sides */
    .timeline-node:nth-child(odd){
        flex-direction:row;
    }
    .timeline-node:nth-child(even){
        flex-direction:row-reverse;
        text-align:right;
    }
    
    .timeline-dot{
        position:absolute;
        left:20px;
        top:1.2rem;
        transform:translateX(-50%);
        z-index:1;
    }
    
    .timeline-card{
        flex:1;
        min-width:0;
    }
}

/* ===== CSS SCROLL-DRIVEN ANIMATIONS (no JS needed) ===== */
/* Uses @keyframes tied to animation-timeline: view() where supported */
/* Falls back gracefully on unsupported browsers */

@supports(animation-timeline:view()){
    /* Features: slide in from alternate sides */
    @keyframes slideInLeft{
        from{opacity:0;transform:translateX(-40px) rotate(-2deg)}
        to{opacity:1;transform:translateX(0) rotate(0deg)}
    }
    @keyframes slideInRight{
        from{opacity:0;transform:translateX(40px) rotate(2deg)}
        to{opacity:1;transform:translateX(0) rotate(0deg)}
    }
    @keyframes fadeInUp{
        from{opacity:0;transform:translateY(30px)}
        to{opacity:1;transform:translateY(0)}
    }
    
    .feature-card:nth-child(odd){
        animation:slideInLeft 0.6s ease forwards;
        animation-timeline:view();
        animation-range:entry 10% entry 50%;
    }
    .feature-card:nth-child(even){
        animation:slideInRight 0.6s ease forwards;
        animation-timeline:view();
        animation-range:entry 10% entry 50%;
    }
    
    .step{
        animation:fadeInUp 0.5s ease forwards;
        animation-timeline:view();
        animation-range:entry 5% entry 40%;
    }
    
    .pricing-card:nth-child(1){
        animation:slideInLeft 0.5s ease forwards;
        animation-timeline:view();
        animation-range:entry 10% entry 45%;
    }
    .pricing-card:nth-child(2){
        animation:fadeInUp 0.5s ease forwards;
        animation-timeline:view();
        animation-range:entry 10% entry 45%;
    }
    .pricing-card:nth-child(3){
        animation:slideInRight 0.5s ease forwards;
        animation-timeline:view();
        animation-range:entry 10% entry 45%;
    }
}

/* ===== ADVANCED HOVER MICRO-INTERACTIONS (Mobile tap) ===== */
@media(max-width:639px){
    /* Ripple tap effect on cards */
    .feature-card,
    .step,
    .pricing-card,
    .support-card{
        -webkit-tap-highlight-color:transparent;
        transition:transform 0.25s cubic-bezier(0.23,1,0.32,1),
                   box-shadow 0.25s ease,
                   border-color 0.25s ease;
    }
    
    /* Press-down effect */
    .feature-card:active,
    .step:active,
    .pricing-card:active{
        transform:scale(0.96) !important;
        box-shadow:0 4px 12px rgba(0,0,0,0.2) !important;
    }
    
    /* Featured card gets a subtle glow pulse */
    .pricing-card.featured{
        animation:featuredPulse 3s ease-in-out infinite;
    }
    @keyframes featuredPulse{
        0%,100%{box-shadow:0 0 25px rgba(59,130,246,0.15)}
        50%{box-shadow:0 0 45px rgba(59,130,246,0.3)}
    }
}

/* ===== ADVANCED ANIMATIONS & EFFECTS ===== */
/* Theme: Light mode */
body.light-mode{
    --bg:#f8fafc;
    --surface:#ffffff;
    --surface-hover:#f1f5f9;
    --text:#0f172a;
    --text-secondary:#475569;
    --border:#e2e8f0;
    --border-light:#cbd5e1;
}
body.light-mode .page-loader{background:#f8fafc}
body.light-mode .site-header{background:rgba(248,250,252,0.8);border-color:rgba(0,0,0,0.06)}
body.light-mode .hero-card{box-shadow:0 25px 60px rgba(0,0,0,0.1)}
body.light-mode .hero{background:radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.06) 0%, transparent 60%)}

/* Floating background shapes */
.hero-bg-shapes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.shape{
    position:absolute;border-radius:50%;filter:blur(60px);
    animation:shapeFloat 20s ease-in-out infinite;
}
.shape-1{width:400px;height:400px;background:rgba(59,130,246,0.06);top:-100px;left:-100px}
.shape-2{width:300px;height:300px;background:rgba(96,165,250,0.04);bottom:-50px;right:-50px;animation-delay:-7s}
.shape-3{width:200px;height:200px;background:rgba(59,130,246,0.05);top:50%;right:20%;animation-delay:-14s}
@keyframes shapeFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(0.9)}}

/* Scatter & Reset animation for cards */
[data-scatter]{
    transition:opacity 0.6s cubic-bezier(0.23,1,0.32,1),
              transform 0.6s cubic-bezier(0.23,1,0.32,1);
}
[data-scatter].scattering{
    opacity:0;
    transform:translate(var(--sx,0),var(--sy,0)) rotate(var(--sr,0deg)) scale(0.8);
}
[data-scatter].resetting{
    opacity:1;
    transform:translate(0,0) rotate(0deg) scale(1);
}

/* Hero card entry animation */
.hero-card{
    animation:cardEntry 0.8s cubic-bezier(0.23,1,0.32,1) 0.3s both;
}
@keyframes cardEntry{
    from{opacity:0;transform:translateY(40px) rotateX(10deg)}
    to{opacity:1;transform:translateY(0) rotateX(0)}
}

/* Hero image float enhanced */
.hero-img{animation:heroFloat 7s ease-in-out infinite}
@keyframes heroFloat{
    0%,100%{transform:translateY(0) rotate(0deg)}
    25%{transform:translateY(-12px) rotate(-0.5deg)}
    50%{transform:translateY(-6px) rotate(0.5deg)}
    75%{transform:translateY(-18px) rotate(-0.3deg)}
}

/* Glowing highlight underline */
.highlight::after{
    animation:glowPulse 2.5s ease-in-out infinite;
    background:linear-gradient(90deg,var(--accent),var(--accent-light),var(--accent));
    background-size:200% 100%;
}
@keyframes glowPulse{0%,100%{opacity:0.5;background-position:0% 50%}50%{opacity:1;background-position:100% 50%}}

/* Feature card gradient border on hover */
.feature-card::before{
    content:'';position:absolute;inset:-1px;border-radius:var(--radius-lg);
    background:linear-gradient(135deg,var(--accent),transparent 50%,var(--accent-light));
    opacity:0;transition:opacity 0.4s;z-index:-1;
}
.feature-card:hover::before{opacity:0.15}

/* Step connector animated */
.step-connector{
    background:linear-gradient(90deg,var(--accent),var(--border),var(--accent));
    background-size:200% 100%;
    animation:connectorFlow 3s linear infinite;
}
@keyframes connectorFlow{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Ringing bell animation */
.ringing{
    animation:bellRing 2s ease-in-out infinite;
    display:inline-block;
}
@keyframes bellRing{
    0%,100%{transform:rotate(0)}
    10%,30%{transform:rotate(-15deg)}
    20%,40%{transform:rotate(15deg)}
    50%{transform:rotate(-10deg)}
    60%{transform:rotate(10deg)}
    70%{transform:rotate(-5deg)}
    80%{transform:rotate(5deg)}
}

/* Chart bars animated */
.chart-bar.active{
    animation:barGlow 2s ease-in-out infinite alternate;
}
@keyframes barGlow{from{box-shadow:0 0 10px var(--accent-glow)}to{box-shadow:0 0 25px rgba(59,130,246,0.5)}}

/* Pricing card featured glow */
.pricing-card.featured::after{
    content:'';position:absolute;inset:-2px;border-radius:var(--radius-lg);
    background:linear-gradient(135deg,var(--accent),transparent 40%,var(--accent-light),transparent 60%);
    z-index:-1;animation:borderRotate 6s linear infinite;background-size:300% 300%;
}
@keyframes borderRotate{0%{background-position:0% 0%}100%{background-position:300% 300%}}

/* Scatter effect on scroll (handled by JS) */
[data-scatter].scattering{transition-duration:0.5s}

/* Theme toggle rotate */
.theme-toggle i{transition:transform 0.5s cubic-bezier(0.68,-0.55,0.27,1.55)}
.theme-toggle:hover i{transform:rotate(180deg)}

/* Mobile menu stagger animation */
.nav-links.active a{
    animation:slideInRight 0.4s ease forwards;
    opacity:0;
}
.nav-links.active a:nth-child(1){animation-delay:0.05s}
.nav-links.active a:nth-child(2){animation-delay:0.1s}
.nav-links.active a:nth-child(3){animation-delay:0.15s}
.nav-links.active a:nth-child(4){animation-delay:0.2s}
.nav-links.active a:nth-child(5){animation-delay:0.25s}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}

/* Button ripple effect */
.btn{position:relative;overflow:hidden}
.btn::after{
    content:'';position:absolute;top:50%;left:50%;width:0;height:0;
    background:rgba(255,255,255,0.2);border-radius:50%;
    transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;
}
.btn:active::after{width:300px;height:300px}

/* Scroll progress bar */
.scroll-progress{
    position:fixed;top:0;left:0;height:3px;
    background:linear-gradient(90deg,var(--accent),var(--accent-light));
    z-index:10000;transition:width 0.1s;
}

/* Section entry animation */
.lazy-section.revealed{animation:sectionReveal 0.8s cubic-bezier(0.23,1,0.32,1) forwards}
@keyframes sectionReveal{
    from{opacity:0;transform:translateY(40px)}
    to{opacity:1;transform:translateY(0)}
}


/* ===== HOW IT WORKS — ADVANCED PAINT EFFECTS ===== */
.step {
    transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), 
                box-shadow 0.4s ease,
                border-color 0.3s ease;
}
.step:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(59,130,246,0.15), 0 0 0 1px var(--accent) inset;
}
.step:hover::after {
    background: radial-gradient(circle, rgba(59,130,246,0.2) 0%, transparent 70%);
    transform: scale(1.3);
    transition: transform 0.4s ease, background 0.4s ease;
}

/* Painted brush stroke behind card on hover */
.step::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    border-radius: 2px;
}
.step:hover::before {
    transform: scaleX(1);
}