/* ==========================================================================
   Lengai Lodge — motion & Maasai details
   ========================================================================== */

/* ---------- Welcome intro ---------- */
html.intro-active, html.intro-active body { overflow: hidden; }
.hello-intro { position: fixed; inset: 0; z-index: 1000; overflow: hidden; }
.hello-intro[hidden] { display: none; }

.intro__curtain { position: absolute; top: 0; bottom: 0; width: 50.5%; transition: transform .9s cubic-bezier(.7,0,.2,1); }
.intro__curtain--l { left: 0; box-shadow: inset -8px 0 0 rgba(0,0,0,.25); }
.intro__curtain--r { right: 0; box-shadow: inset 8px 0 0 rgba(0,0,0,.25); }
.hello-intro.is-opening .intro__curtain--l { transform: translateX(-102%); }
.hello-intro.is-opening .intro__curtain--r { transform: translateX(102%); }

.intro__scene {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
	background: linear-gradient(180deg, #F6C27A 0%, #EE9A55 40%, #D46A3E 70%, #9A4A2C 100%);
	transition: opacity .5s ease, transform .6s ease;
}
.hello-intro.is-leaving .intro__scene { opacity: 0; transform: scale(1.08); }

.intro__sun {
	position: absolute; left: 50%; top: 18%; width: min(62vmin, 520px); aspect-ratio: 1; border-radius: 50%;
	transform: translateX(-50%);
	background: radial-gradient(circle, #FFF1C9 0 38%, rgba(255,226,160,.55) 39% 55%, rgba(255,210,140,0) 70%);
	animation: sun-pulse 3.5s ease-in-out infinite;
}
@keyframes sun-pulse { 50% { transform: translateX(-50%) scale(1.05); } }

.intro__land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; }

.intro__stage {
	position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center;
	gap: clamp(.5rem, 2vw, 1.5rem); padding-bottom: clamp(1.5rem, 5vh, 3rem);
	padding-inline: 1rem;
}
.intro__beads { position: relative; z-index: 1; height: 26px; }

.warrior { width: auto; height: min(68vh, 600px); overflow: visible; opacity: 0; transform: translateY(40px) scale(.94); }
.hello-intro.is-in .warrior { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1.2); }

.warrior__body, .warrior__shadow { transform-box: view-box; transform-origin: 130px 484px; }
.warrior__arm { transform-box: view-box; transform-origin: 181px 184px; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.warrior__hand { transform-box: view-box; transform-origin: 192px 290px; }
.warrior__eyes { transform-box: fill-box; transform-origin: center; animation: blink 3.6s infinite; }
.warrior__drape { transform-box: view-box; transform-origin: 92px 172px; }

/* Adumu: straight, proud vertical jumps */
.hello-intro.is-jumping .warrior__body { animation: adumu .72s cubic-bezier(.3,0,.3,1) 3; }
.hello-intro.is-jumping .warrior__shadow { animation: adumu-shadow .72s cubic-bezier(.3,0,.3,1) 3; }
.hello-intro.is-jumping .warrior__drape { animation: drape-flutter .72s ease-in-out 3; }
@keyframes adumu {
	0%   { transform: translateY(0) scaleY(1); }
	14%  { transform: translateY(0) scaleY(.93); }
	50%  { transform: translateY(-26%) scaleY(1.03); }
	58%  { transform: translateY(-26%) scaleY(1.02); }
	90%  { transform: translateY(0) scaleY(.97); }
	100% { transform: translateY(0) scaleY(1); }
}
@keyframes adumu-shadow { 50%, 58% { transform: scale(.55); opacity: .15; } }
@keyframes drape-flutter { 50% { transform: rotate(-4deg); } 90% { transform: rotate(2deg); } }

/* Wave hello */
.hello-intro.is-waving .warrior__arm { transform: rotate(-158deg); }
.hello-intro.is-waving .warrior__hand { animation: wave .42s ease-in-out .45s infinite alternate; }
.hello-intro.is-waving .warrior__body { animation: sway 1.6s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-16deg); } to { transform: rotate(18deg); } }
@keyframes sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

.intro__skip {
	position: absolute; z-index: 2; right: 1rem; top: calc(1rem + env(safe-area-inset-top, 0px));
	font: 700 .95rem var(--sans); color: #fff; background: rgba(42,35,32,.55); border: 2px solid rgba(255,255,255,.6);
	border-radius: 999px; padding: .6rem 1.1rem; cursor: pointer; backdrop-filter: blur(4px);
}
.intro__skip:hover { background: var(--shuka); border-color: var(--shuka); }
.hello-intro.is-leaving .intro__skip { opacity: 0; }

@media (max-width: 640px) {
	.warrior { height: min(52vh, 420px); }
}

/* Hero waits for the intro to finish */
html.intro-active .hero__content > *,
html.intro-active .hero__word { animation-play-state: paused !important; }

/* Hero headline: word by word */
.hero__word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
	.hero__title { animation: none !important; opacity: 1 !important; }
	.hero__word { opacity: 0; animation: word-rise .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 90ms + .1s); }
}
@keyframes word-rise { from { opacity: 0; transform: translateY(.5em) rotate(3deg); } to { opacity: 1; transform: none; } }

/* ---------- Bead scroll progress ---------- */
.bead-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 7px; z-index: 120; pointer-events: none;
	background: url("../img/beads.svg") repeat-x left center / auto 7px;
	clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0);
}

/* ---------- Beadwork bands drift slowly ---------- */
@media (prefers-reduced-motion: no-preference) {
	.bead-band { animation: beads-drift 6s linear infinite; }
	.bead-band--rev { animation-direction: reverse; }
}
@keyframes beads-drift { to { background-position-x: 72px; } }

/* ---------- Scroll reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] { opacity: 0; transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1), clip-path 1.1s cubic-bezier(.7,0,.2,1); }
	.js [data-reveal="up"] { transform: translateY(40px); }
	.js [data-reveal="left"] { transform: translateX(-50px); }
	.js [data-reveal="right"] { transform: translateX(50px); }
	.js [data-reveal="wipe"] { opacity: 1; }
	.js [data-reveal="wipe"] > * { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
	.js [data-reveal="wipe"].is-in > * { clip-path: inset(0 0 0 0); }
	.js [data-reveal="zoom"] { transform: scale(.9); }
	.js [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
	.js [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
	.js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
}

/* Bead-list bullets pop in one after another */
@media (prefers-reduced-motion: no-preference) {
	.js .bead-list li::before { transform: scale(0); transition: transform .5s cubic-bezier(.2,1.8,.4,1); transition-delay: calc(var(--i, 0) * 70ms + .2s); transform-origin: left center; }
	.js .bead-list.is-in li::before { transform: scale(1); }
}

/* ---------- Activity tiles: tilt toward the pointer ---------- */
.activity-grid { perspective: 1200px; }
.activity-tile a { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease, box-shadow .35s ease; will-change: transform; }
.activity-tile a:hover { box-shadow: 0 30px 50px rgba(0,0,0,.35); }
.activity-tile a::before {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
	background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.18), transparent 45%);
	opacity: 0; transition: opacity .3s;
}
.activity-tile a:hover::before { opacity: 1; }
.activity-tile__title::after {
	content: ""; display: block; height: 6px; width: 0; margin-top: .5rem;
	background: url("../img/beads.svg") repeat-x left center / auto 6px; transition: width .5s ease;
}
.activity-tile a:hover .activity-tile__title::after, .activity-tile a:focus-visible .activity-tile__title::after { width: 96px; }
.activity-tile a:hover .activity-tile__title { text-decoration: none; }

/* ---------- Flamingos over the activities ---------- */
.activities { position: relative; overflow: hidden; }
.activities > .wrap { position: relative; z-index: 1; }
.flamingos { position: absolute; left: 0; right: 0; top: 1.5rem; height: 220px; pointer-events: none; z-index: 0; }
.flamingo { position: absolute; left: 0; width: 110px; opacity: .9; animation: fly 26s linear infinite; }
.flamingo svg { width: 100%; height: auto; display: block; animation: bob 1.1s ease-in-out infinite alternate; }
.flamingo .fl-wing { transform-box: fill-box; transform-origin: 50% 100%; animation: flap .45s ease-in-out infinite alternate; }
.flamingo:nth-child(1) { top: 20px;  width: 120px; animation-delay: 0s; }
.flamingo:nth-child(2) { top: 70px;  width: 90px;  animation-delay: -3s;  animation-duration: 29s; }
.flamingo:nth-child(3) { top: 0;     width: 80px;  animation-delay: -5s;  animation-duration: 31s; }
.flamingo:nth-child(4) { top: 120px; width: 100px; animation-delay: -12s; animation-duration: 27s; }
.flamingo:nth-child(5) { top: 45px;  width: 70px;  animation-delay: -15s; animation-duration: 33s; }
.flamingo:nth-child(6) { top: 150px; width: 85px;  animation-delay: -21s; animation-duration: 30s; }
.flamingo:nth-child(2) .fl-wing { animation-delay: -.2s; }
.flamingo:nth-child(4) .fl-wing { animation-delay: -.3s; }
.flamingo:nth-child(5) .fl-wing { animation-delay: -.1s; }
@keyframes fly { from { transform: translateX(-160px); } to { transform: translateX(calc(100vw + 160px)); } }
@keyframes bob { to { transform: translateY(10px); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.75); } }

/* ---------- Maasai culture section ---------- */
.culture { position: relative; overflow: hidden; }
.culture__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.culture__media { position: relative; padding: 2rem 2rem 3rem 0; }
.culture__main { position: relative; z-index: 1; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px rgba(42,35,32,.25); }
.culture__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s ease; }
.culture__main:hover img { transform: scale(1.04); }
.culture__frame { position: absolute; inset: 0 0 1rem 2.5rem; border-radius: var(--radius); z-index: 0; animation: shuka-drift 30s linear infinite; }
.culture__thumbs { position: relative; z-index: 2; display: flex; gap: .75rem; margin-top: -3rem; padding-left: 1.5rem; }
.culture__thumbs button {
	width: 92px; aspect-ratio: 1; padding: 0; border: 4px solid var(--paper); border-radius: 50%; overflow: hidden; cursor: pointer;
	box-shadow: 0 8px 18px rgba(0,0,0,.2); background: var(--ash); transition: transform .3s cubic-bezier(.2,1.6,.4,1), border-color .2s;
}
.culture__thumbs button:hover { transform: translateY(-6px) rotate(-4deg); }
.culture__thumbs button[aria-pressed="true"] { border-color: var(--shuka); }
.culture__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.bead-ring { position: absolute; z-index: 2; right: -10px; top: -10px; width: 150px; height: 150px; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shuka-drift { to { background-position: 300px 300px, 300px 300px; } }

.culture__text p { max-width: 58ch; color: #433A35; }
.bead-picker { margin-top: 2rem; padding: 1.5rem; background: var(--paper); box-shadow: 0 10px 30px rgba(42,35,32,.08); border-radius: var(--radius); }
.bead-picker__label { font-weight: 700; margin-bottom: 1rem; }
.bead-picker__row { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.bead-btn {
	width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; position: relative;
	background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), transparent 30%), var(--c);
	box-shadow: inset 0 -5px 8px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.15);
	transition: transform .3s cubic-bezier(.2,1.8,.4,1);
}
.bead-btn::after { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: rgba(0,0,0,.35); }
.bead-btn:hover { transform: translateY(-4px) scale(1.08); }
.bead-btn[aria-pressed="true"] { transform: scale(1.18); outline: 3px solid var(--basalt); outline-offset: 3px; }
.bead-picker__out { min-height: 3.2em; margin: 0; }
.bead-picker__out strong { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; display: block; }
.bead-picker__out.is-changing { animation: pop .4s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Shuka CTA gently moves like cloth ---------- */
@media (prefers-reduced-motion: no-preference) {
	.cta.shuka { animation: shuka-drift 40s linear infinite; }
	.cta__text { animation: float 5s ease-in-out infinite alternate; }
}
@keyframes float { to { transform: translateY(-8px) rotate(-.4deg); } }

/* ---------- Volcano smoke in the footer ---------- */
.volcano-wrap { position: relative; }
.volcano-wrap .footer-volcano { margin-top: 0; }
.smoke { position: absolute; left: 50.4%; top: 4%; width: 0; height: 0; }
.smoke span {
	position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
	background: radial-gradient(circle, rgba(220,210,200,.35), rgba(220,210,200,0) 70%);
	animation: smoke 7s ease-out infinite;
}
.smoke span:nth-child(2) { animation-delay: -2.3s; }
.smoke span:nth-child(3) { animation-delay: -4.6s; }
.smoke::before {
	content: ""; position: absolute; left: -26px; top: -6px; width: 52px; height: 12px; border-radius: 50%;
	background: radial-gradient(#FF8A3D, rgba(255,90,40,0) 70%); animation: glow 2.5s ease-in-out infinite alternate;
}
@keyframes smoke { from { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: 1; } to { transform: translate(40px, -150px) scale(2.6); opacity: 0; } }
@keyframes glow { from { opacity: .35; } to { opacity: 1; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.flamingo, .flamingo svg, .flamingo .fl-wing, .smoke span, .bead-ring, .intro__sun, .culture__frame { animation: none !important; }
	.flamingo { display: none; }
	.warrior__arm, .intro__curtain, .intro__scene { transition-duration: .01s !important; }
}

@media (max-width: 960px) {
	.culture__grid { grid-template-columns: 1fr; }
	.culture__media { max-width: 560px; }
}
@media (max-width: 640px) {
	.culture__thumbs button { width: 68px; }
	.bead-ring { width: 100px; height: 100px; }
	.flamingos { height: 140px; }
}