/* =========================================================
   Motion — animations shaped by each section's content
   ---------------------------------------------------------
   Everything here runs only under html.m-on, which a11y-boot.js sets before the first
   paint when the visitor allows motion (no OS "reduce motion", no "pause animations" in
   the accessibility menu). motion.js marks blocks .is-in as they scroll into view and
   sets --m-d (stagger for blocks arriving together) and --i (position inside a list).
   html.m-done (pause switched on mid-page, or printing) shows everything as it is.
   Entrances animate `translate`, `scale` and `rotate`, never `transform`, so the hover
   lifts in site.css keep working on top of them.
   ========================================================= */

/* ---------- 1. Tokens + shared keyframes ---------- */
:root {
  --m-ease: cubic-bezier(.16, 1, .3, 1);
  --m-pop: cubic-bezier(.34, 1.56, .64, 1);
  --m-sine: cubic-bezier(.45, 0, .55, 1);
  --m-d: 0ms;
}

@keyframes m-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-lift { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-focus { from { opacity: 0; translate: 0 .3em; filter: blur(8px); } to { opacity: 1; translate: 0 0; filter: none; } }
@keyframes m-breathe { from { opacity: 0; scale: .94; filter: blur(8px); } to { opacity: 1; scale: 1; filter: none; } }
@keyframes m-pop { from { opacity: 0; scale: .35; rotate: -16deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes m-pop-dot { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
@keyframes m-from-left { from { opacity: 0; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes m-wave-in {
  0% { opacity: 0; translate: 0 16px; scale: .6; }
  55% { opacity: 1; translate: 0 -7px; scale: 1.06; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes m-stamp {
  0% { opacity: 0; scale: 1.6; rotate: -9deg; }
  55% { opacity: 1; scale: .93; rotate: 1.5deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes m-tilt-in { from { opacity: 0; rotate: -28deg; translate: -8px 6px; } to { opacity: 1; rotate: 0deg; translate: 0 0; } }
@keyframes m-draw { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
@keyframes m-settle { from { scale: 1.16; } to { scale: 1; } }
@keyframes m-grow-x { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes m-grow-y { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes m-ripple { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 3.4; } }
@keyframes m-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
/* Photo wipes end on an enlarged clip so the frames keep their shadows. */
@keyframes m-unveil { from { clip-path: inset(100% -30px -30px -30px); } to { clip-path: inset(-30px); } }
@keyframes m-wipe-l { from { clip-path: inset(-30px 100% -30px -30px); } to { clip-path: inset(-30px); } }
@keyframes m-wipe-r { from { clip-path: inset(-30px -30px -30px 100%); } to { clip-path: inset(-30px); } }

/* ---------- 2. Page transitions ---------- */
/* Pages cross-fade into each other; the header, the phone dock and the accessibility
   button stay put. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.masthead { view-transition-name: m-masthead; }
.dock { view-transition-name: m-dock; }
.uwa-launch { view-transition-name: m-uwa; }
::view-transition-old(root) { animation: m-vt-out .24s var(--m-ease) backwards; }
::view-transition-new(root) { animation: m-vt-in .52s var(--m-ease) backwards; }
@keyframes m-vt-out { to { opacity: 0; } }
@keyframes m-vt-in { from { opacity: 0; translate: 0 12px; } }
html:not(.m-on)::view-transition-group(*),
html:not(.m-on)::view-transition-old(*),
html:not(.m-on)::view-transition-new(*) { animation: none !important; }

/* ---------- 3. Home hero: a warm hello ---------- */
.m-on:not(.m-done) .hero__eyebrow { animation: m-lift .8s var(--m-ease) .05s backwards; }
.m-on:not(.m-done) .hero__name-a { animation: m-focus 1.15s var(--m-ease) .12s backwards; }
/* The surname catches the light once: a soft sheen travels across its gradient and
   comes to rest on exactly the original colours. */
.m-on:not(.m-done) .hero__name-b {
  background-image: linear-gradient(96deg, var(--plum) 4%, var(--rose) 31%, var(--plum-l) 50%, #F2BFD0 60%, #FFF3F6 66%, var(--rose-l) 74%, var(--plum-l) 100%);
  background-size: 200% 100%;
  animation: m-focus 1.15s var(--m-ease) .26s backwards, m-sheen 2.6s var(--m-sine) .5s backwards;
}
@keyframes m-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
.m-on:not(.m-done) .hero__headline { animation: m-lift .9s var(--m-ease) .44s backwards; }
.m-on:not(.m-done) .hero__panel--lead { animation: m-rise 1.05s var(--m-ease) .52s backwards; }
.m-on:not(.m-done) .hero__actions .btn { animation: m-lift .8s var(--m-ease) .78s backwards; }
.m-on:not(.m-done) .hero__actions .btn + .btn { animation-delay: .88s; }
.m-on:not(.m-done) .hero__clinic .i-pin { animation: m-pin 1s var(--m-pop) 1.15s backwards; }
.m-on:not(.m-done) .hero__portrait { animation: m-breathe 1.4s var(--m-ease) .28s backwards; }
.m-on:not(.m-done) .hero__tag { animation: m-pill .9s var(--m-pop) 1.1s backwards; }
@keyframes m-pill { from { opacity: 0; translate: 0 14px; scale: .82; } to { opacity: 1; translate: 0 0; scale: 1; } }
.m-on:not(.m-done) .hero__panel--facts { animation: m-rise 1.05s var(--m-ease) .66s backwards; }
.m-on:not(.m-done) .factlist__item { animation: m-lift .8s var(--m-ease) .9s backwards; }
.m-on:not(.m-done) .factlist__value { transform-origin: 0 100%; animation: m-num .95s var(--m-pop) 1s backwards; }
.m-on:not(.m-done) .factlist__item:nth-child(2),
.m-on:not(.m-done) .factlist__item:nth-child(2) .factlist__value { animation-delay: 1.02s; }
.m-on:not(.m-done) .factlist__item:nth-child(3),
.m-on:not(.m-done) .factlist__item:nth-child(3) .factlist__value { animation-delay: 1.14s; }
@keyframes m-num { from { opacity: 0; scale: .6; translate: 0 .25em; } to { opacity: 1; scale: 1; translate: 0 0; } }

/* Soap bubbles drift up behind the content while the hero is on screen. */
.m-on .hero::before,
.m-on .hero::after,
.m-on .hero__skyline::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 33% 30%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, 0) 17%),
    radial-gradient(circle, rgba(255, 255, 255, .05) 50%, rgba(231, 162, 182, .34) 66%, rgba(231, 240, 234, .6) 72%, rgba(255, 255, 255, 0) 75%);
  opacity: 0;
  animation: m-bubble 17s linear infinite;
  animation-play-state: paused;
}
.m-on .hero::before { width: 54px; height: 54px; right: 7%; bottom: 0; animation-delay: -3s; }
.m-on .hero::after { width: 30px; height: 30px; right: 36%; bottom: 0; animation-duration: 22s; animation-delay: -11s; }
.m-on .hero__skyline::after { width: 20px; height: 20px; left: 30%; bottom: -30px; z-index: -1; animation-duration: 19s; animation-delay: -7s; }
@keyframes m-bubble {
  0% { opacity: 0; translate: 0 40px; scale: .6; }
  12% { opacity: .9; }
  35% { translate: -22px -30vh; }
  60% { translate: 16px -52vh; }
  85% { opacity: .75; }
  100% { opacity: 0; translate: -8px -78vh; scale: 1.1; }
}

/* The halo behind the portrait breathes; the eyebrow dot keeps a heartbeat; the
   "evidence-based" dot sends out a calm ping. */
.m-on .hero__portrait::before { animation: m-halo 12s var(--m-sine) infinite alternate; animation-play-state: paused; }
@keyframes m-halo { from { rotate: 0deg; scale: 1; } to { rotate: 10deg; scale: 1.06; } }
.m-on .hero__eyebrow .pip { animation: m-heartbeat 2.8s var(--m-sine) 1.4s infinite; animation-play-state: paused; }
@keyframes m-heartbeat { 0%, 24%, 100% { scale: 1; } 6% { scale: 1.45; } 12% { scale: .95; } 18% { scale: 1.25; } }
.m-on .hero__tagdot { position: relative; }
.m-on .hero__tagdot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0;
  pointer-events: none;
  animation: m-ping 3s var(--m-ease) 2s infinite;
  animation-play-state: paused;
}
@keyframes m-ping { 0% { opacity: .6; scale: 1; } 60%, 100% { opacity: 0; scale: 3.4; } }
.m-on .hero.m-live::before,
.m-on .hero.m-live::after,
.m-on .hero.m-live .hero__skyline::after,
.m-on .hero.m-live .hero__portrait::before,
.m-on .hero.m-live .pip,
.m-on .hero.m-live .hero__tagdot::after { animation-play-state: running; }

/* ---------- 4. Inner page hero ---------- */
.m-on:not(.m-done) .phero .crumbs { animation: m-fade .8s var(--m-ease) .05s backwards; }
.m-on:not(.m-done) .phero__eyebrow { animation: m-lift .8s var(--m-ease) .1s backwards; }
.m-on:not(.m-done) .phero__title { animation: m-focus 1.05s var(--m-ease) .18s backwards; }
.m-on:not(.m-done) .phero__lead { animation: m-lift .95s var(--m-ease) .34s backwards; }
.m-on .phero__bloom { animation: m-bloom 11s var(--m-sine) infinite alternate; animation-play-state: paused; }
.m-on .phero.m-live .phero__bloom { animation-play-state: running; }
@keyframes m-bloom { from { scale: 1; translate: 0 0; } to { scale: 1.14; translate: -4% 5%; } }
/* Reading time: the little clock winds once. */
.m-on:not(.m-done) .readmeta { animation: m-lift .8s var(--m-ease) .45s backwards; }
.m-on:not(.m-done) .readmeta .i-clock { animation: m-spin 1.6s var(--m-ease) .7s backwards; }

/* ---------- 5. Section heads + the three principles ---------- */
.m-on:not(.m-done) .sechead:not(.is-in) > * { opacity: 0; }
.m-on:not(.m-done) .sechead.is-in .sechead__eyebrow { animation: m-lift .8s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .sechead.is-in .sechead__title { animation: m-focus 1s var(--m-ease) calc(var(--m-d) + 90ms) backwards; }
.m-on:not(.m-done) .sechead.is-in .sechead__lead { animation: m-lift .9s var(--m-ease) calc(var(--m-d) + 190ms) backwards; }
.m-on:not(.m-done) .sechead.is-in .sechead__link { animation: m-lift .8s var(--m-ease) calc(var(--m-d) + 280ms) backwards; }
.m-on:not(.m-done) .sechead.is-in .sechead__link .i-arrow { animation: m-nudge 1s var(--m-sine) calc(var(--m-d) + 900ms) 2; }

.m-on:not(.m-done) .pillars:not(.is-in) > * { opacity: 0; }
.m-on:not(.m-done) .pillars.is-in .pillars__eyebrow { animation: m-lift .8s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .pillars.is-in .pillars__title { animation: m-focus 1s var(--m-ease) calc(var(--m-d) + 90ms) backwards; }
.m-on:not(.m-done) .pillars.is-in .pillars__lead { animation: m-lift .9s var(--m-ease) calc(var(--m-d) + 190ms) backwards; }
/* Each principle settles onto its own step of the staircase, one after another. */
.m-on .pillar--1 { --p: 150ms; }
.m-on .pillar--2 { --p: 300ms; }
.m-on:not(.m-done) .pillars.is-in .pillar { animation: m-step 1.1s var(--m-ease) calc(var(--m-d) + 280ms + var(--p, 0ms)) backwards; }
.m-on:not(.m-done) .pillars.is-in .pillar__num { transform-origin: 0 100%; animation: m-tilt-in 1s var(--m-pop) calc(var(--m-d) + 560ms + var(--p, 0ms)) backwards; }
@keyframes m-step { from { opacity: 0; translate: 0 64px; } to { opacity: 1; translate: 0 0; } }

/* ---------- 6. Services ---------- */
/* The feature photo rises like a curtain, then its text follows. */
.m-on .bento__body > :nth-child(2) { --c: 80ms; }
.m-on .bento__body > :nth-child(3) { --c: 160ms; }
.m-on .bento__body > :nth-child(4) { --c: 240ms; }
.m-on:not(.m-done) .bento__feature:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .bento__feature.is-in { animation: m-rise 1s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .bento__feature.is-in .bento__media { animation: m-unveil 1.3s var(--m-ease) calc(var(--m-d) + 100ms) backwards; }
.m-on:not(.m-done) .bento__feature.is-in .bento__media img { animation: m-settle 1.8s var(--m-ease) calc(var(--m-d) + 100ms) backwards; }
.m-on:not(.m-done) .bento__feature.is-in .bento__body > * { animation: m-lift .8s var(--m-ease) calc(var(--m-d) + 380ms + var(--c, 0ms)) backwards; }

/* Service cards arrive in a wave; each icon badge pops in. */
.m-on:not(.m-done) .scard:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .scard.is-in { animation: m-rise .95s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .scard.is-in .scard__icon { animation: m-pop .95s var(--m-pop) calc(var(--m-d) + 200ms) backwards; }

.m-on:not(.m-done) .official:not(.is-in) .official__head > * { opacity: 0; }
.m-on:not(.m-done) .official.is-in .official__head > * { animation: m-lift .8s var(--m-ease) calc(var(--m-d) + var(--i, 0) * 90ms) backwards; }
.m-on:not(.m-done) .official.is-in .official__head .sechead__title { animation-name: m-focus; }

/* ---------- 7. Checklists: every tick draws itself ---------- */
.m-on:not(.m-done) :is(.ticklist, .official__list):not(.is-in) > li { opacity: 0; }
.m-on:not(.m-done) :is(.ticklist, .official__list).is-in > li { animation: m-lift .7s var(--m-ease) calc(var(--m-d) + var(--i, 0) * 75ms) backwards; }
.m-on:not(.m-done) :is(.ticklist, .official__list).is-in > li .i-check path {
  stroke-dasharray: 26;
  animation: m-draw .65s var(--m-ease) calc(var(--m-d) + var(--i, 0) * 75ms + 200ms) backwards;
}
/* Numbered steps count themselves in. */
.m-on:not(.m-done) .steplist:not(.is-in) > li { opacity: 0; }
.m-on:not(.m-done) .steplist.is-in > li { animation: m-lift .7s var(--m-ease) calc(var(--m-d) + var(--i, 0) * 110ms) backwards; }
.m-on:not(.m-done) .steplist.is-in > li::before { animation: m-pop .8s var(--m-pop) calc(var(--m-d) + var(--i, 0) * 110ms + 120ms) backwards; }
.m-on:not(.m-done) .dotlist:not(.is-in) > li { opacity: 0; }
.m-on:not(.m-done) .dotlist.is-in > li { animation: m-lift .7s var(--m-ease) calc(var(--m-d) + var(--i, 0) * 80ms) backwards; }
.m-on:not(.m-done) .dotlist.is-in > li::before { animation: m-pop-dot .6s var(--m-pop) calc(var(--m-d) + var(--i, 0) * 80ms + 150ms) backwards; }

/* ---------- 8. Quote bands: the words arrive as if spoken ---------- */
.m-on .quoteband__text .m-word { display: inline-block; }
.m-on:not(.m-done) .quoteband:not(.is-in) .quoteband__inner > * { opacity: 0; }
.m-on:not(.m-done) .quoteband.is-in .quoteband__mark { animation: m-mark 1.1s var(--m-pop) var(--m-d) backwards; }
@keyframes m-mark { from { opacity: 0; scale: 2; rotate: -14deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
.m-on:not(.m-done) .quoteband.is-in .quoteband__text:not(.m-split) { animation: m-focus 1.1s var(--m-ease) calc(var(--m-d) + 200ms) backwards; }
.m-on:not(.m-done) .quoteband.is-in .m-word { animation: m-word .8s var(--m-ease) calc(var(--m-d) + 220ms + var(--w, 0) * 45ms) backwards; }
@keyframes m-word { from { opacity: 0; translate: 0 .45em; } to { opacity: 1; translate: 0 0; } }
.m-on:not(.m-done) .quoteband.is-in .quoteband__source { animation: m-track 1.3s var(--m-ease) calc(var(--m-d) + 420ms + var(--words, 0) * 45ms) backwards; }
@keyframes m-track { from { opacity: 0; letter-spacing: .42em; } to { opacity: 1; letter-spacing: .16em; } }

/* ---------- 9. Story: two photos dropped on the table ---------- */
.m-on:not(.m-done) .story:not(.is-in) :is(.story__frame, .story__text > *) { opacity: 0; }
.m-on:not(.m-done) .story.is-in .story__frame--a { animation: m-photo-a 1.3s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .story.is-in .story__frame--b { animation: m-photo-b 1.3s var(--m-ease) calc(var(--m-d) + 260ms) backwards; }
@keyframes m-photo-a { from { opacity: 0; translate: 0 44px; rotate: -3.5deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes m-photo-b { from { opacity: 0; translate: 0 70px; rotate: 4deg; scale: 1.02; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
.m-on:not(.m-done) .story.is-in .story__text > * { animation: m-lift .85s var(--m-ease) calc(var(--m-d) + 200ms + var(--i, 0) * 90ms) backwards; }
.m-on:not(.m-done) .story.is-in .story__title { animation-name: m-focus; }
.m-on:not(.m-done) .story.is-in .linkarrow .i-arrow { animation: m-nudge 1s var(--m-sine) calc(var(--m-d) + 1.4s) 2; }

/* ---------- 10. Parent guide: cards dealt like leaflets ---------- */
.m-on:not(.m-done) .acard:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .acard.is-in { animation: m-deal 1s var(--m-ease) var(--m-d) backwards; }
@keyframes m-deal { from { opacity: 0; translate: 0 34px; rotate: -2.2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.m-on:not(.m-done) .acard.is-in .acard__kind { animation: m-from-left .8s var(--m-ease) calc(var(--m-d) + 240ms) backwards; }
.m-on:not(.m-done) .pillnav:not(.is-in) > * { opacity: 0; }
.m-on:not(.m-done) .pillnav.is-in > * { animation: m-chip .8s var(--m-pop) calc(var(--m-d) + var(--i, 0) * 70ms) backwards; }
@keyframes m-chip { from { opacity: 0; translate: 0 14px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* ---------- 11. Getting in touch ---------- */
.m-on:not(.m-done) .ctaband__card:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .ctaband__card.is-in { animation: m-rise 1s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .ctaband__card.is-in .ctaband__text > * { animation: m-lift .85s var(--m-ease) calc(var(--m-d) + 160ms + var(--i, 0) * 90ms) backwards; }
.m-on:not(.m-done) .ctaband__card.is-in .ctaband__title { animation-name: m-focus; }
.m-on:not(.m-done) .ctaband__card.is-in .ctaband__actions > .btn { animation: m-lift .85s var(--m-ease) calc(var(--m-d) + 420ms) backwards; }
/* The business card turns over once. */
.m-on:not(.m-done) .ctaband__card.is-in .ctaband__actions > .btn .i-card { animation: m-flip 1.1s var(--m-ease) calc(var(--m-d) + 700ms) backwards; }

/* Contact buttons wave hello, one after another. */
.m-on:not(.m-done) :is(main, .footer) .cicons:not(.is-in) > li { opacity: 0; }
.m-on:not(.m-done) :is(main, .footer) .cicons.is-in > li { animation: m-wave-in .85s var(--m-pop) calc(var(--m-d) + 260ms + var(--i, 0) * 85ms) backwards; }

/* The vizitkart tilts up like a card handed over; a glint crosses it; the buttons
   wave in. Dialog animations replay on every opening. */
.m-on .sheet { perspective: 1400px; }
.m-on .sheet__panel { transform-origin: 50% 100%; animation: m-sheet .7s var(--m-ease) backwards; }
@keyframes m-sheet { from { opacity: 0; translate: 0 30px; rotate: x 9deg; scale: .96; } to { opacity: 1; translate: 0 0; rotate: x 0deg; scale: 1; } }
.m-on .sheet .vcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .3) 48%, rgba(255, 255, 255, 0) 66%);
  translate: 110% 0;
  animation: m-glare 1.5s var(--m-ease) .35s backwards;
}
@keyframes m-glare { from { translate: -110% 0; } to { translate: 110% 0; } }
.m-on .sheet .vcard__sigil { animation: m-pop .9s var(--m-pop) .25s backwards; }
.m-on .sheet:not([hidden]) .cicons > li { animation: m-wave-in .8s var(--m-pop) calc(280ms + var(--i, 0) * 70ms) backwards; }

/* Phone dock: slides up on the first page of a visit, and its phone rings once. */
.m-on.m-first .dock { animation: m-dock .9s var(--m-ease) .5s backwards; }
@keyframes m-dock { from { translate: 0 110%; } to { translate: 0 0; } }
.m-on.m-first .dock__cta .i-phone { animation: m-ring 1.1s var(--m-sine) 1.5s backwards; }
.m-on.m-first .masthead__cta .i-clock { animation: m-spin 1.6s var(--m-ease) 1.1s backwards; }

/* ---------- 12. About ---------- */
.m-on:not(.m-done) .specband:not(.is-in) :is(.specgrid__cell, .specband__link) { opacity: 0; }
.m-on:not(.m-done) .specband.is-in .specgrid__cell { animation: m-lift .8s var(--m-ease) calc(var(--m-d) + var(--i, 0) * 90ms) backwards; }
.m-on:not(.m-done) .specband.is-in .specgrid__cell dd { animation: m-fade .9s var(--m-ease) calc(var(--m-d) + var(--i, 0) * 90ms + 160ms) backwards; }
.m-on:not(.m-done) .specband.is-in .specband__link { animation: m-lift .8s var(--m-ease) calc(var(--m-d) + 520ms) backwards; }

.m-on:not(.m-done) .floatfig:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .floatfig.is-in { animation: m-breathe 1.3s var(--m-ease) var(--m-d) backwards; }

.m-on:not(.m-done) .chapter:not(.is-in) > * { opacity: 0; }
.m-on:not(.m-done) .chapter.is-in .chapter__num { transform-origin: 0 .65em; animation: m-tilt-in 1s var(--m-pop) var(--m-d) backwards; }
.m-on:not(.m-done) .chapter.is-in .chapter__body > * { animation: m-lift .85s var(--m-ease) calc(var(--m-d) + 140ms + var(--i, 0) * 80ms) backwards; }
.m-on:not(.m-done) .chapter.is-in .chapter__body > h2 { animation-name: m-focus; }

/* Values: the accent bar fills in like a progress line. */
.m-on:not(.m-done) .vcardlite:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .vcardlite.is-in { animation: m-rise .95s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .vcardlite.is-in .vcardlite__dot { transform-origin: 0 50%; animation: m-grow-x .9s var(--m-ease) calc(var(--m-d) + 260ms) backwards; }

.m-on:not(.m-done) .notestrip:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .notestrip.is-in { animation: m-lift .8s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .notestrip.is-in .i-info { animation: m-pop .8s var(--m-pop) calc(var(--m-d) + 250ms) backwards; }

/* ---------- 13. Education: certificates stamped in ---------- */
.m-on:not(.m-done) .doc:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .doc.is-in { animation: m-rise 1s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .doc--0.is-in .doc__media { animation: m-wipe-l 1.3s var(--m-ease) calc(var(--m-d) + 150ms) backwards; }
.m-on:not(.m-done) .doc--1.is-in .doc__media { animation: m-wipe-r 1.3s var(--m-ease) calc(var(--m-d) + 150ms) backwards; }
.m-on:not(.m-done) .doc.is-in .doc__media img { animation: m-settle 1.8s var(--m-ease) calc(var(--m-d) + 150ms) backwards; }
.m-on:not(.m-done) .doc.is-in .doc__period { transform-origin: 0 50%; animation: m-stamp .95s var(--m-ease) calc(var(--m-d) + 480ms) backwards; }
.m-on:not(.m-done) .doc.is-in .doc__period .i-graduation { animation: m-toss 1.1s var(--m-pop) calc(var(--m-d) + 900ms) backwards; }
.m-on:not(.m-done) .doc.is-in .doc__body > :not(.doc__period) { animation: m-lift .85s var(--m-ease) calc(var(--m-d) + 560ms + var(--i, 0) * 80ms) backwards; }

.m-on:not(.m-done) .linkcard:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .linkcard.is-in { animation: m-rise .9s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .linkcard.is-in .linkcard__icon { animation: m-pop .9s var(--m-pop) calc(var(--m-d) + 200ms) backwards; }

/* ---------- 14. Conferences: the timeline grows as you read it ---------- */
.m-on:not(.m-done) .timeline::before { transform-origin: 50% 0; }
.m-on:not(.m-done) .timeline:not(.is-in)::before { scale: 1 0; }
.m-on:not(.m-done) .timeline.is-in::before { animation: m-grow-y 2.4s var(--m-ease) var(--m-d) backwards; }
@supports (animation-timeline: view()) {
  .m-on:not(.m-done) .timeline { view-timeline-name: --m-tl; }
  .m-on:not(.m-done) .timeline::before,
  .m-on:not(.m-done) .timeline:not(.is-in)::before,
  .m-on:not(.m-done) .timeline.is-in::before {
    scale: 1 1;
    animation: m-grow-y linear both;
    animation-timeline: --m-tl;
    animation-range: entry 0% cover 55%;
  }
}
.m-on:not(.m-done) .timeline__item:not(.is-in) > * { opacity: 0; }
.m-on:not(.m-done) .timeline__item.is-in .timeline__dot { animation: m-pop-dot .8s var(--m-pop) var(--m-d) backwards; }
.m-on:not(.m-done) .timeline__item.is-in .timeline__dot::after {
  content: "";
  position: absolute;
  inset: -2.5px;
  border-radius: 50%;
  border: 2px solid var(--rose);
  pointer-events: none;
  animation: m-ripple 1.3s var(--m-ease) calc(var(--m-d) + 250ms) backwards;
}
.m-on:not(.m-done) .timeline__item.is-in .timeline__year { animation: m-from-left .9s var(--m-ease) calc(var(--m-d) + 90ms) backwards; }
.m-on:not(.m-done) .timeline__item.is-in .timeline__body { animation: m-lift .9s var(--m-ease) calc(var(--m-d) + 170ms) backwards; }

.m-on:not(.m-done) .duo__item:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .duo__item.is-in { animation: m-rise 1s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .duo__item.is-in .duo__media img { animation: m-settle 2s var(--m-ease) calc(var(--m-d) + 60ms) backwards; }

/* ---------- 15. Long reads: articles, services, legal pages ---------- */
/* Paragraphs surface as the reader reaches them. */
.m-on:not(.m-done) .detail__main > .prose > :not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .detail__main > .prose > .is-in { animation: m-lift .8s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .detail__main > .prose > h2.is-in { animation-name: m-focus; }
/* A note nods, a warning shakes. */
.m-on:not(.m-done) .callout.is-in .callout__icon { animation: m-pop .9s var(--m-pop) calc(var(--m-d) + 200ms) backwards; }
.m-on:not(.m-done) .callout--note.is-in .callout__icon .icon { animation: m-bob 1.2s var(--m-sine) calc(var(--m-d) + 900ms) 2; }
.m-on:not(.m-done) .callout--warn.is-in .callout__icon .icon { animation: m-shake .7s var(--m-sine) calc(var(--m-d) + 900ms) 2; }
@keyframes m-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes m-shake { 0%, 100% { rotate: 0deg; } 20%, 60% { rotate: -12deg; } 40%, 80% { rotate: 12deg; } }

.m-on:not(.m-done) .faq:not(.is-in) > * { opacity: 0; }
.m-on:not(.m-done) .faq.is-in .faq__title { animation: m-focus .95s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .faq.is-in .faq__item { animation: m-lift .75s var(--m-ease) calc(var(--m-d) + 120ms + var(--i, 0) * 70ms) backwards; }
/* Answers unfold smoothly where the browser can animate to height: auto. */
@supports selector(::details-content) {
  .m-on:not(.m-done) .faq__item { interpolate-size: allow-keywords; }
  .m-on:not(.m-done) .faq__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size .5s var(--m-ease), content-visibility .5s var(--m-ease) allow-discrete;
  }
  .m-on:not(.m-done) .faq__item[open]::details-content { block-size: auto; }
}
.m-on:not(.m-done) .faq__item[open] .faq__a { animation: m-lift .55s var(--m-ease) .05s backwards; }

.m-on:not(.m-done) :is(.sidecard, .sidenav):not(.is-in) { opacity: 0; }
.m-on:not(.m-done) :is(.sidecard, .sidenav).is-in { animation: m-rise .9s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .sidenav.is-in li { animation: m-lift .6s var(--m-ease) calc(var(--m-d) + 150ms + var(--i, 0) * 50ms) backwards; }

/* Reading progress along the bottom edge of the header on articles and legal pages. */
.m-on body:has(.readmeta) .masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--rose-l), var(--rose) 45%, var(--plum));
  transform-origin: 0 50%;
  scale: var(--m-progress, 0) 1;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .m-on body:has(.readmeta) .masthead::after { animation: m-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes m-progress { from { scale: 0 1; } to { scale: 1 1; } }

/* ---------- 16. Appointment: four steps, counted in order ---------- */
.m-on:not(.m-done) .steps:not(.is-in) > .step { opacity: 0; }
.m-on:not(.m-done) .steps.is-in > .step { animation: m-rise .95s var(--m-ease) calc(var(--m-d) + var(--i, 0) * 150ms) backwards; }
.m-on:not(.m-done) .steps.is-in .step__num { transform-origin: 0 100%; animation: m-tick 1s var(--m-pop) calc(var(--m-d) + var(--i, 0) * 150ms + 220ms) backwards; }
@keyframes m-tick {
  from { opacity: 0; scale: .3; rotate: -35deg; color: var(--plum); }
  60% { color: var(--plum); }
  to { opacity: 1; scale: 1; rotate: 0deg; color: var(--rose-l); }
}
.m-on:not(.m-done) .panel:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .panel.is-in { animation: m-rise 1s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .panel.is-in .panel__alert { animation: m-lift .8s var(--m-ease) calc(var(--m-d) + 500ms) backwards; }
/* Emergency note: the alert sign asks for attention twice, then rests. */
.m-on:not(.m-done) .panel.is-in .panel__alert .i-alert { animation: m-shake .7s var(--m-sine) calc(var(--m-d) + 1.2s) 2; }

.m-on:not(.m-done) .wherecard:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .wherecard.is-in { animation: m-rise 1s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .wherecard.is-in .wherecard__body > * { animation: m-lift .8s var(--m-ease) calc(var(--m-d) + 150ms + var(--i, 0) * 80ms) backwards; }
.m-on:not(.m-done) .wherecard.is-in .wherecard__media { animation: m-wipe-r 1.3s var(--m-ease) calc(var(--m-d) + 200ms) backwards; }
.m-on:not(.m-done) .wherecard.is-in .wherecard__media img { animation: m-settle 1.8s var(--m-ease) calc(var(--m-d) + 200ms) backwards; }

/* ---------- 17. Contact page ---------- */
.m-on:not(.m-done) :is(.channelcard, .formcard):not(.is-in) { opacity: 0; }
.m-on:not(.m-done) :is(.channelcard, .formcard).is-in { animation: m-rise 1s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .formcard.is-in .form > * { animation: m-lift .75s var(--m-ease) calc(var(--m-d) + 200ms + var(--i, 0) * 70ms) backwards; }
/* The map pin drops onto the clinic and keeps hovering there. */
.m-on:not(.m-done) .mapcard:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .mapcard.is-in { animation: m-rise 1s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .mapcard.is-in .mapcard__load .i-pin { animation: m-pin 1s var(--m-pop) calc(var(--m-d) + 350ms) backwards; }
.m-on:not(.m-done) .mapcard.is-in.m-live .mapcard__load .i-pin {
  animation: m-pin 1s var(--m-pop) calc(var(--m-d) + 350ms) backwards, m-hover-pin 2.6s var(--m-sine) calc(var(--m-d) + 1.4s) infinite;
}
@keyframes m-pin {
  0% { opacity: 0; translate: 0 -40px; scale: .8; }
  60% { opacity: 1; translate: 0 3px; scale: 1.05 .95; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes m-hover-pin { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.m-on .mapcard__frame iframe { animation: m-fade .8s var(--m-ease) backwards; }

/* ---------- 18. Search + sitemap ---------- */
.m-on:not(.m-done) .searchbar:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .searchbar.is-in { animation: m-rise .9s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .searchbar.is-in .searchbar__icon .icon { animation: m-peek 1s var(--m-sine) calc(var(--m-d) + 500ms) backwards; }
.m-on:not(.m-done) .results:not(.is-in) > li { opacity: 0; }
.m-on:not(.m-done) .results.is-in > li { animation: m-lift .7s var(--m-ease) calc(var(--m-d) + var(--i, 0) * 60ms) backwards; }

.m-on:not(.m-done) .smap__group:not(.is-in) { opacity: 0; }
.m-on:not(.m-done) .smap__group.is-in { animation: m-rise .9s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .smap__group.is-in .smap__icon { animation: m-pop .9s var(--m-pop) calc(var(--m-d) + 200ms) backwards; }
.m-on:not(.m-done) .smap__group.is-in .smap__list > li { animation: m-lift .6s var(--m-ease) calc(var(--m-d) + 250ms + var(--i, 0) * 40ms) backwards; }

/* ---------- 19. Header menus ---------- */
.m-on .submenu:not([hidden]) .submenu__list > li { animation: m-lift .45s var(--m-ease) calc(50ms + var(--i, 0) * 35ms) backwards; }
.m-on .submenu:not([hidden]) .submenu__icon { animation: m-pop .6s var(--m-pop) calc(120ms + var(--i, 0) * 35ms) backwards; }
.m-on .drawer:not([hidden]) .drawer__list > li { animation: m-lift .5s var(--m-ease) calc(120ms + var(--i, 0) * 45ms) backwards; }
.m-on .drawer__sub:not([hidden]) > li { animation: m-lift .4s var(--m-ease) calc(var(--i, 0) * 40ms) backwards; }
.m-on .drawer:not([hidden]) .drawer__foot .cicons > li { animation: m-wave-in .8s var(--m-pop) calc(300ms + var(--i, 0) * 60ms) backwards; }
.m-on .brandmark:is(:hover, :focus-visible) .brandmark__sigil { animation: m-sigil .8s var(--m-pop); }
@keyframes m-sigil { 0%, 100% { rotate: 0deg; scale: 1; } 35% { rotate: -10deg; scale: 1.1; } 65% { rotate: 4deg; scale: .98; } }

/* ---------- 20. Footer ---------- */
.m-on:not(.m-done) .footer:not(.is-in) :is(.footer__brand, .footer__col, .footer__address, .footer__disclaimer, .footer__bottom) { opacity: 0; }
.m-on:not(.m-done) .footer.is-in .footer__brand { animation: m-lift .9s var(--m-ease) var(--m-d) backwards; }
.m-on:not(.m-done) .footer.is-in .footer__brand .brandmark__sigil { animation: m-pop 1s var(--m-pop) calc(var(--m-d) + 120ms) backwards; }
.m-on:not(.m-done) .footer.is-in .footer__col { animation: m-lift .9s var(--m-ease) calc(var(--m-d) + 120ms + var(--i, 0) * 110ms) backwards; }
.m-on:not(.m-done) .footer.is-in :is(.footer__address, .footer__disclaimer, .footer__bottom) { animation: m-fade 1s var(--m-ease) calc(var(--m-d) + 480ms) backwards; }

/* ---------- 21. Icon gestures ---------- */
/* Every icon has a small gesture of its own, played when its link or button is
   hovered or focused: the stethoscope swings, the baby rocks, the leaf sways, the
   flask tilts, the phone rings, the pin drops, the card turns over. */
.m-on .i-stethoscope { --m-g: m-swing; transform-origin: 50% 10%; }
.m-on .i-baby { --m-g: m-rock; transform-origin: 50% 88%; }
.m-on .i-shield { --m-g: m-shine; }
.m-on .i-pulse { --m-g: m-beat; }
.m-on .i-leaf { --m-g: m-sway; transform-origin: 18% 84%; }
.m-on .i-flask { --m-g: m-tilt; transform-origin: 50% 90%; }
.m-on .i-book,
.m-on .i-card { --m-g: m-flip; }
.m-on .i-virus,
.m-on .i-close { --m-g: m-turn; }
.m-on .i-thermometer { --m-g: m-mercury; transform-origin: 50% 90%; }
.m-on .i-apple,
.m-on .i-whatsapp { --m-g: m-bounce; }
.m-on .i-bulb { --m-g: m-glow; }
.m-on .i-chat { --m-g: m-pop-h; transform-origin: 30% 80%; }
.m-on .i-graduation { --m-g: m-toss; }
.m-on .i-presentation,
.m-on .i-grid,
.m-on .i-doctor,
.m-on .i-clinic,
.m-on .i-access { --m-g: m-pop-h; }
.m-on .i-phone { --m-g: m-ring; }
.m-on .i-mail { --m-g: m-send; }
.m-on .i-instagram { --m-g: m-snap; }
.m-on .i-pin,
.m-on .i-download { --m-g: m-drop; }
.m-on .i-clock { --m-g: m-spin; }
.m-on .i-sparkle { --m-g: m-twinkle; }
.m-on .i-search { --m-g: m-peek; transform-origin: 40% 40%; }
.m-on :is(a, button):is(:hover, :focus-visible) .icon { animation: var(--m-g, none) .95s var(--m-sine); }

@keyframes m-swing { 0%, 100% { rotate: 0deg; } 20% { rotate: 16deg; } 45% { rotate: -11deg; } 68% { rotate: 6deg; } 86% { rotate: -2deg; } }
@keyframes m-rock { 0%, 100% { rotate: 0deg; } 25% { rotate: -10deg; } 50% { rotate: 8deg; } 75% { rotate: -4deg; } }
@keyframes m-shine { 0%, 100% { scale: 1; rotate: 0deg; } 40% { scale: 1.18; rotate: -6deg; } 70% { scale: .97; rotate: 2deg; } }
@keyframes m-beat { 0%, 100% { scale: 1; } 14% { scale: 1.25; } 28% { scale: .96; } 42% { scale: 1.16; } 60% { scale: 1; } }
@keyframes m-sway { 0%, 100% { rotate: 0deg; } 30% { rotate: -14deg; } 62% { rotate: 8deg; } 84% { rotate: -3deg; } }
@keyframes m-tilt { 0%, 100% { rotate: 0deg; } 22% { rotate: -16deg; } 50% { rotate: 11deg; } 76% { rotate: -5deg; } }
@keyframes m-flip { from { rotate: y 0deg; } to { rotate: y 360deg; } }
@keyframes m-turn { from { rotate: 0deg; } to { rotate: 90deg; } }
@keyframes m-mercury { 0%, 100% { translate: 0 0; scale: 1; } 45% { translate: 0 -2px; scale: 1 1.1; } }
@keyframes m-bounce { 0%, 100% { translate: 0 0; } 28% { translate: 0 -6px; } 52% { translate: 0 0; } 70% { translate: 0 -2px; } }
@keyframes m-glow { 0%, 100% { filter: none; } 45% { filter: drop-shadow(0 0 6px rgba(231, 162, 182, .95)); } }
@keyframes m-pop-h { 0%, 100% { scale: 1; } 38% { scale: 1.22; } 68% { scale: .95; } }
@keyframes m-toss { 0%, 100% { translate: 0 0; rotate: 0deg; } 40% { translate: 0 -6px; rotate: -20deg; } 70% { translate: 0 1px; rotate: 6deg; } }
@keyframes m-ring { 0%, 100% { rotate: 0deg; } 8%, 24%, 40% { rotate: -16deg; } 16%, 32%, 48% { rotate: 16deg; } 60% { rotate: 0deg; } }
@keyframes m-send {
  0% { translate: 0 0; opacity: 1; }
  42% { translate: 10px -4px; opacity: 0; }
  43% { translate: -10px 4px; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}
@keyframes m-snap { 0%, 100% { scale: 1; rotate: 0deg; } 30% { scale: .82; rotate: -8deg; } 60% { scale: 1.14; rotate: 4deg; } }
@keyframes m-drop { 0%, 100% { translate: 0 0; } 30% { translate: 0 -7px; } 58% { translate: 0 1px; } 76% { translate: 0 -2px; } }
@keyframes m-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes m-twinkle { 0%, 100% { rotate: 0deg; scale: 1; } 45% { rotate: 30deg; scale: 1.22; } }
@keyframes m-peek { 0%, 100% { rotate: 0deg; translate: 0 0; } 40% { rotate: -16deg; translate: -1px -1px; } 70% { rotate: 6deg; } }