/* ==========================================================================
   Lengai Lodge — Maasai companion, scenes & celebration
   ========================================================================== */

/* ---------- Shared character rig ---------- */
.mz-p { overflow: visible; }
.mz-p .mz-all    { transform-box: view-box; transform-origin: 50px 196px; }
.mz-p .mz-shadow { transform-box: view-box; transform-origin: 50px 197px; }
.mz-p .mz-arm--l { transform-box: view-box; transform-origin: 32px 72px; transform: rotate(6deg); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.mz-p .mz-arm--r { transform-box: view-box; transform-origin: 68px 72px; transform: rotate(-6deg); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.mz-p .mz-head   { transform-box: view-box; transform-origin: 50px 56px; transition: transform .4s ease; }
.mz-p .mz-leg--l { transform-box: view-box; transform-origin: 43px 146px; }
.mz-p .mz-leg--r { transform-box: view-box; transform-origin: 56px 146px; }
.mz-p .mz-eyes   { transform-box: fill-box; transform-origin: center; animation: mz-blink 4.2s infinite; }
@keyframes mz-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* Scene poses */
.pose-drink .mz-arm--r { animation: mz-drink 2.4s ease-in-out infinite; }
.pose-drink .mz-head   { animation: mz-sip 2.4s ease-in-out infinite; }
@keyframes mz-drink { 0%, 100% { transform: rotate(-6deg); } 22%, 80% { transform: rotate(140deg); } }
@keyframes mz-sip   { 0%, 100% { transform: none; } 22%, 80% { transform: rotate(-9deg) translateY(-1px); } }

.pose-lean .mz-arm--l { transform: rotate(14deg); }
.pose-lean .mz-head   { animation: mz-look 3s ease-in-out infinite; }
@keyframes mz-look { 0%, 100% { transform: none; } 30% { transform: rotate(9deg); } 65% { transform: rotate(-7deg); } }

.pose-jump .mz-all    { animation: mz-jump .8s cubic-bezier(.3,0,.3,1) infinite; }
.pose-jump .mz-shadow { animation: mz-shadow .8s cubic-bezier(.3,0,.3,1) infinite; }
@keyframes mz-jump {
	0%   { transform: translateY(0) scaleY(1); }
	14%  { transform: translateY(0) scaleY(.92); }
	50%  { transform: translateY(-46px) scaleY(1.03); }
	58%  { transform: translateY(-46px); }
	90%  { transform: translateY(0) scaleY(.97); }
	100% { transform: translateY(0) scaleY(1); }
}
@keyframes mz-shadow { 50%, 58% { transform: scale(.5); opacity: .12; } }
.is-late .mz-all, .is-late .mz-shadow, .is-late .mz-cowhead, .is-late .mz-tail { animation-delay: .27s; }
.is-later .mz-all, .is-later .mz-shadow, .is-later .mz-cowhead, .is-later .mz-tail { animation-delay: .54s; }
.is-kid .mz-all { animation-duration: .6s; }

.pose-armsup .mz-arm--l { transform: rotate(160deg); }
.pose-armsup .mz-arm--r { transform: rotate(-160deg); }
.pose-wave .mz-arm--r   { animation: mz-wave .45s ease-in-out infinite alternate; }
.pose-wave.is-slow .mz-arm--r { animation-duration: .75s; }
@keyframes mz-wave { from { transform: rotate(-138deg); } to { transform: rotate(-172deg); } }

.pose-clap .mz-arm--l { animation: mz-clap-l .28s ease-in-out infinite alternate; }
.pose-clap .mz-arm--r { animation: mz-clap-r .28s ease-in-out infinite alternate; }
.pose-clap .mz-all    { animation: mz-bob .56s ease-in-out infinite alternate; }
@keyframes mz-clap-l { from { transform: rotate(-18deg); } to { transform: rotate(-36deg); } }
@keyframes mz-clap-r { from { transform: rotate(18deg); } to { transform: rotate(36deg); } }
@keyframes mz-bob { to { transform: translateY(-4px); } }

/* Cattle */
.mz-cow .mz-cowhead { transform-box: view-box; transform-origin: 40px 48px; }
.mz-cow .mz-tail    { transform-box: view-box; transform-origin: 114px 46px; animation: mz-tail 1.5s ease-in-out infinite alternate; }
.mz-cow.is-grazing .mz-cowhead { animation: mz-graze 2.6s ease-in-out infinite; }
@keyframes mz-graze { 0%, 100% { transform: none; } 35%, 75% { transform: rotate(-20deg); } 55% { transform: rotate(-16deg); } }
@keyframes mz-tail { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }

/* ---------- The companion ---------- */
.mz-buddy {
	--bw: 68px; position: fixed; left: 0; top: 0; z-index: 150; width: 68px; height: 136px; pointer-events: none;
	opacity: 0; transition: opacity .4s ease; will-change: transform;
}
.mz-buddy.is-here { opacity: 1; }
html.intro-active .mz-buddy { opacity: 0; }
.mz-buddy__inner { width: 100%; height: 100%; transition: transform .18s ease; }
.mz-buddy__svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 5px rgba(0,0,0,.25)); }
.mz-buddy.is-docked { --bw: 46px; width: 46px; height: 92px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: none !important; left: 10px; }

/* Walking after the cursor */
.mz-buddy.is-walking .mz-leg--l { animation: mz-step .34s ease-in-out infinite alternate; }
.mz-buddy.is-walking .mz-leg--r { animation: mz-step .34s ease-in-out infinite alternate-reverse; }
.mz-buddy.is-walking .mz-all    { animation: mz-walkbob .17s ease-in-out infinite alternate; }
.mz-buddy.is-walking .mz-arm--l { transform: rotate(14deg); }
.mz-buddy.is-running .mz-leg--l, .mz-buddy.is-running .mz-leg--r { animation-duration: .2s; }
.mz-buddy.is-running .mz-all { animation-duration: .1s; }
@keyframes mz-step { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes mz-walkbob { to { transform: translateY(-4px); } }

/* Companion moods */
.mz-buddy.pose-wave .mz-arm--r { animation: mz-wave .45s ease-in-out infinite alternate; }
.mz-buddy.pose-hop .mz-all { animation: mz-jump .6s cubic-bezier(.3,0,.3,1); }
.mz-buddy.pose-look .mz-head { animation: mz-look 2s ease-in-out; }
.mz-buddy.pose-lean .mz-arm--l { transform: rotate(14deg); }
.mz-buddy.pose-lean .mz-head { transform: rotate(6deg); }
.mz-buddy.pose-curious .mz-head { transform: rotate(-10deg); }
.mz-buddy.pose-curious .mz-arm--r { transform: rotate(-120deg); }
.mz-buddy.pose-cheer .mz-arm--l { transform: rotate(160deg); }
.mz-buddy.pose-cheer .mz-arm--r { transform: rotate(-160deg); }
.mz-buddy.pose-cheer .mz-all { animation: mz-jump .5s cubic-bezier(.3,0,.3,1) infinite; }
.mz-buddy.pose-love .mz-arm--l { transform: rotate(-40deg); }
.mz-buddy.pose-love .mz-arm--r { transform: rotate(40deg); }
.mz-buddy.pose-love .mz-all { animation: mz-bob .4s ease-in-out infinite alternate; }

/* ---------- Everyday activities ---------- */
/* The milk gourd only appears while he drinks */
.mz-buddy .mz-gourd { opacity: 0; transition: opacity .3s ease; }
.mz-buddy.act-milk .mz-gourd { opacity: 1; }
.mz-buddy.act-milk .mz-arm--r { animation: mz-drink 2.8s ease-in-out infinite; }
.mz-buddy.act-milk .mz-head { animation: mz-sip 2.8s ease-in-out infinite; }

/* Watching the cattle, leaning on his stick */
.mz-buddy.act-cattle .mz-arm--l { transform: rotate(14deg); }
.mz-buddy.act-cattle .mz-head { animation: mz-look 3.4s ease-in-out infinite; }

/* Jumping with a friend */
.mz-buddy.act-friends .mz-all { animation: mz-jump .8s cubic-bezier(.3,0,.3,1) infinite; }
.mz-buddy.act-friends .mz-shadow { animation: mz-shadow .8s cubic-bezier(.3,0,.3,1) infinite; }

/* Showing the family */
.mz-buddy.act-family .mz-arm--r { animation: mz-wave .5s ease-in-out infinite alternate; }

/* The people and cattle who join him */
.mz-buddy__extras {
	position: absolute; bottom: 0; left: 100%; margin-left: 4px;
	display: flex; align-items: flex-end; gap: 2px; pointer-events: none;
}
.mz-buddy.extras-left .mz-buddy__extras { left: auto; right: 100%; margin: 0 4px 0 0; flex-direction: row-reverse; }
.mz-extra { flex: none; opacity: 0; transform: translateX(28px); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.9,.3,1.1); }
.mz-buddy.extras-left .mz-extra { transform: translateX(-28px); }
.mz-buddy__extras.is-in .mz-extra { opacity: 1; transform: none; }
.mz-buddy__extras.is-in .mz-extra:nth-child(2) { transition-delay: .15s; }
.mz-buddy__extras.is-leaving .mz-extra { opacity: 0; transform: translateX(28px); transition-duration: .45s; }
.mz-buddy.extras-left .mz-buddy__extras.is-leaving .mz-extra { transform: translateX(-28px); }
.mz-extra svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 5px rgba(0,0,0,.22)); }
.mz-extra--person { width: var(--bw); height: calc(var(--bw) * 2); }
.mz-extra--kid { width: calc(var(--bw) * .62); height: calc(var(--bw) * 1.24); }
.mz-extra--cow { width: calc(var(--bw) * 1.7); height: calc(var(--bw) * 1.17); }
.mz-extra--cow.is-small { width: calc(var(--bw) * 1.35); height: calc(var(--bw) * .93); margin-left: -8px; }
/* Cattle face toward him when they are on his left */
.mz-buddy.extras-left .mz-extra--cow svg { transform: scaleX(-1); }
.mz-buddy:not(.extras-left) .mz-extra--cow svg { transform: none; }

/* Hearts and beads that float up from the companion */
.mz-buddy__fx { position: absolute; left: 50%; top: 4px; width: 0; height: 0; }
.mz-heart, .mz-bead { position: absolute; left: -7px; top: 0; opacity: 0; animation: mz-float 1.7s ease-out var(--d, 0s) forwards; }
.mz-heart { width: 13px; height: 13px; background: #C8141F; transform: rotate(45deg); }
.mz-heart::before, .mz-heart::after { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: inherit; }
.mz-heart::before { left: -6.5px; top: 0; }
.mz-heart::after { left: 0; top: -6.5px; }
.mz-bead { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25); }
@keyframes mz-float {
	0%   { opacity: 0; translate: 0 0; scale: .4; }
	20%  { opacity: 1; }
	100% { opacity: 0; translate: var(--dx, 0) -80px; scale: 1.1; }
}

/* ---------- Booking celebration ---------- */
.mz-party {
	position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 1rem;
	background: rgba(42,35,32,.72); opacity: 0; transition: opacity .35s ease; overflow: hidden;
}
.mz-party.is-in { opacity: 1; }
.mz-party.is-out { opacity: 0; }
.mz-party__card {
	position: relative; z-index: 1; width: min(94vw, 640px); text-align: center; border-radius: 18px;
	padding: .75rem 1.5rem 1.75rem; border: 6px solid transparent;
	background-image: linear-gradient(180deg, #F8CB8B, #EE9A55), url("../img/beads.svg");
	background-origin: border-box; background-clip: padding-box, border-box;
	box-shadow: 0 30px 80px rgba(0,0,0,.4);
	transform: scale(.85) translateY(20px); transition: transform .5s cubic-bezier(.2,1.5,.4,1);
}
.mz-party.is-in .mz-party__card { transform: none; }
.mz-party__art { width: 100%; height: auto; aspect-ratio: 2 / 1; display: block; }
.mz-party__title { font-family: var(--serif); font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 1; color: var(--shuka-dark); margin: .25rem 0 .5rem; }
.mz-party__text { color: #3A1A10; max-width: 40ch; margin: 0 auto 1.25rem; font-size: 1.05rem; }
.mz-party__confetti { position: absolute; inset: 0; pointer-events: none; }
.mz-party__confetti span {
	position: absolute; top: -20px; border-radius: 50%; box-shadow: inset 0 -2px 3px rgba(0,0,0,.25);
	animation: mz-fall var(--dur, 3s) linear var(--delay, 0s) infinite;
}
@keyframes mz-fall { to { transform: translate(var(--sway, 0), 110vh); } }


@media (prefers-reduced-motion: reduce) {
	.mz-p *, .mz-cow * { animation: none !important; }
	.mz-buddy { display: none; }
}