/* ================================================
   AXIOS STEPS — Mobile Timeline + Desktop Enhanced
   ================================================ */

/* ── Portfolio card: always 2 lines for meta tag ── */
.bringer-portfolio-card-title .bringer-meta {
    display: block;
    min-height: calc(var(--bringer-t-meta-fs, 12px) * 2 * 1.5);
}

/* ================================================
   DESKTOP STEPS — Enhanced Visual Treatment
   ================================================ */

.axios-desktop-rows {
    position: relative;
}

/* Vertical connecting line between desktop steps */
.axios-desktop-rows::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 60px;
    bottom: 60px;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(5, 190, 254, 0.18) 15%,
        rgba(68, 129, 235, 0.18) 85%,
        transparent 100%
    );
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

/* Desktop step rows — extra breathing room */
.axios-desktop-rows .stg-row {
    position: relative;
    z-index: 1;
}

/* Desktop: enhanced image container */
.axios-desktop-rows .bringer-parallax-media {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.axios-desktop-rows .bringer-parallax-media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 1px solid rgba(92, 157, 255, 0.14);
    pointer-events: none;
    z-index: 2;
    transition: border-color 0.5s ease;
}

.axios-desktop-rows .bringer-parallax-media:hover::after {
    border-color: rgba(5, 190, 254, 0.3);
}

.axios-desktop-rows .bringer-parallax-media img {
    border-radius: 20px;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.axios-desktop-rows .bringer-parallax-media:hover img {
    transform: scale(1.04) !important;
}

/* Desktop: step label pill */
.axios-desktop-rows .bringer-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 10px;
    background: rgba(5, 190, 254, 0.08);
    border: 1px solid rgba(5, 190, 254, 0.2);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #5C9DFF;
    margin-bottom: 16px;
}

.axios-desktop-rows .bringer-label::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #05BEFE, #4481EB);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(5, 190, 254, 0.5);
}

/* Desktop: text block subtle treatment */
.axios-desktop-rows [data-appear="fade-right"][class*="stg-col-6"],
.axios-desktop-rows [data-appear="fade-left"][class*="stg-col-6"] {
    padding: 0 8px;
}

.axios-desktop-rows h4 {
    margin-top: 0;
    margin-bottom: 14px;
    line-height: 1.28;
}

/* Ghost step number in background (desktop) */
.axios-desktop-rows .stg-row:nth-child(1)::before { content: '01'; }
.axios-desktop-rows .stg-row:nth-child(2)::before { content: '02'; }
.axios-desktop-rows .stg-row:nth-child(3)::before { content: '03'; }
.axios-desktop-rows .stg-row:nth-child(4)::before { content: '04'; }

.axios-desktop-rows .stg-row::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 140px;
    font-weight: 900;
    letter-spacing: -6px;
    line-height: 1;
    background: linear-gradient(160deg, rgba(5, 190, 254, 0.06) 0%, rgba(68, 129, 235, 0.02) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    white-space: nowrap;
}

/* ================================================
   MOBILE TIMELINE — Hidden on desktop
   ================================================ */

.axios-mobile-steps {
    display: none;
}

@media (max-width: 760px) {

    /* Hide desktop rows */
    .axios-desktop-rows {
        display: none !important;
    }

    /* Also remove desktop connecting line pseudo */
    .axios-desktop-rows::before {
        display: none;
    }

    /* Show mobile timeline */
    .axios-mobile-steps {
        display: block;
        position: relative;
        margin-top: 0;
    }

    /* ── Sticky Progress Badge ──
       Key fixes:
       - NO backdrop-filter (main cause of flicker)
       - transform: translateZ(0) for GPU layer
       - top uses --st-header-height variable + buffer
       - z-index 55 = visible above content, below header (111)
    ── */
    .ams-sticky-badge {
        position: sticky;
        top: calc(var(--st-header-height, 72px) + 10px);
        z-index: 55;
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
        pointer-events: none;
        /* Force GPU compositing layer to avoid repaint flicker */
        transform: translateZ(0);
        will-change: transform;
    }

    .ams-badge-pill {
        /* Solid background — NO backdrop-filter to prevent flicker */
        background: rgba(10, 13, 20, 0.94);
        border: 1px solid rgba(92, 157, 255, 0.2);
        border-radius: 100px;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 6px;
        /* Inner glow instead of blur */
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(5, 190, 254, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
        /* GPU layer for the pill itself */
        transform: translateZ(0);
    }

    .ams-badge-label {
        display: none;
    }

    .ams-badge-dots {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .ams-badge-dot {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: rgba(245, 247, 250, 0.15);
        transition: background 0.35s ease, width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        flex-shrink: 0;
    }

    .ams-badge-dot.is-active {
        background: linear-gradient(135deg, #05BEFE, #4481EB);
        width: 22px;
        box-shadow: 0 0 8px rgba(5, 190, 254, 0.45);
    }

    /* ── Timeline Container ── */
    .ams-timeline {
        position: relative;
        padding-left: 44px;
    }

    /* ── Timeline track: no global line — per-step connectors instead ── */
    .ams-timeline::before {
        display: none;
    }

    /* Per-step connector: from this dot centre to the next dot centre.
       Dot centre = top:22px + radius 14px = 36px from step top.
       Gap between steps = margin-bottom: 1.75rem.
       So the connector must reach 1.75rem + 36px past this step's bottom. */
    .ams-step:not(:last-child)::before {
        content: '';
        position: absolute;
        left: -31px;            /* = -44px offset + 13px track position */
        top: 36px;              /* starts at this step's dot centre */
        bottom: calc(-1.75rem - 36px); /* ends exactly at next step's dot centre */
        width: 2px;
        background: rgba(245, 247, 250, 0.07);
        border-radius: 2px;
        z-index: 0;
    }

    /* Animated progress fill — aligned to first dot centre */
    .ams-timeline-progress {
        position: absolute;
        left: 13px;
        top: 36px;              /* was 20px — now starts at first dot centre */
        width: 2px;
        height: 0%;
        background: linear-gradient(180deg, #05BEFE 0%, #4481EB 100%);
        border-radius: 2px;
        z-index: 1;
        transition: height 0.2s linear;
        box-shadow: 0 0 12px rgba(5, 190, 254, 0.4);
    }

    /* ── Individual Step ──
       Fixes:
       - will-change declared in advance
       - Spring-like easing (expo out)
       - Larger translate for more dramatic entrance
    ── */
    .ams-step {
        position: relative;
        margin-bottom: 1.75rem;
        opacity: 0;
        transform: translateY(32px);
        transition:
            opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
        /* Ensure dots always render above the animated progress bar */
        z-index: 3;
    }

    /* Stagger via nth-child — each step enters slightly later */
    .ams-step:nth-child(1) { transition-delay: 0ms; }
    .ams-step:nth-child(2) { transition-delay: 60ms; }
    .ams-step:nth-child(3) { transition-delay: 120ms; }
    .ams-step:nth-child(4) { transition-delay: 180ms; }

    .ams-step:last-child {
        margin-bottom: 0;
    }

    .ams-step.is-visible {
        opacity: 1;
        transform: translateY(0);
        /* Release will-change after animation to free GPU memory */
        will-change: auto;
    }

    /* Timeline dot */
    .ams-step-dot {
        position: absolute;
        left: -44px;
        top: 22px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #07090D;
        border: 2px solid rgba(245, 247, 250, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        transition:
            border-color 0.45s ease,
            box-shadow 0.45s ease;
    }

    .ams-step-dot::after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(245, 247, 250, 0.2);
        transition:
            background 0.45s ease,
            transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .ams-step.is-visible .ams-step-dot {
        border-color: #4481EB;
        box-shadow:
            0 0 0 4px rgba(68, 129, 235, 0.1),
            0 0 14px rgba(5, 190, 254, 0.3);
    }

    .ams-step.is-visible .ams-step-dot::after {
        background: linear-gradient(135deg, #05BEFE, #4481EB);
        transform: scale(1.2);
    }

    /* ── Step Card ── */
    .ams-step-card {
        background: rgba(20, 23, 31, 0.9);
        border: 1px solid rgba(245, 247, 250, 0.06);
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        transition:
            border-color 0.45s ease,
            box-shadow 0.45s ease;
        /* GPU layer for smooth border/shadow transitions */
        transform: translateZ(0);
    }

    .ams-step.is-visible .ams-step-card {
        border-color: rgba(92, 157, 255, 0.14);
        box-shadow:
            0 8px 40px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }


    /* ── Step Image ── */
    .ams-step-image {
        position: relative;
        width: 100%;
        aspect-ratio: 4/3;
        overflow: hidden;
    }

    .ams-step-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.05);
        transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
    }

    .ams-step.is-visible .ams-step-image img {
        transform: scale(1);
        will-change: auto;
    }

    /* Bottom gradient over image */
    .ams-step-image::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 55%;
        background: linear-gradient(to top, rgba(20, 23, 31, 0.98) 0%, transparent 100%);
        z-index: 1;
        pointer-events: none;
    }

    /* ── Step Body ── */
    .ams-step-body {
        padding: 16px 20px 22px;
        position: relative;
        z-index: 2;
    }

    .ams-step-tag {
        display: none;
    }

    .ams-step-body h4 {
        font-size: 1.15rem !important;
        line-height: 1.33 !important;
        color: #F5F7FA !important;
        margin: 0 0 9px !important;
        padding: 0 !important;
    }

    .ams-step-body p {
        font-size: 0.875rem !important;
        line-height: 1.65 !important;
        color: #B8BAC2 !important;
        margin: 0 !important;
    }

    /* Bottom shimmer line */
    .ams-step-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(5, 190, 254, 0.3), transparent);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.6s 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .ams-step.is-visible .ams-step-card::after {
        transform: scaleX(1);
    }
}

/* ================================================
   TABLET (760–1024px) — hide desktop number overlay
   ================================================ */
@media (max-width: 1024px) {
    .axios-desktop-rows .stg-row::before {
        display: none;
    }

    .axios-desktop-rows::before {
        display: none;
    }
}