/* Motion layer (shared). Everything here is inert until motion.js has added
   .mo to <html>, which it never does with prefers-reduced-motion: reduce. */
.mo-w { display: inline-block; clip-path: inset(-0.4em -0.5em -0.2em -0.5em); }
.mo-wi { display: inline-block; will-change: translate; }
.mo-wdone .mo-w { clip-path: none; }
.mo-wdone .mo-wi { will-change: auto; }
.mo-deco { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .mo-deco *, .mo-deco { animation: none !important; }
}

/* ── Aurelle ── */
:root { --mo-ease: cubic-bezier(.16, 1, .3, 1); }
.mo-aura { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mo-orbs { mix-blend-mode: screen; }
.mo-star { display: inline-block; }

/* The lead review: words wait in a faint ink and light up as you read. */
html.mo .mo-read .mo-wi { opacity: .2; transition: opacity .45s ease; }
html.mo .mo-read .mo-wi.on { opacity: 1; }
.mo-read .mo-w { clip-path: none; }

/* Treatment cards (finder): lift and a warm light under the pointer. */
html.mo .match { position: relative; isolation: isolate; transition: translate .5s var(--mo-ease), box-shadow .4s; }
html.mo .match::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(201, 168, 147, .32), transparent 70%); }
html.mo .match:hover { translate: 0 -5px; box-shadow: 0 30px 50px -36px rgba(43, 35, 33, .5); }
html.mo .match:hover::after { opacity: 1; }

/* Price list: the row leans in, the price warms. */
html.mo .menu-list li > div, html.mo .menu-list .price { transition: translate .5s var(--mo-ease), color .3s; }
html.mo .menu-list li:hover > div { translate: 10px 0; }
html.mo .menu-list li:hover .price { color: #E7C9A9; }
html.mo .menu-list a { transition: background .25s, color .25s, translate .4s var(--mo-ease); }
html.mo .menu-list li:hover a { translate: 4px 0; }

/* Steps and people: arches rise a little. */
html.mo .steps li { transition: translate .6s var(--mo-ease), box-shadow .4s; }
html.mo .steps li:hover { translate: 0 -6px; box-shadow: 0 30px 50px -40px rgba(43, 35, 33, .55); }
html.mo .portrait { transition: scale .7s var(--mo-ease), filter .5s; }
html.mo .people li:hover .portrait { scale: 1.03; filter: brightness(1.06); }

/* Buttons: a soft sheen passes over dark buttons on hover. */
html.mo .btn-dark { position: relative; overflow: hidden; isolation: isolate; }
html.mo .btn-dark::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 253, 251, .22) 50%, transparent 70%); translate: -110% 0; transition: translate .8s var(--mo-ease); }
html.mo .btn-dark:hover::after { translate: 110% 0; }
html.mo .nav nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--mo-ease), color .2s; padding-bottom: 2px; }
html.mo .nav nav a:hover { background-size: 100% 1px; }