/* MessMate home page components (Claude, 4 Nov 2026).
   Loaded by index.php after assets/messmate.css, which holds the tokens and everything shared.
   The opening stage has its own file, assets/mm-stage.css - it is the part most likely to be re-cut, so it is kept
   separate rather than buried in here. What is left below is everything else the home page alone uses: the fit
   finder, the demo's product chips, the buyable product cards, how to fit it, the fits / doesn't fit panel, the
   review carousel and the scroll transitions. Every colour comes from the tokens - never a hard-coded green.
   The easing token is --mm-ease; there is no --ease (an earlier cut of this file referred to one, which silently
   cancelled the transitions that used it). */

/* ---------- the fit finder ----------
   Three question cards across the top, the answer on its own underneath and centred on the page. It was laid out as
   two columns with the answer sitting to the right of the questions, which left a tall empty panel waiting to be
   filled and pushed the recommendation out of the middle of the page - the one thing the section exists to say was
   the thing furthest from the eye. Questions across, answer centred below, reads in the order it happens. */
.mm-sec--find { padding: 54px 0 62px; background: var(--mm-pine-tint); border-top: 1px solid var(--mm-line); border-bottom: 1px solid var(--mm-line); }
.mm-find__head { max-width: 680px; margin: 0 auto 26px; }
.mm-find__head h2 { margin: 6px 0 8px; }
.mm-find { display: grid; gap: 20px; }

/* how far through the three questions you are */
.mm-find__bar { height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--mm-ink) 11%, transparent); overflow: hidden; }
.mm-find__bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--mm-pine); transition: width .45s var(--mm-ease); }

.mm-find__qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; align-items: start; }
.mm-fq {
  background: var(--mm-paper); border: 1px solid var(--mm-line); border-radius: 18px; padding: 16px 18px 18px;
  transition: border-color .25s var(--mm-ease), box-shadow .25s var(--mm-ease), transform .25s var(--mm-ease);
}
.mm-fq:focus-within { border-color: var(--mm-pine); box-shadow: 0 0 0 4px var(--mm-pine-glow); }
.mm-fq.is-done { border-color: color-mix(in srgb, var(--mm-pine) 46%, var(--mm-line)); }
.mm-fq fieldset { border: 0; margin: 0; padding: 0; }
.mm-fq legend { display: flex; align-items: baseline; gap: 10px; padding: 0; font-weight: 600; font-size: 15.5px; color: var(--mm-ink); }
.mm-fq legend i {
  font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 50%; background: var(--mm-pine); color: #fff; font-size: 12px; font-weight: 700;
  transition: background .25s var(--mm-ease), transform .3s var(--mm-ease);
}
.mm-fq.is-done legend i { background: var(--mm-clay); transform: scale(1.08); }
.mm-fopts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mm-fopt { position: relative; }
.mm-fopt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mm-fopt span {
  display: block; padding: 9px 15px; border: 1.5px solid var(--mm-line); border-radius: 999px;
  font-size: 14px; line-height: 1.2; color: var(--mm-ink-2); cursor: pointer;
  transition: background .2s var(--mm-ease), border-color .2s var(--mm-ease), color .2s var(--mm-ease), transform .2s var(--mm-ease);
}
.mm-fopt input:hover + span { border-color: var(--mm-ink-3); transform: translateY(-1px); }
.mm-fopt input:focus-visible + span { outline: 2px solid var(--mm-pine); outline-offset: 2px; }
.mm-fopt input:checked + span { background: var(--mm-pine); border-color: var(--mm-pine); color: #fff; font-weight: 600; }

.mm-find__out {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; max-width: 780px; margin: 4px auto 0;
  border-radius: 24px; padding: 32px 28px 34px;
  background: linear-gradient(160deg, var(--mm-pine-3), var(--mm-pine) 48%, var(--mm-pine-2));
  color: #F3EEE5; text-align: center;
}
.mm-find__out::before {
  content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; right: -120px; top: -120px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 185, 150, .34), transparent);
}
.mm-find__out h3 { font-family: var(--mm-display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.16; letter-spacing: -.01em; color: #FBF7F1; margin: 0 0 10px; }
.mm-find__out > div > p { font-size: 15.5px; line-height: 1.62; color: rgba(243, 238, 229, .86); margin: 0 auto; max-width: 54ch; }
.mm-find__out > div > p + p { margin-top: 12px; }
.mm-find__idle { padding: 18px 0 14px; }
.mm-find__idle .mm-ic { width: 46px; height: 46px; color: #F3C7A8; opacity: 1; stroke-width: 1.3; margin: 0 auto 14px; display: block; }
.mm-find__res { animation: mm-pop .45s var(--mm-ease) both; }
.mm-find__step {
  display: inline-block; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px;
  background: rgba(251, 247, 241, .15); color: #F3C7A8;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
/* the answers echoed back, so the recommendation visibly belongs to what was asked */
.mm-find__echo { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0 0 16px; padding: 0; }
.mm-find__echo li {
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: rgba(251, 247, 241, .13); color: rgba(243, 238, 229, .9);
}
.mm-find__picks { display: grid; gap: 10px; max-width: 460px; margin: 20px auto 0; }
.mm-find__more { margin: 14px 0 0; font-size: 13px; color: rgba(243, 238, 229, .7); }
.mm-find__reset {
  display: block; margin: 16px auto 0; border: 0; background: none; cursor: pointer; padding: 4px 2px;
  font: 600 13px/1 var(--mm-sans); color: rgba(243, 238, 229, .72); text-decoration: underline; text-underline-offset: 3px;
}
.mm-find__reset:hover { color: #fff; }
/* the recommendation cards: .mm-pick is shared, and it is built for a dark panel - this only sizes it and puts
   its arrow on the same row as the text */
.mm-find__out .mm-pick { grid-template-columns: 78px minmax(0, 1fr) 20px; text-align: left; }
.mm-find__out .mm-pick img { width: 78px; height: 78px; }
.mm-find__out .mm-pick--alt { grid-template-columns: 56px minmax(0, 1fr) 20px; }
.mm-find__out .mm-pick--alt img { width: 56px; height: 56px; }
.mm-find__out .mm-pick .mm-ic { width: 20px; height: 20px; opacity: .72; }
.mm-find__res--no .mm-btn { margin-top: 18px; }
@media (max-width: 900px) { .mm-find__qs { grid-template-columns: 1fr; } }

/* ---------- the demo's product chips and its buy line ---------- */
.mm3d--hero .mm3d__top { flex-direction: column; align-items: center; gap: 9px; }
.mm3d__chips {
  display: flex; gap: 6px; padding: 5px; border-radius: 999px; max-width: 100%;
  background: var(--mm-glass); border: 1px solid var(--mm-glass-line);
  -webkit-backdrop-filter: var(--mm-blur); backdrop-filter: var(--mm-blur);
  box-shadow: 0 10px 30px rgba(36, 33, 29, .1);
  overflow-x: auto; scrollbar-width: none;
}
.mm3d__chips::-webkit-scrollbar { display: none; }
.mm3d__chips button {
  flex: none; min-height: 36px; padding: 0 13px; border: 0; border-radius: 999px; background: none;
  font: 600 13px/1 var(--mm-sans); color: var(--mm-ink-2); cursor: pointer; white-space: nowrap;
  transition: background .22s var(--mm-ease), color .22s var(--mm-ease);
}
.mm3d__chips button:hover { background: rgba(255, 255, 255, .55); }
.mm3d__chips button[aria-pressed="true"] { background: var(--mm-pine); color: #fff; }
/* the regular-vs-MessMate comparison only means anything for the whole set */
.mm3d--hero[data-product]:not([data-product="set"]) .mm-seg { opacity: .38; pointer-events: none; }
.mm-demo__hint { margin: 16px 0 0; font-size: 14px; color: var(--mm-ink-3); }
.mm-demo__buy {
  margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; border: 1px solid var(--mm-line); border-radius: 18px; background: var(--mm-paper);
  color: var(--mm-ink); text-decoration: none;
  transition: border-color .22s var(--mm-ease), transform .22s var(--mm-ease), box-shadow .22s var(--mm-ease);
}
.mm-demo__buy:hover, .mm-demo__buy:focus-visible { border-color: var(--mm-pine); transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(36, 33, 29, .5); }
.mm-demo__buy b { display: block; font: 600 16px/1.25 var(--mm-display); }
.mm-demo__buy em { font-style: normal; font-size: 14px; color: var(--mm-ink-3); }
.mm-demo__buy .mm-ic { flex: none; color: var(--mm-pine); }

/* ---------- shop: every product, bought from the home page ----------
   One card per product rather than two big set cards and a thin row of everything else. The swatches are real
   variants: picking one writes its id into the card's hidden field, and the add-to-bag button reads the id out of
   there (data-rs-variant-from, assets/store.js), so a colour chosen here is the colour that reaches the bag.

   The grid is six columns with the sets spanning three and the single pieces spanning two, which lands the
   catalogue as two wide cards then three narrower ones. auto-fit was tried first and gave four across with the
   fifth card alone on its own row, which reads as a mistake. Anything beyond five products simply flows on; the
   spans are a preference, not a requirement. */
.mm-buys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: start; }
.mm-buy { grid-column: span 2; display: flex; flex-direction: column; overflow: hidden;
  background: var(--mm-paper); border: 1px solid var(--mm-line); border-radius: 22px;
  transition: border-color .25s var(--mm-ease), transform .25s var(--mm-ease), box-shadow .25s var(--mm-ease);
}
.mm-buy--set { grid-column: span 3; border-color: color-mix(in srgb, var(--mm-pine) 34%, var(--mm-line)); }
.mm-buy:hover { border-color: color-mix(in srgb, var(--mm-pine) 40%, var(--mm-line)); transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(36, 33, 29, .6); }
.mm-buy__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--mm-oat); overflow: hidden; }
.mm-buy--set .mm-buy__media { aspect-ratio: 4 / 3; }
.mm-buy__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s var(--mm-ease), transform .5s var(--mm-ease); }
.mm-buy:hover .mm-buy__media img { transform: scale(1.035); }
.mm-buy__media img.is-swapping { opacity: 0; }
.mm-buy__tag {
  position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px;
  background: var(--mm-paper); color: var(--mm-ink); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 16px -8px rgba(36, 33, 29, .7);
}
.mm-buy__tag--clay { background: var(--mm-clay); color: #fff; }
.mm-buy__tag--pine { background: var(--mm-pine); color: #fff; }
.mm-buy__body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 16px 18px 18px; }
.mm-buy__body h3 { margin: 0; font-family: var(--mm-display); font-size: 18px; line-height: 1.22; letter-spacing: -.01em; }
.mm-buy--set .mm-buy__body h3 { font-size: 21px; }
.mm-buy__body h3 a { color: inherit; text-decoration: none; }
.mm-buy__body h3 a:hover { color: var(--mm-pine); }
.mm-buy__blurb { margin: 0; font-size: 13.8px; line-height: 1.5; color: var(--mm-ink-3); }
.mm-buy__colors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.mm-buy__sel { margin: 0; font-size: 13px; font-weight: 600; color: var(--mm-ink-2); min-height: 1.2em; }
.mm-buy__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.mm-buy__price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.mm-buy__price s { font-size: 13px; color: var(--mm-ink-3); }
.mm-buy__more { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--mm-ink-3); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.mm-buy__more:hover { color: var(--mm-pine); }
.mm-buy__more .mm-ic { width: 14px; height: 14px; }
.mm-buys__note { margin-top: 26px; font-size: 14.5px; color: var(--mm-ink-2); }
@media (max-width: 1000px) {
  .mm-buys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-buy, .mm-buy--set { grid-column: span 1; }
  .mm-buy--set .mm-buy__media { aspect-ratio: 1 / 1; }
}
@media (max-width: 560px) { .mm-buys { grid-template-columns: 1fr; } }

/* ---------- how to fit it ----------
   The 3D walk-through stays beside you while the steps scroll past, and each step drives it: clicking one moves the
   guard to that stage of the fit. Each step also carries the one thing that tells you it is right, which is what
   "wrap the strap" on its own never said. */
.mm-howto { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 42px; align-items: start; margin-top: 34px; }
.mm-howto__media { display: grid; gap: 16px; position: sticky; top: calc(var(--bar-h) + 18px); }
.mm3d--fit { position: relative; aspect-ratio: 1 / 1; border-radius: 26px; overflow: hidden; background: var(--mm-oat); box-shadow: 0 30px 60px -44px rgba(36, 33, 29, .6); }
.mm3d--fit canvas { display: block; width: 100%; height: 100%; }
.mm-howto__v { position: relative; border-radius: 26px; overflow: hidden; background: var(--mm-oat); box-shadow: 0 30px 60px -40px rgba(36, 33, 29, .6); }
.mm-howto__v video { display: block; width: 100%; height: auto; }
.mm-howto__play {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(36, 33, 29, .06), rgba(36, 33, 29, .34)); color: #fff;
  transition: opacity .3s var(--mm-ease);
}
.mm-howto__play i { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--mm-pine); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.mm-howto__play .mm-ic { width: 34px; height: 34px; }
.mm-howto__play span { position: absolute; bottom: 20px; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.mm-howto__v.is-playing .mm-howto__play { opacity: 0; pointer-events: none; }
.mm-howto__need { border: 1px solid var(--mm-line); border-radius: 18px; padding: 16px 18px; background: var(--mm-paper); }
.mm-howto__need p { margin: 0 0 10px; font-size: 14px; }
.mm-howto__need ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mm-howto__need li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--mm-ink-2); }
.mm-howto__need .mm-ic { width: 16px; height: 16px; flex: none; color: var(--mm-pine); }

.mm-howto__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mm-howto__steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; align-items: start; }
.mm-howto__steps--full li {
  padding: 16px 18px; border: 1px solid var(--mm-line); border-radius: 18px; background: var(--mm-paper);
  cursor: pointer; transition: border-color .25s var(--mm-ease), background .25s var(--mm-ease), transform .25s var(--mm-ease);
}
.mm-howto__steps--full li:hover { border-color: color-mix(in srgb, var(--mm-pine) 40%, var(--mm-line)); transform: translateX(3px); }
.mm-howto__steps--full li:focus-visible { outline: 2px solid var(--mm-pine); outline-offset: 3px; }
.mm-howto__steps--full li.is-on { border-color: var(--mm-pine); background: var(--mm-pine-tint); }
.mm-howto__n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mm-pine-tint); color: var(--mm-pine-2); font-weight: 700; font-size: 15px; transition: background .25s var(--mm-ease), color .25s var(--mm-ease); }
.mm-howto__steps--full li.is-on .mm-howto__n { background: var(--mm-pine); color: #fff; }
.mm-howto__txt b { display: block; font-size: 16.5px; color: var(--mm-ink); margin-bottom: 4px; }
.mm-howto__txt > span { display: block; font-size: 14.5px; line-height: 1.58; color: var(--mm-ink-2); }
.mm-howto__cue {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px; border-radius: 999px;
  background: var(--mm-pine-tint); color: var(--mm-pine-2); font-style: normal; font-size: 12.5px; font-weight: 600;
}
.mm-howto__steps--full li.is-on .mm-howto__cue { background: var(--mm-paper); }
.mm-howto__cue .mm-ic { width: 13px; height: 13px; }

.mm-howto__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.mm-howto__notes article { border: 1px dashed color-mix(in srgb, var(--mm-ink) 20%, transparent); border-radius: 18px; padding: 20px 22px; }
.mm-howto__notes h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; font-family: var(--mm-display); font-size: 17px; letter-spacing: -.01em; }
.mm-howto__notes h3 .mm-ic { width: 19px; height: 19px; flex: none; color: var(--mm-pine); }
.mm-howto__notes p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mm-ink-2); }
@media (max-width: 980px) {
  .mm-howto { grid-template-columns: 1fr; gap: 26px; }
  .mm-howto__media { position: static; }
  .mm-howto__notes { grid-template-columns: 1fr; }
}

/* ---------- will it fit? ---------- */
.mm-fits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mm-fitcard { border: 1px solid var(--mm-line); border-radius: 22px; padding: 26px 26px 28px; background: var(--mm-paper); }
.mm-fitcard--yes { border-color: color-mix(in srgb, var(--mm-pine) 42%, var(--mm-line)); background: var(--mm-pine-tint); }
.mm-fitcard__top { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.mm-fitcard__top .mm-ic { width: 20px; height: 20px; }
.mm-fitcard__top i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; color: #fff; }
.mm-fitcard--yes .mm-fitcard__top i { background: var(--mm-pine); }
.mm-fitcard--no .mm-fitcard__top i { background: var(--mm-clay); }
.mm-fitcard__top b { font-family: var(--mm-display); font-size: 20px; letter-spacing: -.01em; }
.mm-fitcard p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--mm-ink-2); }
.mm-fitcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mm-fitcard li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: var(--mm-ink-2); }
.mm-fitcard li::before { content: ""; position: absolute; left: 0; top: .42em; width: 15px; height: 2px; border-radius: 2px; background: var(--mm-ink-3); opacity: .5; }
.mm-fitcard--yes li::before { background: var(--mm-pine); opacity: .8; }
.mm-fitcard--no li::before { background: var(--mm-clay); opacity: .7; }
.mm-measure {
  margin-top: 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  border: 1px dashed color-mix(in srgb, var(--mm-ink) 22%, transparent); border-radius: 18px; padding: 18px 22px;
}
.mm-measure .mm-ic-wrap { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mm-oat); }
.mm-measure b { display: block; font-size: 15.5px; color: var(--mm-ink); }
.mm-measure span { font-size: 14.5px; line-height: 1.55; color: var(--mm-ink-2); }
@media (max-width: 760px) {
  .mm-fits { grid-template-columns: 1fr; }
  .mm-measure { grid-template-columns: 1fr; text-align: left; }
}

/* ---------- reviews, as a carousel ---------- */
.mm-revcar { position: relative; }
.mm-revcar__track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 0 20px; margin: 0 calc(var(--mm-pad) * -1); padding-inline: var(--mm-pad);
  scrollbar-width: none;
}
.mm-revcar__track::-webkit-scrollbar { display: none; }
.mm-revcar__track > .mm-review {
  flex: 0 0 min(370px, 82vw); scroll-snap-align: start; margin: 0;
  background: var(--mm-paper); border: 1px solid var(--mm-line); border-radius: 22px; padding: 26px 26px 22px;
}
.mm-revcar__track > .mm-review blockquote { margin: 12px 0 18px; font-size: 16px; line-height: 1.62; color: var(--mm-ink); }
.mm-revnav { display: flex; gap: 10px; }
.mm-revnav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--mm-line); background: var(--mm-paper);
  display: grid; place-items: center; cursor: pointer; color: var(--mm-ink);
  transition: border-color .2s var(--mm-ease), color .2s var(--mm-ease), transform .2s var(--mm-ease);
}
.mm-revnav button:hover { border-color: var(--mm-pine); color: var(--mm-pine); transform: translateY(-2px); }
.mm-revnav button:first-child .mm-ic { transform: rotate(180deg); }
.mm-revcar__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.mm-revcar__count { font-size: 14.5px; color: var(--mm-ink-3); margin: 0; }

/* ---------- scroll transitions ----------
   Progressive enhancement only: where the browser has scroll-driven animations these run off the scroll position
   itself, so nothing waits on JavaScript and nothing is hidden if it never arrives. [data-reveal] keeps its own
   JavaScript path in assets/messmate.js; these use their own attribute so the two never fight. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-vfx] { animation: linear both; animation-timeline: view(); }
    [data-vfx="rise"]  { animation-name: mmVfxRise;  animation-range: entry 2% entry 92%; }
    [data-vfx="zoom"]  { animation-name: mmVfxZoom;  animation-range: entry 0% cover 42%; }
    [data-vfx="drift"] { animation-name: mmVfxDrift; animation-range: cover 0% cover 100%; }
    [data-vfx="fade"]  { animation-name: mmVfxFade;  animation-range: entry 4% entry 70%; }
  }
}
@keyframes mmVfxRise  { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
@keyframes mmVfxFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mmVfxZoom  { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes mmVfxDrift { from { transform: translateY(18px); } to { transform: translateY(-18px); } }
.mm-vfx-crop { overflow: hidden; border-radius: 26px; }
.mm-vfx-crop img { display: block; width: 100%; height: 100%; object-fit: cover; }