.mm-overlay {
position: fixed;
inset: 0;
z-index: 1400;
display: grid;
place-items: center;
padding: 16px;
background: rgba(15, 23, 42, 0.46);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.22s ease;
}
.mm-overlay.is-in { opacity: 1; }
body.mm-open { overflow: hidden; }
.mm-card {
position: relative;
width: min(600px, 100%);
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
overflow-y: auto;
padding: 28px 28px 22px;
border-radius: 28px;
background: #ffffff;
box-shadow: 0 40px 90px rgba(15, 23, 42, 0.28), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
color: var(--text, #0f172a);
text-align: center;
transform: translateY(14px) scale(0.98);
transition: transform 0.32s cubic-bezier(0.22, 0.68, 0.36, 1);
}
.mm-overlay.is-in .mm-card { transform: none; }
.mm-card.is-preview { padding-top: 44px; }
.mm-preview-pill {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
padding: 3px 10px;
border-radius: 999px;
background: #fef3c7;
color: #92400e;
font-size: 11.5px;
font-weight: 800;
white-space: nowrap;
}
.mm-stage {
display: grid;
grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
align-items: center;
gap: 10px;
margin-top: 6px;
}
.mm-tile {
position: relative;
display: grid;
justify-items: center;
gap: 10px;
padding: 16px 12px 14px;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 22px;
background: linear-gradient(180deg, #ffffff, var(--mh-wash));
transition: transform 0.5s cubic-bezier(0.22, 0.68, 0.36, 1), opacity 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}
.mm-tile.is-to {
border-color: color-mix(in srgb, var(--mh-a) 40%, transparent);
box-shadow: 0 16px 36px color-mix(in srgb, var(--mh-a) 22%, transparent);
}
.mm-tile-art {
display: block;
width: 96px;
height: 96px;
overflow: hidden;
border-radius: 22px;
background: radial-gradient(80% 80% at 50% 42%, var(--mh-wash), transparent 78%), #ffffff;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.mm-tile-art svg {
display: block;
width: 100%;
height: 100%;
transform: scale(1.16);
filter: saturate(1.35) contrast(1.08);
}
.mm-tile-copy { display: grid; gap: 2px; }
.mm-tile-copy strong {
color: var(--mh-deep);
font-size: 22px;
font-weight: 850;
letter-spacing: -0.02em;
line-height: 1.1;
}
.mm-tile-copy span {
color: #475569;
font-size: 12.5px;
line-height: 1.3;
}
.mm-arrow svg {
width: 28px;
height: 28px;
fill: none;
stroke: #94a3b8;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.6s ease, stroke 0.6s ease;
}
.mm-tile-tick {
position: absolute;
top: 10px;
right: 10px;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #16a34a;
box-shadow: 0 6px 14px rgba(22, 163, 74, 0.35);
transform: scale(0.6);
opacity: 0;
transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-out;
}
.mm-tile-tick svg,
.mm-stop-dot svg {
width: 16px;
height: 16px;
fill: none;
stroke: #ffffff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.mm-copy {
margin-top: 20px;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.mm-card.is-swapping .mm-copy,
.mm-card.is-swapping .mm-actions {
opacity: 0;
transform: translateY(4px);
}
.mm-eyebrow {
margin: 0;
color: #0a84ff;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.mm-title {
margin: 6px 0 0;
color: var(--text, #0f172a);
font-size: 30px;
font-weight: 850;
letter-spacing: -0.03em;
line-height: 1.1;
}
.mm-body {
max-width: 470px;
margin: 10px auto 0;
color: #334155;
font-size: 15.5px;
line-height: 1.5;
}
.mm-rail {
position: relative;
margin: 22px 0 0;
padding-top: 26px;
}
.mm-rail-track {
position: absolute;
top: 37px;
left: var(--mm-start);
right: var(--mm-start);
height: 4px;
border-radius: 4px;
background: #e2e8f0;
}
.mm-rail-fill {
position: absolute;
top: 37px;
left: var(--mm-start);
height: 4px;
width: calc(var(--mm-from) - var(--mm-start));
border-radius: 4px;
background: linear-gradient(90deg, #10b981, #0a84ff);
transition: width 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.mm-rail-pin {
position: absolute;
top: 0;
left: var(--mm-from);
transform: translateX(-50%);
padding: 2px 8px;
border-radius: 999px;
background: #0f172a;
color: #ffffff;
font-size: 10.5px;
font-weight: 800;
white-space: nowrap;
transition: left 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.mm-rail-stops {
position: relative;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
margin: 0;
padding: 0;
list-style: none;
}
.mm-stop {
display: grid;
justify-items: center;
gap: 6px;
}
.mm-stop-dot {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border: 2px solid #cbd5e1;
border-radius: 50%;
background: #ffffff;
transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.mm-stop-dot svg { opacity: 0; transition: opacity 0.3s ease; }
.mm-stop.is-done .mm-stop-dot {
border-color: #16a34a;
background: #16a34a;
}
.mm-stop.is-done .mm-stop-dot svg { opacity: 1; }
.mm-stop.is-from .mm-stop-dot,
.mm-card.is-moved .mm-stop.is-to .mm-stop-dot {
border-color: transparent;
background: linear-gradient(135deg, var(--mh-a), var(--mh-b));
box-shadow: 0 0 0 5px var(--mh-wash);
transform: scale(1.12);
}
.mm-stop-label {
color: #64748b;
font-size: 11.5px;
font-weight: 750;
white-space: nowrap;
}
.mm-stop.is-from .mm-stop-label,
.mm-stop.is-to .mm-stop-label {
color: var(--mh-deep);
font-weight: 850;
}
.mm-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 22px;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.mm-btn {
min-width: 150px;
margin: 0;
padding: 13px 22px;
border: 0;
border-radius: 999px;
box-shadow: none;
font: inherit;
font-size: 15.5px;
font-weight: 800;
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mm-btn:disabled { cursor: default; opacity: 0.7; }
.mm-btn-primary {
background: #0a84ff;
color: #ffffff;
box-shadow: 0 10px 22px rgba(10, 132, 255, 0.28);
}
.mm-btn-primary:focus-visible {
background: #0070e0;
transform: translateY(-1px);
outline: none;
}
@media (hover: hover) and (pointer: fine) {
.mm-btn-primary:hover:not(:disabled) {
background: #0070e0;
transform: translateY(-1px);
outline: none;
}
}
.mm-btn-quiet {
background: rgba(15, 23, 42, 0.06);
color: var(--text, #0f172a);
}
.mm-btn-quiet:focus-visible {
background: rgba(15, 23, 42, 0.1);
outline: none;
}
@media (hover: hover) and (pointer: fine) {
.mm-btn-quiet:hover:not(:disabled) {
background: rgba(15, 23, 42, 0.1);
outline: none;
}
}
.mm-btn:focus-visible { box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.3); }
.mm-fine {
margin: 14px 0 0;
color: #64748b;
font-size: 12.5px;
}
.mm-card.is-moving .mm-tile.is-from {
filter: saturate(0.55);
opacity: 0.78;
transform: scale(0.94);
}
.mm-card.is-moving .mm-tile-tick { transform: scale(1); opacity: 1; }
.mm-card.is-moving .mm-stop.is-from .mm-stop-dot {
border-color: #16a34a;
background: #16a34a;
box-shadow: none;
transform: none;
}
.mm-card.is-moving .mm-stop.is-from .mm-stop-dot svg { opacity: 1; }
.mm-card.is-sliding .mm-rail-fill { width: calc(var(--mm-to) - var(--mm-start)); }
.mm-card.is-sliding .mm-rail-pin { left: var(--mm-to); }
.mm-card.is-sliding .mm-arrow svg {
stroke: #0a84ff;
transform: translateX(4px);
}
.mm-card.is-moved .mm-tile.is-to {
transform: scale(1.06);
box-shadow: 0 0 0 6px var(--mh-wash), 0 22px 46px color-mix(in srgb, var(--mh-a) 30%, transparent);
}
.mm-card.is-moved .mm-stop.is-from .mm-stop-label { color: #64748b; font-weight: 750; }
.mm-burst {
position: absolute;
inset: 0;
pointer-events: none;
}
.mm-burst i {
position: absolute;
top: 42%;
left: 50%;
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--mh-a);
opacity: 0;
}
.mm-burst i:nth-child(3n) { background: var(--mh-b); border-radius: 50%; }
.mm-burst i:nth-child(4n) { background: #f59e0b; }
.mm-card.is-moved .mm-burst i { animation: mm-burst 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.mm-burst i:nth-child(1)  { --x: -86px; --y: -64px; --r: 40deg; }
.mm-burst i:nth-child(2)  { --x: 78px;  --y: -70px; --r: -30deg; }
.mm-burst i:nth-child(3)  { --x: -104px; --y: -6px; --r: 80deg; }
.mm-burst i:nth-child(4)  { --x: 102px; --y: -14px; --r: -70deg; }
.mm-burst i:nth-child(5)  { --x: -60px; --y: -92px; --r: 120deg; }
.mm-burst i:nth-child(6)  { --x: 54px;  --y: -96px; --r: -110deg; }
.mm-burst i:nth-child(7)  { --x: -12px; --y: -108px; --r: 200deg; }
.mm-burst i:nth-child(8)  { --x: 20px;  --y: 70px; --r: 60deg; }
.mm-burst i:nth-child(9)  { --x: -84px; --y: 54px; --r: -40deg; }
.mm-burst i:nth-child(10) { --x: 90px;  --y: 48px; --r: 150deg; }
.mm-burst i:nth-child(11) { --x: -36px; --y: -78px; --r: 15deg; }
.mm-burst i:nth-child(12) { --x: 40px;  --y: -40px; --r: -15deg; }
.mm-burst i:nth-child(13) { --x: -50px; --y: 84px; --r: 95deg; }
.mm-burst i:nth-child(14) { --x: 62px;  --y: 86px; --r: -95deg; }
@keyframes mm-burst {
0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
15%  { opacity: 1; }
100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); }
}
.dh-journey.mm-just-moved {
animation: mm-journey-glow 2.4s ease;
}
@keyframes mm-journey-glow {
0%, 100% { box-shadow: none; }
30%      { box-shadow: 0 0 0 6px var(--mh-wash, rgba(10, 132, 255, 0.16)); }
}
@media (max-width: 560px) {
.mm-card { padding: 24px 16px 18px; border-radius: 24px; }
.mm-stage { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 6px; }
.mm-tile-art { width: 72px; height: 72px; border-radius: 18px; }
.mm-tile-copy strong { font-size: 19px; }
.mm-tile-copy span { font-size: 11.5px; }
.mm-title { font-size: 25px; }
.mm-body { font-size: 14.5px; }
.mm-stop-label { font-size: 10px; }
.mm-stop:not(.is-from):not(.is-to) .mm-stop-label { visibility: hidden; }
.mm-stop-dot { width: 20px; height: 20px; }
.mm-rail-track, .mm-rail-fill { top: 34px; }
.mm-btn { min-width: 0; flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
.mm-overlay, .mm-card, .mm-tile, .mm-rail-fill, .mm-rail-pin, .mm-stop-dot, .mm-tile-tick, .mm-copy, .mm-actions { transition: none; }
.mm-card.is-moved .mm-burst i { animation: none; }
.dh-journey.mm-just-moved { animation: none; }
.mm-card.is-moved .mm-tile.is-from { filter: saturate(0.55); opacity: 0.78; }
.mm-card.is-moved .mm-tile-tick { transform: scale(1); opacity: 1; }
.mm-card.is-moved .mm-rail-fill { width: calc(var(--mm-to) - var(--mm-start)); }
.mm-card.is-moved .mm-rail-pin { left: var(--mm-to); }
.mm-card.is-moved .mm-stop.is-from .mm-stop-dot { border-color: #16a34a; background: #16a34a; box-shadow: none; transform: none; }
.mm-card.is-moved .mm-stop.is-from .mm-stop-dot svg { opacity: 1; }
}