/* Momnt case study, part 3: the member journey, the Moments flow, the team rows and the map.
   One phone shows the app's real screens; steps or chips beside it switch the screen
   (case-momnt-flow.js). Tall screens scroll inside the phone. Tokens live in case-momnt.css. */

.mo-flow { color: var(--mo-cream); }

/* ---------- the phone ---------- */
.mo-phone { position: relative; isolation: isolate; width: min(100%, 320px, calc((100svh - 120px) * .44)); margin: 0 auto; padding: 9px; border-radius: 50px; background: #0b0503; box-shadow: 0 0 0 1px rgb(255 214 190 / 16%), inset 0 0 0 2px rgb(255 255 255 / 6%), 0 60px 120px -50px rgb(255 106 19 / 70%); }
.mo-phone::before { content: ""; position: absolute; inset: -18% -40%; z-index: -1; background: radial-gradient(closest-side, rgb(255 106 19 / 30%), transparent); pointer-events: none; }
.mo-phone__screen { position: relative; aspect-ratio: 430 / 932; overflow: hidden; border-radius: 41px; background: #f4f0f2; }
.mo-phone__screen img { position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity .5s ease; }
.mo-phone__screen img.is-on { opacity: 1; }
.mo-phone__screen img.is-on[style*="--shift"] { animation: mo-scroll 9s ease-in-out .8s infinite alternate both; }
@keyframes mo-scroll { 0%, 12% { transform: none; } 88%, 100% { transform: translateY(var(--shift)); } }

/* ---------- Moments flow: phone + six steps ---------- */
.mo-flow { background: radial-gradient(60% 50% at 20% 60%, rgb(255 106 19 / 16%), transparent 70%), var(--mo-night); }
.mo-flow__head { display: grid; justify-items: center; gap: 16px; max-width: 820px; margin: 0 auto; text-align: center; }
.mo-flow__head .cs-kicker { margin: 0; }
.mo-flow__lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--mo-text); }
.mo-flow__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 104px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }
.mo-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.mo-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 20px; width: 100%; padding: 20px 0; border: 0; border-top: 1px solid var(--mo-line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mo-steps li:last-child .mo-step { border-bottom: 1px solid var(--mo-line); }
.mo-step__n { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 106 19 / 12%); box-shadow: inset 0 0 0 1px rgb(255 106 19 / 40%); font-size: 14px; font-weight: 600; color: var(--accent); transition: background .3s, color .3s; }
.mo-step__t { align-self: center; min-height: 44px; display: flex; align-items: center; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: rgb(255 244 236 / 55%); transition: color .3s; }
.mo-step__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.mo-step__p > span { overflow: hidden; font-size: 15.5px; line-height: 1.6; color: var(--mo-text); }
.mo-step:hover .mo-step__t, .mo-step:focus-visible .mo-step__t { color: var(--mo-cream); }
.mo-step.is-on .mo-step__n { background: var(--accent); color: var(--mo-black); }
.mo-step.is-on .mo-step__t { color: var(--mo-cream); }
.mo-step.is-on .mo-step__p { grid-template-rows: 1fr; }
.mo-step.is-on .mo-step__p > span { padding-top: 4px; }
.mo-step::after { content: ""; position: absolute; left: 64px; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
[data-mo-flow].is-auto .mo-step.is-on::after { animation: mo-progress var(--mo-dur, 5s) linear both; }
@keyframes mo-progress { to { transform: scaleX(1); } }
.mo-stepper { display: none; }

/* ---------- the two halves: member journey, then the team ---------- */
.mo-journey, .mo-after { color: var(--mo-cream); }
.mo-journey { background: linear-gradient(180deg, var(--mo-black), var(--mo-night)); }
.mo-after { background: var(--mo-black); }
.mo-part { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px clamp(40px, 6vw, 96px); align-items: end; }
.mo-part .cs-h2 { margin: 0; }
.mo-part__lead { max-width: 480px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--mo-text); }
.mo-chapters { display: grid; gap: clamp(88px, 10vw, 152px); margin: clamp(64px, 8vw, 112px) 0 0; padding: 0; list-style: none; }
/* A thin line joins one step to the next, down the middle of the gap. */
.mo-chapters > li { position: relative; }
.mo-chapters > li + li::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: clamp(88px, 10vw, 152px); background: linear-gradient(180deg, transparent, rgb(255 106 19 / 45%) 30%, rgb(255 106 19 / 45%) 70%, transparent); }
.mo-shot { width: 100%; margin: 0; }
.mo-shot img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 0 0 1px var(--mo-line), 0 40px 90px -50px rgb(255 106 19 / 55%); }
.mo-shot--tall { max-width: 440px; }
.mo-row--wide .mo-shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; }
.mo-row--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mo-row--wide.mo-row--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.mo-row__tag span { margin-right: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.mo-row__tag--center { justify-self: center; }

/* ---------- rows: one visual beside its copy, alternating ---------- */
.mo-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.mo-row--flip .mo-row__media { order: 2; }
.mo-row__copy { display: grid; gap: 18px; max-width: 480px; }
.mo-row__tag { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mo-amber); }
.mo-row__copy h3 { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.mo-row__copy p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--mo-text); }
.mo-row__media { display: grid; justify-items: center; gap: 28px; }
.mo-chips { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 244 236 / 6%); box-shadow: inset 0 0 0 1px var(--mo-line); }
.mo-chip { padding: 10px 18px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: rgb(255 244 236 / 62%); white-space: nowrap; cursor: pointer; transition: background .3s, color .3s; }
.mo-chip:hover { color: var(--mo-cream); }
.mo-chip.is-on { background: var(--accent); color: var(--mo-black); }

/* ---------- scene bands: real-life moments between sections ---------- */
.mo-scene { position: relative; margin: 0; background: linear-gradient(180deg, var(--mo-night), var(--mo-black)); color: var(--mo-cream); }
.mo-scene img { display: block; width: 100%; height: clamp(380px, 46vw, 820px); object-fit: cover; mask-image: linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent); }

@media (max-width: 900px) {
  .mo-flow__grid, .mo-row, .mo-row--wide, .mo-row--wide.mo-row--flip, .mo-part { grid-template-columns: 1fr; gap: 28px; }
  .mo-part { gap: 18px; }
  /* Steps stack: the words come first, then the screen they describe, kept short. */
  .mo-chapters { gap: 72px; margin-top: 56px; }
  .mo-chapters > li + li::before { display: none; }
  .mo-chapters > li + li { padding-top: 36px; border-top: 1px solid var(--mo-line); margin-top: -36px; }
  .mo-row__copy { order: -1; gap: 14px; max-width: 600px; }
  .mo-row--flip .mo-row__media { order: 0; }
  .mo-row__media { gap: 20px; }
  .mo-shot--tall { max-width: 320px; justify-self: center; }
  .mo-phone { width: min(100%, 210px); padding: 6px; border-radius: 36px; }
  .mo-phone__screen { border-radius: 30px; }
  .mo-flow__grid { gap: 24px; margin-top: 40px; }
  /* One step at a time under the phone, with previous / next. */
  .mo-steps li:not(:has(.is-on)) { display: none; }
  .mo-steps li:last-child .mo-step, .mo-step { border: 0; padding: 0; cursor: default; }
  .mo-step::after { display: none; }
  .mo-stepper { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--mo-line); }
  .mo-stepper button { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 244 236 / 8%); color: var(--mo-cream); cursor: pointer; }
  .mo-stepper button:hover { background: var(--accent); color: var(--mo-black); }
  .mo-stepper p { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .12em; color: rgb(255 244 236 / 60%); }
}
@media (max-width: 720px) {
  .mo-flow__head { text-align: left; justify-items: start; }
  .mo-chip { padding: 9px 14px; font-size: 13px; }
  .mo-row__copy h3 { font-size: 26px; }
  .mo-row__copy p { font-size: 16px; }
  .mo-chapters { gap: 56px; }
  .mo-chapters > li + li { padding-top: 28px; margin-top: -28px; }
  .mo-scene img { height: auto; aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-phone__screen img, .mo-step__p { transition: none; }
  .mo-phone__screen img.is-on[style*="--shift"] { animation: none; }
}


/* hero: showcase render (3044x1542) is the section background on desktop; section takes the image's shape so it shows whole.
   Copy sits in the dark left edge, meta in the dark right edge, phones stay clear in the middle. */
@media (min-width: 1101px) {
  .mo-hero { aspect-ratio: 3044 / 1542; display: flex; align-items: center; padding-block: clamp(96px, 8vw, 140px) clamp(40px, 4vw, 72px); }
  .mo-hero__glow { display: none; }
  .mo-hero__grid { position: static; width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, .75fr); align-items: center; }
  .mo-hero__copy { grid-column: 1; position: relative; z-index: 1; }
  .mo-hero__meta { grid-column: 3; grid-row: 1; position: relative; z-index: 1; grid-template-columns: 1fr; }
  .mo-hero__phone { position: absolute; inset: 0; z-index: 0; }
  .mo-hero__phone img { width: 100%; height: 100%; object-fit: cover; mask-image: none; -webkit-mask-image: none; }
}

/* team steps: portrait phone photos shown whole, rows balanced around them */
.mo-chapters--team .mo-row--wide, .mo-chapters--team .mo-row--wide.mo-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mo-chapters--team .mo-shot--phone { max-width: 520px; justify-self: center; }
.mo-row--wide .mo-shot--phone img { aspect-ratio: auto; object-fit: initial; }