/* ResultsScene — horizontal 3-stop timeline
   --------------------------------------------------------- */

.mmx-res {
  position: relative;
  padding: clamp(90px, 12vw, 160px) 0 clamp(80px, 10vw, 140px);
  background: var(--mm-ink);
  color: var(--mm-fg1);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mmx-res-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
  z-index: 1;
}

/* --- HEAD --------------------------------------------------- */

.mmx-res-head {
  max-width: 780px;
  margin: 0 0 clamp(48px, 6vw, 80px);
  position: relative;
  z-index: 3;
}
.mmx-res-head .mmx-eyebrow { margin-bottom: 18px; display: inline-block; }

.mmx-res-headline {
  font-family: var(--mm-font-display, var(--mm-font-body, serif));
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 18px;
  text-wrap: balance;
  color: var(--mm-fg1);
}
.mmx-res-headline-em {
  display: block;
  font-style: italic;
  background: linear-gradient(92deg, var(--mm-gold-bright, #f5dc94), var(--mm-gold, #e2c06b) 55%, var(--mm-gold-deep, #a97b1e));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 2px;
}
.mmx-res-lead {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: var(--mm-fg3);
  margin: 0;
  max-width: 62ch;
}

/* --- TIMELINE ----------------------------------------------- */

.mmx-res-timeline {
  position: relative;
  padding-top: 12px;
}

/* --- Purple blooms floating behind the cards ------------------
   Three soft radial lights, one per card. Positioned to sit a bit
   below the card top so the bloom peeks out behind and around each
   card rather than blasting the whole section uniformly. Fade in
   and slowly drift once the timeline is in view. */
.mmx-res-blooms {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.mmx-res-bloom {
  position: absolute;
  width: 42%;
  max-width: 560px;
  aspect-ratio: 1.2 / 1;
  border-radius: 70% 30% 55% 45% / 35% 65% 30% 70%;
  filter: blur(44px) saturate(130%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1400ms var(--mm-ease-smooth, ease), transform 1800ms var(--mm-ease-smooth, ease);
  will-change: transform, opacity, border-radius;
}
.mmx-res-timeline.is-in .mmx-res-bloom {
  opacity: 1;
  transform: scale(1);
}
/* Each bloom positioned behind its card column, roughly vertically
   centered over the card. */
.mmx-res-bloom-1 {
  left: -4%; top: 180px;
  background: radial-gradient(ellipse at 50% 45%,
    rgba(180, 140, 255, 0.42) 0%,
    rgba(130, 80, 220, 0.22) 32%,
    rgba(90, 45, 180, 0.08) 58%,
    rgba(76, 29, 149, 0) 80%);
  animation: mmx-res-bloom-1 26s ease-in-out 900ms infinite;
  transition-delay: 400ms;
}
.mmx-res-bloom-2 {
  left: 29%; top: 120px;
  width: 46%;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(210, 160, 255, 0.55) 0%,
    rgba(160, 100, 250, 0.30) 28%,
    rgba(110, 60, 210, 0.12) 54%,
    rgba(76, 29, 149, 0) 80%);
  animation: mmx-res-bloom-2 32s ease-in-out 600ms infinite;
  transition-delay: 200ms;
}
.mmx-res-bloom-3 {
  right: -4%; top: 220px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(175, 135, 255, 0.38) 0%,
    rgba(125, 75, 220, 0.20) 32%,
    rgba(90, 45, 180, 0.08) 58%,
    rgba(76, 29, 149, 0) 80%);
  animation: mmx-res-bloom-3 28s ease-in-out 1200ms infinite;
  transition-delay: 600ms;
}
@keyframes mmx-res-bloom-1 {
  0%,100% { transform: translate(0,0) scale(1); border-radius: 70% 30% 55% 45% / 35% 65% 30% 70%; }
  33%     { transform: translate(4%, -3%) scale(1.08); border-radius: 30% 70% 45% 55% / 60% 30% 70% 40%; }
  66%     { transform: translate(-3%, 4%) scale(0.96); border-radius: 55% 45% 65% 35% / 40% 60% 45% 55%; }
}
@keyframes mmx-res-bloom-2 {
  0%,100% { transform: translate(0,0) scale(1.02); border-radius: 65% 35% 40% 60% / 45% 55% 35% 65%; }
  40%     { transform: translate(-5%, 4%) scale(1.12); border-radius: 40% 60% 70% 30% / 65% 35% 60% 40%; }
  70%     { transform: translate(3%, -3%) scale(0.94); border-radius: 75% 25% 50% 50% / 30% 70% 40% 60%; }
}
@keyframes mmx-res-bloom-3 {
  0%,100% { transform: translate(0,0) scale(0.98); border-radius: 55% 45% 70% 30% / 40% 60% 35% 65%; }
  35%     { transform: translate(-4%, 3%) scale(1.06); border-radius: 70% 30% 45% 55% / 55% 45% 65% 35%; }
  68%     { transform: translate(4%, -2%) scale(1.02); border-radius: 35% 65% 55% 45% / 65% 35% 50% 50%; }
}

/* --- PROGRESS (rule + nodes + labels in one block) -------------
   A real progress bar: the rule runs edge-to-edge behind the nodes.
   Nodes are on the rule; labels and window text sit above.
   Three-column grid ensures everything stays aligned. */
.mmx-res-progress {
  position: relative;
  margin: 0 auto 56px;
  padding: 0;
  max-width: 1100px;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
/* Visual order: track+nodes first, then labels below */
.mmx-res-progress-track { order: 1; }
.mmx-res-progress-nodes { order: 2; }
.mmx-res-progress-labels { order: 3; }

/* Window text row (BELOW the rule) */
.mmx-res-progress-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.mmx-res-progress-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.mmx-res-progress-window {
  font: 700 10.5px/1 var(--mm-font-mono, ui-monospace, monospace);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mm-fg4);
}
.mmx-res-progress-label {
  font: 700 12px/1 var(--mm-font-mono, ui-monospace, monospace);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 320ms ease;
}
.mmx-res-progress-cell.is-complete .mmx-res-progress-label { color: rgba(226, 192, 107, 0.72); }
.mmx-res-progress-cell.is-active .mmx-res-progress-window { color: var(--mm-gold); }
.mmx-res-progress-cell.is-active .mmx-res-progress-label {
  color: var(--mm-gold-bright, #f5dc94);
  text-shadow: 0 0 12px rgba(226, 192, 107, 0.5);
}

/* Rule track */
.mmx-res-progress-track {
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  /* Inset from the page edges so the track lines up with the first and
     last node (which sit in the 1/6 and 5/6 positions of the grid). */
  margin: 0 calc(100% / 6);
  overflow: visible;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.mmx-res-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,
    var(--mm-gold-deep, #a97b1e) 0%,
    var(--mm-gold, #e2c06b) 55%,
    var(--mm-gold-bright, #f5dc94) 100%);
  border-radius: 2px;
  box-shadow: 0 0 16px rgba(226, 192, 107, 0.6);
  transition: width 1800ms var(--mm-ease-smooth, ease);
  transition-delay: 500ms;
}
.mmx-res-timeline.is-in .mmx-res-progress-fill {
  /* Fills from phase 1 center (1/6) to phase 2 center (1/2). Because the
     track is inset to 1/6…5/6, that's (3/6 - 1/6) / (5/6 - 1/6) = 50%. */
  width: 50%;
}

/* Nodes sit on the rule — pulled upward so they straddle the track */
.mmx-res-progress-nodes {
  position: relative;
  margin-top: -10px; /* half of node height, so nodes straddle the 2px rule */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  pointer-events: none;
  height: 18px;
}
.mmx-res-progress-node {
  justify-self: center;
  position: relative;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: var(--mm-ink);
  border-radius: 50%;
}
.mmx-res-progress-node-inner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  transition: all 400ms ease;
}
.mmx-res-progress-node.is-complete .mmx-res-progress-node-inner {
  background: var(--mm-gold);
  border-color: var(--mm-gold);
  box-shadow: 0 0 12px rgba(226, 192, 107, 0.6);
}
.mmx-res-progress-node.is-active .mmx-res-progress-node-inner {
  background: var(--mm-gold-bright, #f5dc94);
  border-color: #fff;
  box-shadow: 0 0 16px rgba(226, 192, 107, 0.85), 0 0 32px rgba(226, 192, 107, 0.35);
}
.mmx-res-progress-node-halo {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(226, 192, 107, 0.55);
  animation: mmx-res-halo 2.2s ease-out infinite;
}
@keyframes mmx-res-halo {
  0%   { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

@media (max-width: 880px) {
  .mmx-res-progress { display: none; }
}

/* --- STOPS (the three cards) -------------------------------- */

.mmx-res-stops {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
@media (max-width: 880px) {
  .mmx-res-stops { grid-template-columns: 1fr; gap: 40px; }
}

/* Dramatic entrance — cards slide up 80px with a scale pop + 3D tilt
   that settles, and a per-card stagger of 220ms. */
.mmx-res-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translate3d(0, 80px, 0) scale(0.88) perspective(1200px) rotateX(14deg);
  transform-origin: center bottom;
  transition: opacity 900ms cubic-bezier(0.22, 0.72, 0.12, 1),
              transform 1100ms cubic-bezier(0.22, 0.72, 0.12, 1);
  transition-delay: calc(var(--i, 0) * 220ms + 300ms);
  will-change: opacity, transform;
}
.mmx-res-timeline.is-in .mmx-res-stop {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) perspective(1200px) rotateX(0deg) !important;
}

/* Internal stagger — pieces of the card slide up one after the other */
.mmx-res-timeline.is-in .mmx-res-stop .mmx-res-stop-head,
.mmx-res-timeline.is-in .mmx-res-stop .mmx-res-stop-body,
.mmx-res-timeline.is-in .mmx-res-stop .mmx-res-stop-markers > * {
  animation: mmx-res-piece-up 700ms var(--mm-ease-smooth, cubic-bezier(0.22, 0.72, 0.12, 1)) backwards;
}
.mmx-res-timeline.is-in .mmx-res-stop .mmx-res-stop-head    { animation-delay: calc(var(--i, 0) * 220ms + 700ms); }
.mmx-res-timeline.is-in .mmx-res-stop .mmx-res-stop-body    { animation-delay: calc(var(--i, 0) * 220ms + 820ms); }
.mmx-res-timeline.is-in .mmx-res-stop .mmx-res-stop-markers > *:nth-child(1) { animation-delay: calc(var(--i, 0) * 220ms + 940ms); }
.mmx-res-timeline.is-in .mmx-res-stop .mmx-res-stop-markers > *:nth-child(2) { animation-delay: calc(var(--i, 0) * 220ms + 1040ms); }
.mmx-res-timeline.is-in .mmx-res-stop .mmx-res-stop-markers > *:nth-child(3) { animation-delay: calc(var(--i, 0) * 220ms + 1140ms); }
@keyframes mmx-res-piece-up {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Card chrome */
.mmx-res-stop-card {
  position: relative;
  padding: 26px 26px 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    rgba(12, 10, 18, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 280ms ease, transform 280ms ease, box-shadow 280ms ease;
  overflow: hidden;
}
.mmx-res-stop-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Per-card glow sweep — a soft gold smear that rides the top edge of the
   card, subtle ambient motion. For the active card it's brighter. */
.mmx-res-stop-card-glow {
  position: absolute;
  top: -40%;
  left: -20%;
  right: -20%;
  height: 120%;
  background: radial-gradient(ellipse at 50% 20%,
    rgba(226, 192, 107, 0.12) 0%,
    rgba(226, 192, 107, 0.04) 35%,
    transparent 65%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}
.mmx-res-timeline.is-in .mmx-res-stop-card-glow { opacity: 1; }
.mmx-res-stop.is-active .mmx-res-stop-card-glow {
  background: radial-gradient(ellipse at 50% 25%,
    rgba(226, 192, 107, 0.28) 0%,
    rgba(226, 192, 107, 0.10) 35%,
    transparent 65%);
}

.mmx-res-stop.is-complete .mmx-res-stop-card {
  border-color: rgba(255, 255, 255, 0.14);
}
.mmx-res-stop.is-active .mmx-res-stop-card {
  border-color: rgba(226, 192, 107, 0.42);
  box-shadow:
    0 0 0 1px rgba(226, 192, 107, 0.18),
    0 20px 60px -20px rgba(226, 192, 107, 0.35),
    0 0 48px -12px rgba(226, 192, 107, 0.30);
  background:
    linear-gradient(180deg, rgba(226, 192, 107, 0.06), rgba(226, 192, 107, 0.01)),
    rgba(18, 14, 8, 0.65);
}
.mmx-res-stop.is-upcoming .mmx-res-stop-card {
  opacity: 0.82;
}

.mmx-res-stop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.mmx-res-stop-n {
  font-family: var(--mm-font-display, var(--mm-font-body));
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--mm-gold);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}
.mmx-res-stop-label {
  font-family: var(--mm-font-display, var(--mm-font-body));
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--mm-fg1);
  margin: 0;
  flex: 1;
  text-wrap: balance;
}

.mmx-res-stop-state {
  font: 700 9.5px/1 var(--mm-font-mono, ui-monospace, monospace);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 3px;
  border: 1px solid;
  flex: 0 0 auto;
}
.mmx-res-stop-state.is-complete {
  color: #9bd18a;
  border-color: rgba(155, 209, 138, 0.35);
  background: rgba(155, 209, 138, 0.06);
}
.mmx-res-stop-state.is-active {
  color: var(--mm-gold);
  border-color: rgba(226, 192, 107, 0.45);
  background: rgba(226, 192, 107, 0.08);
}
.mmx-res-stop-state.is-upcoming {
  color: var(--mm-fg4);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}

.mmx-res-stop-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mm-fg3);
  margin: 0 0 16px;
}

/* Markers */
.mmx-res-stop-markers {
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mmx-res-stop-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 11.5px/1.4 var(--mm-font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  color: var(--mm-fg4);
}
.mmx-res-stop-marker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex: 0 0 auto;
}
.mmx-res-stop-marker.is-done { color: var(--mm-fg2); }
.mmx-res-stop-marker.is-done .mmx-res-stop-marker-dot {
  background: var(--mm-gold);
  border-color: var(--mm-gold);
  box-shadow: 0 0 8px rgba(226, 192, 107, 0.5);
}
.mmx-res-stop-marker.is-inflight { color: var(--mm-fg1); }
.mmx-res-stop-marker.is-inflight .mmx-res-stop-marker-dot {
  background: var(--mm-gold);
  border-color: #f5dc94;
  animation: mmx-res-marker-pulse 1.6s ease-in-out infinite;
}
@keyframes mmx-res-marker-pulse {
  0%, 100% { transform: scale(0.8); box-shadow: 0 0 4px rgba(226, 192, 107, 0.4); }
  50%      { transform: scale(1.2); box-shadow: 0 0 12px rgba(226, 192, 107, 0.8); }
}

/* --- FOOT --------------------------------------------------- */

.mmx-res-foot {
  margin-top: 44px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 22px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
}
@media (max-width: 720px) { .mmx-res-foot { grid-template-columns: 1fr; gap: 8px; } }

.mmx-res-foot-k {
  font: 700 10px/1 var(--mm-font-mono, ui-monospace, monospace);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mm-gold);
  padding: 4px 8px;
  border: 1px solid rgba(226, 192, 107, 0.3);
  border-radius: 3px;
  align-self: center;
  justify-self: start;
}
.mmx-res-foot-v {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mm-fg3);
  font-style: italic;
}
.mmx-res-foot-metrics {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 6px;
  font: 600 11.5px/1.4 var(--mm-font-mono, ui-monospace, monospace);
  letter-spacing: 0.06em;
  color: var(--mm-fg2);
  font-style: normal;
}
.mmx-res-foot-sep { color: var(--mm-fg5, rgba(255, 255, 255, 0.3)); margin: 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .mmx-res-bloom, .mmx-res-stop, .mmx-res-stop-head, .mmx-res-stop-body,
  .mmx-res-stop-markers > *, .mmx-res-progress-fill, .mmx-res-progress-node-halo,
  .mmx-res-stop-marker.is-inflight .mmx-res-stop-marker-dot {
    animation: none !important;
    transition: none !important;
  }
  .mmx-res-timeline.is-in .mmx-res-stop { opacity: 1; transform: none; }
  .mmx-res-timeline.is-in .mmx-res-bloom { opacity: 1; transform: none; }
}

/* @bp <md — enforce the 24px mobile outer gutter rule. */
@media (max-width: 767.98px) {
  .mm-marketing .mmx-res-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* @bp tablet — 48px gutters. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .mm-marketing .mmx-res-inner {
    padding-left: 48px;
    padding-right: 48px;
  }
}