/* Round15 — Motivate — section-showcase
   Figma: 4361:9620 (Day 1, desktop) | 4492:11777 (tablet, shared with mobile @ max-width:1024px)
   Extra slides (issue.md "Effect. Scroll to overlay"): 4364:30708 (Day 2) | 4364:31357 (Day 5)
   Card corner radius (~12px) measured from the design screenshot; no dedicated Figma variable was
   returned for it, so the closest existing spacing token (--var-12) is reused instead of a hardcoded value.

   Stacking-cards mechanic (matches brightdata.com's #template_340033): each
   .r15-showcase__card is independently `position: sticky` at the same `top` offset,
   laid out normally one after another with a plain margin-bottom gap between them —
   no scroll-jack wrapper, no inflated height. As the user scrolls, each card slides
   normally into its sticky resting spot and then simply stays there; the NEXT card
   arriving at the same resting spot naturally paints over it (later DOM order wins
   the paint order in the same stacking context) — the "stacking" is pure CSS. assets/
   scripts.js only adds a blur + shrink to a card as the next one approaches its own
   resting spot, computed directly from the next card's live position. Applies at every
   breakpoint — only the `top` offset and image sizing change below 1024px (see the
   responsive block at the end of this file). */

.r15-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-2nd-bg);
    padding: 0 var(--section-horizontal-padding) var(--var-140);
}

.r15-showcase * {
    box-sizing: border-box;
}

.r15-showcase__content {
    width: 100%;
    max-width: var(--container-max);
    display: flex;
    justify-content: center;
}

/* ---------- Headings (Figma: gap-28 > gap-12 > gap-16 > heading + description) ---------- */
.r15-showcase__headings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-16);
    width: 100%;
}

.r15-showcase__title {
    margin: 0;
    max-width: 800px;
    width: 100%;
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: 1.15;
    color: var(--color-1st-fg);
    text-align: center;
    font-variation-settings: 'opsz' 14;
}

.r15-showcase__desc {
    margin: 0;
    max-width: 600px;
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-2nd-fg);
    text-align: center;
    font-variation-settings: 'opsz' 14;
}

/* ---------- Stacking cards ---------- */
.r15-showcase__stack {
    width: 100%;
    max-width: var(--container-max, 1400px);
    margin-top: var(--section-gap);
}

.r15-showcase__card {
    position: sticky;
    /* Clears .header-r11 (position:fixed, ~98px tall, z-index:60) so the card isn't
       hidden behind it while stuck. */
    top: 100px;
    z-index: 1;
    height: calc(512.62px + var(--var-40));
    margin-bottom: var(--var-64, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--section-horizontal-padding);
    background: var(--color-2nd-bg);
    will-change: filter, transform;
}

.r15-showcase__card:last-child {
    margin-bottom: 0;
}

.r15-showcase__slide-img {
    /* Figma 4361:9620 specifies a fixed (non-fluid) image height of 512.62px — width is
       intentionally left to each image's own natural ratio instead of a shared box, so
       slides never letterbox/pillarbox against each other. */
    display: block;
    width: auto;
    height: 512.62px;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--var-12);
}

@media (prefers-reduced-motion: reduce) {
    .r15-showcase__card {
        filter: none !important;
        transform: none !important;
    }
}

/* ---------- Responsive (shared tablet + mobile breakpoint) ---------- */
@media (max-width: 1024px) {
    /* Same sticky stacking mechanic as desktop (see the file-top comment) — only the
       `top` offset and sizing change: the mobile/tablet header is ~56px tall versus
       desktop's ~98px, and the image switches from a fixed 512.62px box to a fluid
       one so it scales to the narrower column width instead of overflowing it. */
    .r15-showcase__card {
        top: 72px;
        height: auto;
        margin-bottom: var(--var-20, 20px);
        padding: var(--var-20, 20px) var(--section-horizontal-padding, 20px);
    }

    .r15-showcase__slide-img {
        /* The 512.62px fixed height is a desktop-only design value. */
        width: 100%;
        height: auto;
    }
}