/* ============================================================
   16-comebacks — Comeback Ticker. Scoped under .sec-16-comebacks.
   Sits between 06-journey and 07-results; bg is the shared dark-act
   color (#0a1418) so it bridges both neighbors seamlessly.
   ============================================================ */

.sec-16-comebacks {
  background: #0a1418;
  color: var(--text-on-ink);
  padding-block: clamp(2.5rem, 3vw, 3.5rem) 3rem;
  overflow: hidden;
  position: relative;
}

/* --- Eyebrow + pulse-line --- */
.sec-16-comebacks__head {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

.sec-16-comebacks__eyebrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.sec-16-comebacks__pulse {
  width: 140px;
  height: 30px;
}
.sec-16-comebacks .pulse-line path {
  stroke: hsl(var(--accent-h) 70% 62%);
}

.sec-16-comebacks__eyebrow {
  color: hsl(var(--accent-h) 70% 62%);
}
.sec-16-comebacks__eyebrow::before {
  display: none;
}

/* --- Marquee --- */
.sec-16-comebacks__marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

.sec-16-comebacks__track {
  --marquee-dur: 55s;
  gap: 1.5rem;
}

/* --- Outcome card --- */
.sec-16-comebacks__card {
  display: flex;
  flex-direction: column;
  min-width: 320px;
  /* Flex items default to a content-based minimum size, so without a cap the review
     paragraph pushed each card wide enough to avoid wrapping at all: track width (and
     with it, marquee speed at a fixed --marquee-dur) ballooned to several times
     intended. max-width forces the text to wrap like a normal card. */
  max-width: 380px;
  padding: 1.5rem 1.5rem 1.25rem;
  background: hsl(200 30% 12%);
  border: 1px solid hsl(0 0% 100% / 0.08);
  border-radius: var(--radius-card);
}

.sec-16-comebacks__before {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-on-ink-dim);
}

.sec-16-comebacks__divider {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.7rem 0;
}

.sec-16-comebacks__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: sec-16-comebacks-pulse 2.2s ease-in-out infinite;
}
@keyframes sec-16-comebacks-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); transform: scale(1); }
  50% { box-shadow: 0 0 0 5px transparent; transform: scale(1.3); }
}

.sec-16-comebacks__arrow {
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
}

.sec-16-comebacks__after {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
}

.sec-16-comebacks__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.sec-16-comebacks__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  background: hsl(0 0% 100% / 0.06);
  border: 1px solid hsl(0 0% 100% / 0.1);
  color: var(--text-on-ink-dim);
}
.sec-16-comebacks__tag--time {
  color: hsl(var(--accent-h) 70% 62%);
  border-color: hsl(var(--accent-h) 60% 40% / 0.4);
}

@media (max-width: 480px) {
  .sec-16-comebacks__card {
    min-width: 280px;
    padding: 1.25rem 1.25rem 1rem;
  }
}

/* --- Reduced motion: static row of the first 3 cards --- */
html.reduced-motion .sec-16-comebacks__track[aria-hidden="true"] {
  display: none;
}
html.reduced-motion .sec-16-comebacks__track {
  animation: none;
}
html.reduced-motion .sec-16-comebacks__card:nth-child(n + 4) {
  display: none;
}
html.reduced-motion .sec-16-comebacks__marquee {
  mask-image: none;
  -webkit-mask-image: none;
  justify-content: center;
  overflow-x: auto;
}
html.reduced-motion .sec-16-comebacks__dot {
  animation: none;
}