/* =========================================================
   BlogBannerDevnexus / Product Gallery On-Scroll Animations
   GPU-accelerated, staggered on-scroll reveal
   ========================================================= */

.BlogBannerDevnexus-content {
    overflow: hidden;
}

/* Common will-change for GPU composite layers */
.BlogBannerDevnexus-title,
.BlogBannerDevnexus-subtitle,
.BlogBannerDevnexus-gallery-item {
    will-change: transform, opacity;
}

/* =========================================================
   HEADING & SUBTITLE ON-SCROLL REVEAL
   ========================================================= */

.BlogBannerDevnexus-title {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition:
        opacity 0.85s cubic-bezier(.22, 1, .36, 1),
        transform 0.85s cubic-bezier(.22, 1, .36, 1);
}

.BlogBannerDevnexus-subtitle {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition:
        opacity 0.85s cubic-bezier(.22, 1, .36, 1) 0.15s,
        transform 0.85s cubic-bezier(.22, 1, .36, 1) 0.15s;
}

.BlogBannerDevnexus-content.is-inview .BlogBannerDevnexus-title,
.BlogBannerDevnexus-content.is-inview .BlogBannerDevnexus-subtitle,
.BlogBannerDevnexus-wrapper.is-inview .BlogBannerDevnexus-title,
.BlogBannerDevnexus-wrapper.is-inview .BlogBannerDevnexus-subtitle,
.BlogBannerDevnexus-title.is-inview,
.BlogBannerDevnexus-subtitle.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Helper animation if class applied */
.animate-fade-up {
    opacity: 0;
    transform: translate3d(0, 35px, 0);
    transition: opacity 0.8s cubic-bezier(.22, 1, .36, 1), transform 0.8s cubic-bezier(.22, 1, .36, 1);
}
.is-inview .animate-fade-up,
.animate-fade-up.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* =========================================================
   GALLERY ITEMS ON-SCROLL ENTRANCE (SS WALI IMAGES)
   ========================================================= */

/* Base Item state (before scroll reveal) */
.BlogBannerDevnexus-gallery-item {
    flex: 1;
    opacity: 0;
    transition:
        opacity 0.85s cubic-bezier(.22, 1, .36, 1),
        transform 0.85s cubic-bezier(.22, 1, .36, 1);
}

/* Left items start shifted to the left */
.BlogBannerDevnexus-gallery-item.animate-left {
    transform: translate3d(-55px, 0, 0);
}

/* Right items start shifted to the right */
.BlogBannerDevnexus-gallery-item.animate-right {
    transform: translate3d(55px, 0, 0);
}

/* Center zoom items start slightly scaled down with slight Y shift */
.BlogBannerDevnexus-gallery-item.animate-zoom {
    transform: translate3d(0, 25px, 0) scale3d(0.86, 0.86, 1);
}

/* When parent gallery or item gets is-inview */
.BlogBannerDevnexus-gallery.is-inview .BlogBannerDevnexus-gallery-item,
.BlogBannerDevnexus-gallery-item.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

/* =========================================================
   STAGGERED DELAYS (Fast, responsive & elegant)
   ========================================================= */

/* Top Row (first_simPle) */
.BlogBannerDevnexus-gallery.first_simPle.is-inview .BlogBannerDevnexus-item-1 {
    transition-delay: 0.05s;
}
.BlogBannerDevnexus-gallery.first_simPle.is-inview .BlogBannerDevnexus-item-2 {
    transition-delay: 0.18s;
}
.BlogBannerDevnexus-gallery.first_simPle.is-inview .BlogBannerDevnexus-item-3 {
    transition-delay: 0.30s;
}
.BlogBannerDevnexus-gallery.first_simPle.is-inview .BlogBannerDevnexus-item-4 {
    transition-delay: 0.42s;
}
.BlogBannerDevnexus-gallery.first_simPle.is-inview .BlogBannerDevnexus-item-5 {
    transition-delay: 0.54s;
}

/* Bottom Row (mirror-row) */
.BlogBannerDevnexus-gallery.mirror-row.is-inview .BlogBannerDevnexus-item-1 {
    transition-delay: 0.10s;
}
.BlogBannerDevnexus-gallery.mirror-row.is-inview .BlogBannerDevnexus-item-2 {
    transition-delay: 0.22s;
}
.BlogBannerDevnexus-gallery.mirror-row.is-inview .BlogBannerDevnexus-item-3 {
    transition-delay: 0.34s;
}
.BlogBannerDevnexus-gallery.mirror-row.is-inview .BlogBannerDevnexus-item-4 {
    transition-delay: 0.46s;
}
.BlogBannerDevnexus-gallery.mirror-row.is-inview .BlogBannerDevnexus-item-5 {
    transition-delay: 0.58s;
}

/* Manual Delay Classes Fallback */
.animate-delay-1 {
    transition-delay: 0.18s;
}
.animate-delay-2 {
    transition-delay: 0.36s;
}

/* =========================================================
   IMAGE HOVER EFFECT (Subtle 3D zoom on card)
   ========================================================= */

.BlogBannerDevnexus-img-wrapper {
    overflow: hidden;
    position: relative;
    border-radius: 28px;
    background-color: #f1f5f9;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), box-shadow 0.4s ease;
}

.BlogBannerDevnexus-img-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(14, 165, 233, 0.16);
}

.BlogBannerDevnexus-img-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.BlogBannerDevnexus-img-wrapper:hover img {
    transform: scale(1.06);
}

/* =========================================================
   ACCESSIBILITY & REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .BlogBannerDevnexus-title,
    .BlogBannerDevnexus-subtitle,
    .BlogBannerDevnexus-gallery-item,
    .animate-fade-up,
    .animate-left,
    .animate-right,
    .animate-zoom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .BlogBannerDevnexus-img-wrapper img,
    .BlogBannerDevnexus-img-wrapper {
        transition: none !important;
        transform: none !important;
    }
}