/* ================================================================== */
/*  Next section — absolute layer inside .hero-stage__pin             */
/*                                                                    */
/*  Shares the pinned 100vh box with the hero, crossfaded in/out      */
/*  via --hero-exit (0 → 1 across the 20vh crossfade range).          */
/*                                                                    */
/*    opacity    : 0 → 1                                              */
/*    text slide : −100px → 0                                         */
/*    media slide: +100px → 0                                         */
/* ================================================================== */

.next-section {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #0b1220;
    color: #ffffff;
    padding: clamp(80px, 10vw, 140px) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: clamp(0, var(--hero-exit, 0), 1);
    pointer-events: none;
}

/* Once hero-exit has passed ~40%, the section is mostly visible — let it
   receive pointer events. (Can't drive pointer-events with var(), so JS
   toggles this class as a small enhancement.) */
.next-section.is-active {
    pointer-events: auto;
}

.next-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 160px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(4, 44, 113, 0.35) 0%,
        rgba(11, 18, 32, 0) 100%
    );
}

.next-section__inner {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    padding-left: 24px;
    padding-right: 24px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
}

/* ---------- Text column (slides in from the left) ---------- */

.next-section__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform: translateX(calc((1 - clamp(0, var(--hero-exit, 0), 1)) * -100px));
    will-change: transform;
}

.next-section__eyebrow {
    margin: 0;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--accent-amber);
}

.next-section__title {
    margin: 0;
    font-size: var(--fs-h1);
    font-weight: var(--fw-medium);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: #ffffff;
}

.next-section__desc {
    margin: 0;
    max-width: 540px;
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: var(--text-muted-on-dark);
}

.next-section__bullets {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.next-section__bullets li {
    position: relative;
    padding-left: 28px;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-muted-on-dark);
}
.next-section__bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #ffffff 0 22%, transparent 23%),
        var(--brand-fill-500);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

[dir="rtl"] .next-section__bullets li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .next-section__bullets li::before { left: auto; right: 0; }

/* ---------- Media column (slides in from the right) ---------- */

.next-section__media {
    transform: translateX(calc((1 - clamp(0, var(--hero-exit, 0), 1)) * 100px));
    will-change: transform;
}

/* The screenshot is a tablet PNG with a transparent background — let it
   float over the page color. No card frame, no shadow ring. */
.next-section__image {
    display: block;
    width: 100%;
}
.next-section__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- RTL: mirror slide directions ---------- */

[dir="rtl"] .next-section__text  { transform: translateX(calc((1 - clamp(0, var(--hero-exit, 0), 1)) * 100px)); }
[dir="rtl"] .next-section__media { transform: translateX(calc((1 - clamp(0, var(--hero-exit, 0), 1)) * -100px)); }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    .next-section__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .next-section__media {
        order: -1;
        max-width: 100%;           /* larger image on mobile — fills column width */
        margin: 0;
    }
}

@media (max-width: 640px) {
    /* 88px top = 64px navbar + 24px breathing room, so content never hides behind it. */
    .next-section { padding: 88px 0 40px; align-items: flex-start; }
    .next-section__text { gap: 12px; }
    .next-section__title { font-size: clamp(22px, 6vw, 30px); }
    .next-section__desc  { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
    .next-section__bullets { gap: 8px; }
    .next-section__bullets li { font-size: var(--fs-caption); padding-left: 24px; line-height: var(--lh-snug); }
    .next-section__bullets li::before { width: 14px; height: 14px; top: 0.5em; }
    [dir="rtl"] .next-section__bullets li { padding-left: 0; padding-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .next-section,
    .next-section__text,
    .next-section__media {
        opacity: 1 !important;
        transform: none !important;
    }
}