this code causes the section the start flickering on scroll, :root {
    --bg-1: #041D2E;
    --accent-1: #00E5FF;
    --accent-2: #0077B6;
    --glass: rgba(255,255,255,0.06);
    --muted: #9aa6b2;
    --radius: 18px;
    --ease: cubic-bezier(.2,.9,.3,1);
    --card-w: clamp(320px, 36vw, 540px);
    --gap: 28px;
}
/* Ensure background layers never capture pointer events and sit behind content */
#quilting-diagonal {
    position: relative;
    z-index: 1; /* base layer */
}

 
  
/* Prevent rapid CSS keyframe vibration on small elements */

.mini-card, .diag-card, .media-large, .floating-tag {
    will-change: transform, opacity;
    transition: transform 300ms cubic-bezier(.2,.9,.3,1), opacity 300ms ease;
    animation: none !important; /* avoid competing keyframe animation unless intentionally used */
}
/* Keep image hover subtle and smooth */

.media-clip img {
    transition: transform 700ms cubic-bezier(.2,.9,.3,1), filter 400ms ease;
    border-radius:20px;
}
/* If you used inline transitions on many elements, normalize them here */


/* Content wrapper sits above everything */

#quilting-diagonal .qa-diag-wrap {
    position: relative;
    z-index: 5;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    align-items: center;
    padding: 40px;
}

@media (max-width:980px) {
    #quilting-diagonal .qa-diag-wrap {
        grid-template-columns: 1fr;
        padding: 24px;
    }
}
/* Diagonal band */

#quilting-diagonal .diag-band {
    position: absolute;
    left: -15%;
    top: 30%;
    width: 130%;
    height: 48%;
    background: linear-gradient(90deg, rgba(0,229,255,0.04), rgba(0,119,182,0.02));
    transform: skewY(-6deg);
    border-radius: 12px;
    z-index: 2;
    box-shadow: 0 36px 120px rgba(0,0,0,0.5);
    pointer-events: none;
}

@media (max-width:980px) {
    #quilting-diagonal .diag-band {
        display: none
    }
}
/* LEFT: Tilted interactive card */

#quilting-diagonal .diag-left {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}


    #quilting-diagonal .diag-card:focus {
        outline: 3px solid rgba(0,229,255,0.08);
        transform: translateY(-6px) rotateX(4deg);
    }
/* Card contents */

#quilting-diagonal .diag-title {
    color: var(--accent-1);
    font-size: clamp(18px,2.6vw,30px);
    text-transform: uppercase;
    font-weight: 800;
    margin: 0;
}

#quilting-diagonal .diag-badge {
    background: linear-gradient(90deg, rgba(0,229,255,0.06), rgba(0,119,182,0.04));
    color: var(--accent-1);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
}






  
    /* RIGHT: media stack */

    #quilting-diagonal .diag-right {
        position: relative;
        z-index: 6;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #quilting-diagonal .media-stack {
        position: relative;
        width: 100%;
        max-width: 740px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: center;
    }
    /* MEDIA: explicit heights and full cover */

    #quilting-diagonal .media-large {
        border-radius: 16px;
        overflow: hidden;
        z-index: 5;
        box-shadow: 0 28px 90px rgba(0,0,0,0.6);
 
        position: relative;
        height: 420px; /* fixed visual frame */
        min-height: 360px;
        max-height: 520px;
    }

@media (max-width:980px) {
    #quilting-diagonal .media-large {
        height: 360px;
    }
}

@media (max-width:560px) {
    #quilting-diagonal .media-large {
        height: 260px;
    }
}

#quilting-diagonal .media-clip {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}

    #quilting-diagonal .media-clip img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        transform: translateZ(0);
        transition: transform .9s cubic-bezier(.2,.9,.3,1), filter .6s ease;
        will-change: transform;
        display: block;
    }

#quilting-diagonal .media-large:hover .media-clip img {
    transform: scale(1.035) translateY(-6px);
    filter: brightness(1.03) saturate(1.05);
}
/* vignette overlay to emphasize top area */

#quilting-diagonal .img-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(50% 60% at 50% 20%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.18) 70%);
    mix-blend-mode: multiply;
}
/* mini cards overlapping image */

#quilting-diagonal .media-cards {
    position: relative; /* important for z-index */
    z-index: 10; /* higher than .media-large (z-index implied by translateZ) */
    margin-top: -56px; /* keeps overlapping effect */
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    transition: transform 0.36s var(--ease), box-shadow 0.36s var(--ease);
}

#quilting-diagonal .mini-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
    backdrop-filter: blur(6px);
    padding: 14px;
    border-radius: 12px;
    min-width: 180px;
    color: #e6fbff;
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.03);
    transition: transform .36s var(--ease), box-shadow .36s var(--ease);
    position: relative;
    overflow: visible;
    transform: translateZ(80px);
}


    
    /* Add this to your CSS */
    #quilting-diagonal .mini-card,
    #quilting-diagonal .mini-card * {
        pointer-events: none !important;
    }

        #quilting-diagonal .mini-card:hover {
            transform: translateZ(85px) translateY(0); /* subtle pop without vibration */
            box-shadow: 0 30px 90px rgba(0,0,0,0.6);
        }
/* floating tag */

#quilting-diagonal .floating-tag {
    position: absolute;
    left: 10%;
    top: 6%;
    background: linear-gradient(90deg, rgba(0,229,255,0.06), rgba(0,119,182,0.02));
    padding: 10px 18px;
    border-radius: 999px;
    color: var(--accent-1);
    font-weight: 800;
    box-shadow: 0 18px 60px rgba(0,229,255,0.06);

}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    #quilting-diagonal .ribbon, #quilting-diagonal .diag-animated-bg::after, #quilting-diagonal .particle-layer, #quilting-diagonal .media-clip img, #quilting-diagonal .diag-card, #quilting-diagonal .floating-tag {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* Tablet & medium screens */
@media (max-width: 980px) {
    #quilting-diagonal .qa-diag-wrap {
        gap: 12px;
    }

    /* Mini-cards become smaller and wrap */
    #quilting-diagonal .media-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    #quilting-diagonal .mini-card {
        min-width: 120px;
        padding: 12px;
        font-size: 0.9rem;
    }

    #quilting-diagonal .diag-card {
        width: 90% !important ;
        
    }
    /* FORM FIRST on mobile */
    .diag-right {
        order: 1;
    }

    /* TEXT SECOND on mobile */
    .diag-left {
        order: 2;
        transform: none;
        clip-path: none;
        text-align: center;
        min-height: 400px;
    }
}






/* Base mobile adjustments for smoother scrolling */
@media (max-width: 652px) {
    #quilting-diagonal {
        padding: 40px 12px;
        overflow: hidden; /* reduce repaints */
        contain: layout paint; /* isolate container */
    }

        /* Stack content vertically */
        #quilting-diagonal .qa-diag-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        /* Left card full width, reduce shadows */
        #quilting-diagonal .diag-card {
            width: 70vw;
            max-width: 400px;
            box-shadow: 0 12px 36px rgba(0,0,0,0.3);
            transform: none !important; /* remove 3D transforms */
            transition: none !important;
        }

        /* Media image square & fully visible */
        #quilting-diagonal .media-large {
            width: 90vw;
            max-width: 400px;
            height: auto;
            aspect-ratio: 1/1;
            object-fit: cover;
            object-position: top center;
            box-shadow: 0 12px 36px rgba(0,0,0,0.3);
            transition: none !important;
            transform: none !important;
        }

        /* Hide mini-cards & floating elements */
        #quilting-diagonal .mini-card,
        #quilting-diagonal .floating-tag,
        #quilting-diagonal .ribbon,
        #quilting-diagonal .diag-animated-bg::after,
        #quilting-diagonal .particle-layer {
            display: none !important;
            animation: none !important;
            transition: none !important;
        }

        /* Center media-cards */
        #quilting-diagonal .media-cards {
            width: 80%;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        /* Reduce heavy background filters */
        #quilting-diagonal .ribbon,
        #quilting-diagonal .diag-animated-bg::after {
            filter: blur(6px) saturate(110%);
        }

    /* Font scaling for readability */
    .diag-head h2 {
        font-size: clamp(1.2rem, 6vw, 2.5rem);
    }

    .diag-body p {
        font-size: clamp(0.9rem, 4.5vw, 1.5rem);
    }
}
/* Responsive */
/* Extra-small screens (iPhone SE, small Androids) */
@media (max-width: 480px) {
    #quilting-diagonal {
        padding: 32px 10px;
    }

        #quilting-diagonal .media-large {
            width: 85vw;
            max-width: 420px;
            aspect-ratio: 1/1;
        }

        /* Minimal shadows and transforms */
        #quilting-diagonal .diag-card,
        #quilting-diagonal .media-large {
            box-shadow: 0 8px 24px rgba(0,0,0,0.25);
        }
}






/* mini-card dead zone utility (increase if needed) */

#quilting-diagonal .mini-card[data-hover="true"] {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}

.mini-card h4 {
    color: #00E5FF;
}

#quilting-diagonal.qa-diagonal {
    position: relative;
    padding: 60px 20px;
    background: linear-gradient(180deg,var(--bg-1),#022034);
    color: #e6f7fb;
    overflow: hidden;
    font-family: Inter, system-ui, "Segoe UI", Roboto, -apple-system, Arial;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#quilting-diagonal .diag-card {
    width: var(--card-w);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));

    border-radius: var(--radius);
    padding: 26px;
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: 0 18px 60px rgba(2,12,22,0.6);

 
    will-change: transform;
}
@media (min-width: 900px) {
    #quilting-diagonal .diag-card {
        backdrop-filter: blur(8px) saturate(120%);
        transform-style: preserve-3d;
        transition: transform .45s var(--ease), box-shadow .45s var(--ease);
    }


    #quilting-diagonal .media-large {
        transform: translateZ(0);
        transition: transform .6s var(--ease);
    }

    #quilting-diagonal > .diag-animated-bg, #quilting-diagonal > svg.qa-bg-svg, #quilting-diagonal .particle-layer, #quilting-diagonal .ribbon {
        pointer-events: none !important;
    }

    #quilting-diagonal > .diag-animated-bg,
    #quilting-diagonal > svg.qa-bg-svg {
        position: absolute;
        inset: 0;
        z-index: 0; /* always behind content */
        height: 100%;
    }

    #quilting-diagonal .qa-diag-wrap {
        position: relative;
        z-index: 2; /* content above background */
    }

    #quilting-diagonal * {
        backface-visibility: hidden;
        transform-style: preserve-3d;
    }
    /* Section base and stacking */


    /* Animated BG container: ensure it's behind svg and content but visible */

    #quilting-diagonal > .diag-animated-bg {
        position: absolute;
        inset: 0;
        z-index: 0; /* behind content but above page background */
        pointer-events: none;
        overflow: hidden;
        transform: translate3d(0,0,0);
        will-change: transform;
    }
    /* ribbons & ambient overlay */

    #quilting-diagonal .ribbon {
        position: absolute;
        width: 160%;
        height: 40%;
        left: -30%;
        top: 12%;
        transform-origin: center;
        background: linear-gradient(90deg, rgba(0,229,255,0.06), rgba(0,119,182,0.03));
        filter: blur(36px) saturate(140%);
        border-radius: 24%;
        opacity: 0.9;
        animation: ribbonFloat 22s linear infinite;
        will-change: transform, opacity;
    }

        #quilting-diagonal .ribbon.ribbon-2 {
            top: 44%;
            left: -20%;
            height: 32%;
            background: linear-gradient(90deg, rgba(0,180,216,0.04), rgba(0,120,180,0.02));
            animation-duration: 28s;
            transform-origin: 30% 50%;
        }

    #quilting-diagonal .diag-animated-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 10% 15%, rgba(0,229,255,0.02), transparent 10%), radial-gradient(circle at 85% 85%, rgba(0,119,182,0.015), transparent 10%);
        pointer-events: none;
        mix-blend-mode: screen;
        will-change: opacity;
    }
    /* Ribbon animation */

    @keyframes ribbonFloat {
        0% {
            transform: translate3d(0,0,0) rotate(-6deg) scale(1);
            opacity: .95;
        }

        25% {
            transform: translate3d(6%,-3%,0) rotate(-4deg) scale(1.03);
            opacity: .9;
        }

        50% {
            transform: translate3d(0%,4%,0) rotate(-2deg) scale(1);
            opacity: .92;
        }

        75% {
            transform: translate3d(-6%,-2%,0) rotate(-5deg) scale(.98);
            opacity: .9;
        }

        100% {
            transform: translate3d(0,0,0) rotate(-6deg) scale(1);
            opacity: .95;
        }
    }

    #quilting-diagonal {
        pointer-events: none !important;
    }
        /* Ensure the wrapper holding the CTA is also clickable (Diag-card) */
        #quilting-diagonal .diag-card {
            pointer-events: auto !important;
        }

        #quilting-diagonal .cta-ripple {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle, rgba(255,255,255,0.08) 2%, transparent 50%);
            opacity: 0;
            transform: scale(0);
            transition: opacity .45s, transform .45s;
            pointer-events: none;
        }

    @keyframes diagFloat {
        0% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-16px)
        }

        100% {
            transform: translateY(0)
        }
    }
    /* particle dot defaults (JS will populate) */

    #quilting-diagonal .diag-particle {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        transform: translate3d(0,0,0);
        transition: transform 10s linear, opacity 6s ease-in-out;
        will-change: transform, opacity;
    }

    #quilting-diagonal .floating-tag {
        transform: translateZ(80px);
        animation: diagFloat 5.5s ease-in-out infinite;
        will-change: transform;
    }

    #quilting-diagonal .mini-card::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px; /* extends slightly below the visible card */
        height: 10px; /* buffer height (tweak 8–14px if needed) */
        pointer-events: none; /* ignore pointer so tiny edge touches don't trigger anything */
        background: transparent;
        z-index: 2;
        pointer-events: none;
    }
}