/* Round16 — Marketplace — section-time
   Figma: 4096:6131 (desktop chart, states 4096:6134/8840/8886/8929) | 4096:6253 (tablet/mobile static grid)
   Desktop (>1024px): pinned scroll-jack chart — sticky container steps through 4 dot+card states.
   Tablet/mobile (<=1024px): static 2x2 card grid, no JS, no sticky, no dots/line (Figma frame "referral"). */

.r16-time {
    /* Dark theme tokens come from global.css (body.page-template-static-pages-R16page-
       marketplace-php) -- not redefined here. */

    position: relative;
    display: flex;
    justify-content: center;
    background: var(--color-1st-bg);
    /* Papers over a hairline sub-pixel gap some browsers can render between two
       adjacent same-color sections (fractional computed heights from flex/aspect-ratio
       layout round independently per element) -- paint-only, doesn't affect layout.
       Both edges: a neighbor with its own overflow:hidden (e.g. section-proven) can't
       show its own copy of this shadow, so covering both sides here is what protects it. */
    box-shadow: 0 -2px 0 0 var(--color-1st-bg), 0 2px 0 0 var(--color-1st-bg);
    padding: var(--var-140, 140px) var(--section-horizontal-padding, 32px);
    font-family: var(--font-body);
}

.r16-time * {
    box-sizing: border-box;
}

.r16-time__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-80, 80px);
    width: 100%;
    max-width: var(--container-max, 1400px);
}

.r16-time__headings {
    display: flex;
    justify-content: center;
    width: 100%;
}

.r16-time__title {
    max-width: 800px;
    margin: 0;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h2, 48px);
    line-height: var(--lh-heading, 1.15);
    color: var(--color-1st-fg);
}

/* ==========================================================================
   Desktop chart (>1024px) — pinned scroll-jack
   ========================================================================== */

.r16-time__scroller {
    position: relative;
    width: 100%;
}

.r16-time__viewport {
    position: sticky;
    top: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.r16-time__chart {
    position: relative;
    width: 1400px;
    height: 753px;
    flex-shrink: 0;
    transform-origin: top center;
}

/* ---------- Decorative grid + zigzag line (identical across all 4 states) ---------- */
.r16-time__bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1700px;
    height: 900px;
    opacity: 0.6;
    pointer-events: none;
}

.r16-time__bg-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: var(--mask-bg);
    mask-image: var(--mask-bg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 1399px 917px;
    mask-size: 1399px 917px;
    -webkit-mask-position: 331px -30px;
    mask-position: 331px -30px;
}

.r16-time__bg-img {
    position: absolute;
    display: block;
}

.r16-time__bg-img--a {
    left: 0;
    top: 45px;
    width: 1700px;
    height: 811px;
}

.r16-time__bg-img--b {
    left: 100px;
    top: 0;
    width: 1501px;
    height: 900px;
}

.r16-time__line {
    position: absolute;
    left: -44px;
    top: -92px;
    width: 1489.72px;
    height: 936.657px;
    pointer-events: none;
}

.r16-time__line img {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleY(-1);
}

/* ---------- Progress dots (glow squares; only the active one lights up) ---------- */
.r16-time__dot {
    position: absolute;
    width: 64px;
    height: 64px;
}

.r16-time__dot--1 { left: 274px; top: 45px; }
.r16-time__dot--2 { left: 413px; top: 302px; }
.r16-time__dot--3 { left: 692px; top: 521px; }
.r16-time__dot--4 { left: 1101px; top: 589px; }

.r16-time__dot i {
    position: absolute;
    display: block;
    background: var(--color-2nd-brd, #cc6af9);
    transition: opacity 0.4s ease;
}

.r16-time__dot i:nth-child(1) { left: 0;    top: 0;    width: 64px; height: 64px; opacity: 0; }
.r16-time__dot i:nth-child(2) { left: 8px;  top: 8px;  width: 48px; height: 48px; opacity: 0; }
.r16-time__dot i:nth-child(3) { left: 16px; top: 16px; width: 32px; height: 32px; opacity: .1; }
.r16-time__dot i:nth-child(4) { left: 24px; top: 24px; width: 16px; height: 16px; opacity: .2; }

.r16-time__dot.is-active i:nth-child(1) { opacity: .2; }
.r16-time__dot.is-active i:nth-child(2) { opacity: .4; }
.r16-time__dot.is-active i:nth-child(3) { opacity: .6; }
.r16-time__dot.is-active i:nth-child(4) { opacity: .8; }

/* ---------- Card shell (shared by all 4 states) ----------
   All 4 cards share ONE position (--card-x/--card-y, set by scripts.js's setActive
   on .r16-time__chart and inherited down) instead of each having its own fixed
   top/right -- so the currently-visible card visibly SLIDES to the next state's
   Figma position as it cross-fades, matching the Figma prototype's Smart Animate
   transition between states, rather than swapping in place. */
.r16-time__card {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 312px;
    display: flex;
    flex-direction: column;
    background: rgba(5, 5, 5, 0.6);
    border: 1px solid var(--color-reverse-stroke, #4a4949);
    backdrop-filter: blur(1.5px);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translate(var(--card-x, 358px), var(--card-y, 45px));
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.r16-time__card.is-visible {
    opacity: 1;
    visibility: visible;
}

.r16-time__card-copy {
    display: flex;
    flex-direction: column;
    gap: var(--var-16, 16px);
    padding: var(--var-32, 32px) var(--var-24, 24px) 0;
}

.r16-time__card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h5, 25px);
    line-height: var(--lh-heading, 1.15);
    color: var(--color-1st-fg);
}

.r16-time__card-desc {
    margin: 0;
    font-weight: 400;
    font-size: var(--fs-body, 16px);
    line-height: var(--lh-body, 1.4);
    color: var(--color-2nd-fg);
}

.r16-time__card-media {
    position: relative;
    width: 100%;
    height: 138px;
    flex-shrink: 0;
}

/* Card 1 media — chat bubble + "Read 9:39" receipt */
.r16-time__card--1 .r16-time__card-media {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px 0 0;
}

.r16-time__f1-bubble {
    display: block;
    width: 129%;
    max-width: 129%;
    height: auto;
    margin-left: -17%;
}

.r16-time__f1-meta {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
}

/* Card 2 media — two rotated gradient cards + question mark */
.r16-time__f2-card {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 24px;
    border: 1px solid #7b7676;
    background: linear-gradient(180deg, #262629 0%, #cc6af9 100%);
    transform: rotate(-15deg);
}

.r16-time__f2-card--back {
    left: 122px;
    top: 27px;
    opacity: .5;
}

.r16-time__f2-card--front {
    left: 86px;
    top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px 12px;
}

.r16-time__f2-icon {
    flex-shrink: 0;
}

.r16-time__f2-bar {
    display: block;
    background: rgba(255, 255, 255, 0.24);
    border-radius: var(--radius-pill, 999px);
}

.r16-time__f2-bar--lg { width: 102px; height: 20px; }
.r16-time__f2-bar--sm { width: 74px; height: 16px; margin-top: -10px; }

/* Card 3 media — spend gauge chart */
.r16-time__f3-chart {
    position: absolute;
    left: 28px;
    bottom: 3px;
    width: 244px;
    height: 124px;
}

.r16-time__f3-a {
    position: absolute;
    left: 28px;
    bottom: 3px;
    width: 46.79px;
    height: 61.28px;
}

.r16-time__f3-b {
    position: absolute;
    left: 140px;
    top: 128px;
    width: 20px;
    height: 20px;
}

.r16-time__f3-c {
    position: absolute;
    left: 43.44px;
    top: 81.94px;
    width: 106.06px;
    height: 55.56px;
}

/* Card 4 media — faded grid of busy affiliates */
.r16-time__f4-grid {
    position: absolute;
    left: 50%;
    top: 13.8px;
    transform: translateX(-50%);
    width: 300px;
    height: 110.4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    -webkit-mask-image: var(--mask-bg);
    mask-image: var(--mask-bg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 300px 138px;
    mask-size: 300px 138px;
    -webkit-mask-position: 24px -13.8px;
    mask-position: 24px -13.8px;
}

.r16-time__f4-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.r16-time__f4-row img {
    width: 51.2px;
    height: 51.2px;
    flex-shrink: 0;
}

.r16-time__f4-bar {
    display: block;
    width: 288px;
    height: 51.2px;
    flex-shrink: 0;
}

/* ==========================================================================
   Tablet/mobile static grid (<=1024px) — hidden on desktop
   ========================================================================== */
.r16-time__grid {
    display: none;
}

@media (max-width: 1024px) {
    .r16-time {
        /* Figma tablet "referral" (4096:6253): py-[var(--var-72,72px)] -- --var-140
           doesn't auto-respond to the breakpoint on its own, unlike --section-horizontal-padding. */
        padding-top: var(--var-72, 72px);
        padding-bottom: var(--var-72, 72px);
    }

    .r16-time__scroller {
        display: none;
    }

    .r16-time__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--var-20, 20px);
        width: 100%;
    }

    .r16-time__grid-card {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        border: 1px solid var(--color-reverse-stroke, #4a4949);
        overflow: hidden;
    }

    .r16-time__grid-copy {
        display: flex;
        flex-direction: column;
        gap: var(--var-16, 16px);
        width: 100%;
        padding: var(--var-32, 32px) var(--var-24, 24px) 0;
    }

    .r16-time__grid-title {
        margin: 0;
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: var(--fs-h5, 20px);
        line-height: var(--lh-heading, 1.15);
        color: var(--color-1st-fg);
    }

    .r16-time__grid-desc {
        margin: 0;
        font-size: var(--fs-body, 16px);
        line-height: var(--lh-body, 1.4);
        color: var(--color-2nd-fg);
    }

    .r16-time__grid-img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 900 / 414;
        object-fit: cover;
        margin-top: auto;
    }
}

@media (max-width: 640px) {
    .r16-time__grid {
        grid-template-columns: 1fr;
    }
}