/* 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; }
}

/* ── Alvura ── */
:root { --mo-ease: cubic-bezier(.16, 1, .3, 1); }
/* The tooth floats as a group (with its shine and smile) instead of alone. */
html.mo .art-tooth { animation: none; }
html.mo .mo-tooth { animation: float 6s ease-in-out infinite; }
.mo-glint { pointer-events: none; }

/* Cards: lift, a soft light under the pointer, the icon leans in. */
html.mo .card { position: relative; isolation: isolate; transition: border-color .2s, box-shadow .3s, translate .5s var(--mo-ease); }
html.mo .card::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(15, 118, 110, .11), transparent 70%); }
html.mo .card:hover { translate: 0 -6px; box-shadow: 0 26px 44px -28px rgba(15, 118, 110, .6); }
html.mo .card:hover::after { opacity: 1; }
html.mo .card-icon { transition: rotate .5s var(--mo-ease), scale .5s var(--mo-ease), background .3s; }
html.mo .card:hover .card-icon { rotate: -8deg; scale: 1.1; }
html.mo .card .btn-soft { transition: background .2s, color .2s, translate .35s var(--mo-ease); }
html.mo .card:hover .btn-soft { translate: 3px 0; }

/* People and quotes: a quieter lift. */
html.mo .people li, html.mo .quotes figure, html.mo .ticks li { transition: translate .5s var(--mo-ease), box-shadow .3s, border-color .3s; }
html.mo .people li:hover, html.mo .quotes figure:hover { translate: 0 -4px; box-shadow: 0 22px 40px -30px rgba(11, 42, 51, .45); border-color: #BFDCD3; }
html.mo .ticks li:hover { translate: 4px 0; border-color: var(--teal); }
html.mo .avatar { transition: scale .4s var(--mo-ease); }
html.mo .people li:hover .avatar { scale: 1.08; }

/* Nav links: an underline that grows from the centre. */
html.mo .nav-links a { position: relative; }
html.mo .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--teal); scale: 0 1; transition: scale .35s var(--mo-ease); }
html.mo .nav-links a:hover::after { scale: 1 1; }
html.mo .next-go::after { display: inline-block; transition: translate .35s var(--mo-ease); }
html.mo .next:hover .next-go::after { translate: 4px 0; }