/* ===== Desa Lampasio — lapisan gerak ("fajar di kampung"): matahari terbit, kelapa bergoyang, awan, perahu sungai =====
   Hanya transform/opacity. Aktif bila <html class="mo">; tanpa JS / "kurangi gerakan" halaman tampil statis utuh. */

/* 1. Pembuka: fajar terbit, lalu tirai membelah ke kiri-kanan */
.mo-intro{position:fixed;inset:0;z-index:9999;overflow:hidden;display:grid;place-items:center;color:#fff;pointer-events:none}
.mo-intro .h{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(180deg,#1f2e40 0%,#2a3b50 55%,#3a4f6b 100%);transition:transform .95s cubic-bezier(.77,0,.18,1)}
.mo-intro .h1{left:0}.mo-intro .h2{right:0}
.mo-intro.out .h1{transform:translateX(-101%)}.mo-intro.out .h2{transform:translateX(101%)}
.mo-sun{position:absolute;left:50%;bottom:-120px;width:240px;height:240px;margin-left:-120px;border-radius:50%;background:radial-gradient(circle,#ffd54a 0,#f28c28 62%,rgba(242,140,40,0) 70%);animation:moRise 1.5s .1s cubic-bezier(.2,.8,.2,1) forwards;filter:blur(.3px)}
.mo-hill{position:absolute;left:0;right:0;bottom:0;height:34%;background:#16222f;clip-path:ellipse(75% 100% at 50% 100%)}
.mo-hill+.mo-hill{height:22%;background:#101a25;clip-path:ellipse(60% 100% at 20% 100%)}
.mo-box{position:relative;z-index:2;display:grid;justify-items:center;gap:16px;text-align:center;transition:opacity .35s,transform .6s}
.mo-intro.out .mo-box,.mo-intro.out .mo-sun,.mo-intro.out .mo-hill{opacity:0;transition:opacity .4s}
.mo-logo{width:78px;height:78px;object-fit:contain;opacity:0;transform:translateY(14px) scale(.8);animation:moPop .7s .7s cubic-bezier(.2,1.4,.4,1) forwards}
.mo-name{font:800 1.45rem/1.1 'Raleway','Trebuchet MS',sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:0;animation:moUp .7s .95s ease forwards}
.mo-name small{display:block;margin-top:8px;font:600 .74rem 'Open Sans',sans-serif;letter-spacing:.14em;color:#ffd54a;opacity:.95}
@keyframes moRise{to{bottom:20%}}
@keyframes moPop{to{opacity:1;transform:none}}
@keyframes moUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 2. Hero: kelapa bergoyang, awan, judul huruf demi huruf, tokoh naik */
html.mo .lp-palm{transform-origin:50% 100%;animation:moSway 6s ease-in-out infinite alternate}
html.mo .lp-palm-b{animation-duration:7.5s;animation-direction:alternate-reverse}
@keyframes moSway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.4deg)}}
.mo-cloud{position:absolute;pointer-events:none;border-radius:999px;background:rgba(255,255,255,.7);filter:blur(10px);animation:moCloud linear infinite}
@keyframes moCloud{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
html.mo .lp-big .ch{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em}
html.mo .lp-big .ch>i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0ms) + var(--i)*45ms)}
html.mo.mo-go .lp-big .ch>i{transform:none}
html.mo .lp-pre,html.mo .lp-tag,html.mo .lp-sub,html.mo .lp-actions>*{opacity:0;translate:-18px 0;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0ms) + var(--k,0)*110ms)}
html.mo.mo-go .lp-pre,html.mo.mo-go .lp-tag,html.mo.mo-go .lp-sub,html.mo.mo-go .lp-actions>*{opacity:1;translate:0 0}
html.mo .lp-person-img,html.mo .lp-person-ph{opacity:0;translate:0 70px;transition:opacity 1s ease calc(var(--d,0ms) + 300ms),translate 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--d,0ms) + 300ms)}
html.mo.mo-go .lp-person-img,html.mo.mo-go .lp-person-ph{opacity:1;translate:0 0}
html.mo .lp-badge{opacity:0;scale:.3;rotate:-40deg;transition:opacity .5s ease,scale .8s cubic-bezier(.2,1.5,.4,1),rotate .8s ease;transition-delay:calc(var(--d,0ms) + 900ms)}
html.mo.mo-go .lp-badge{opacity:1;scale:1;rotate:0deg;animation:moBob 4s ease-in-out calc(var(--d,0ms) + 2s) infinite alternate}
@keyframes moBob{to{translate:0 -8px;rotate:3deg}}
html.mo .lp-info-i{opacity:0;translate:0 24px;transition:opacity .6s ease,translate .7s ease;transition-delay:calc(var(--d,0ms) + 1100ms + var(--k,0)*110ms)}
html.mo.mo-go .lp-info-i{opacity:1;translate:0 0}

/* 3. Muncul saat digulir */
html.mo .mo-r{opacity:0;translate:0 28px;transition:opacity .7s ease,translate .85s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0)*80ms)}
html.mo .mo-r.mo-in{opacity:1;translate:0 0}
html.mo .mo-r.mo-sl{translate:-34px 0}html.mo .mo-r.mo-sr{translate:34px 0}
html.mo .mo-r.mo-sl.mo-in,html.mo .mo-r.mo-sr.mo-in{translate:0 0}
html.mo .mo-r.mo-pop{translate:0 0;scale:.7}html.mo .mo-r.mo-pop.mo-in{scale:1;transition-timing-function:cubic-bezier(.2,1.5,.4,1)}
html.mo .lp-head h2::after{content:"";display:block;height:4px;width:56px;margin-top:10px;border-radius:9px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .8s .25s cubic-bezier(.2,.8,.2,1)}
html.mo .lp-head.lp-center h2::after{margin-inline:auto;transform-origin:center}
html.mo .lp-head.mo-in h2::after{transform:none}

/* 4. Mikro-interaksi */
.mo-prog{position:fixed;left:0;top:0;height:4px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#3d9a5b,#ffd54a,#f28c28);z-index:9998;pointer-events:none}
.lp-orb-i:hover .lp-orb-ico{animation:moWiggle .6s ease}
@keyframes moWiggle{0%,100%{rotate:0deg}30%{rotate:-10deg}65%{rotate:8deg}}
.lp-btn,.btn{position:relative;overflow:hidden}
.mo-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:moRip .6s ease-out forwards;pointer-events:none}
@keyframes moRip{to{transform:scale(1);opacity:0}}
.lp-news article{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.lp-news article:hover{transform:translateX(6px);box-shadow:0 14px 34px rgba(42,59,80,.14)}
.lp-news img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}.lp-news article:hover img{transform:scale(1.06)}
.lp-tilt{transition:transform .25s ease-out}

/* 5. Tirai antar halaman: sapuan diagonal oranye lalu biru tua */
html.mo-cur-in::before,.mo-cur{content:"";position:fixed;inset:-2px;z-index:10000;pointer-events:none;background:linear-gradient(115deg,#f28c28 0 14%,#1f2e40 14% 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.mo-cur{clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%);transition:clip-path .55s cubic-bezier(.77,0,.18,1);display:grid;place-items:center}
.mo-cur.on{clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%)}
.mo-cur img{width:62px;opacity:.95;animation:moPulse 1s ease-in-out infinite alternate}
@keyframes moPulse{from{scale:.9}to{scale:1.08}}
html.mo-cur-in::before{transition:clip-path .7s cubic-bezier(.77,0,.18,1)}
html.mo-cur-out::before{clip-path:polygon(130% 0,130% 0,100% 100%,100% 100%)}

/* 6. Lanskap garis: sawah berundak, kelapa, lumbung, perahu sungai */
.lp-land{--p:1;max-width:1100px;margin:0 auto;padding:26px 24px 0;text-align:center;color:var(--green)}
.lp-land svg{display:block;width:100%;height:auto;overflow:visible}
.lp-land .ln path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:clamp(0,calc(1 - (var(--p)*1.9 - var(--s))*1.7),1)}
.lp-land .ln:nth-child(4) path{opacity:.6;color:var(--navy)}
.lp-land .ln:nth-child(7) path:nth-child(-n+2){color:var(--orange-d)}
.lp-land .sunf{fill:#f28c28;opacity:clamp(0,calc(var(--p)*2.4 - 1.3),.95)}
.lp-land-cap{margin:8px auto 0;max-width:44ch;font:700 1.05rem/1.5 var(--lp-head);color:var(--navy);opacity:clamp(0,calc(var(--p)*3 - 1.6),1)}

/* 7. Bagian sinematik "fajar": cakrawala terbuka dari bawah, matahari naik */
.lp-cine{position:relative}
.lp-cine-pin{position:relative;overflow:hidden;display:grid;place-items:center;min-height:460px;padding:80px 24px;color:#fff;background:#1f2e40;text-align:center}
.lp-cine-bg{position:absolute;inset:-6%;background:url(../images/hero-lampasio.jpg) center/cover;transform:scale(calc(1.2 - var(--iris,1)*.18));clip-path:inset(calc((1 - var(--iris,1))*100%) 0 0 0);will-change:transform,clip-path}
.lp-cine-sun{position:absolute;left:50%;width:min(60vw,420px);aspect-ratio:1;margin-left:calc(min(60vw,420px)/-2);bottom:calc(var(--iris,1)*55% - 30%);border-radius:50%;background:radial-gradient(circle,rgba(255,213,74,.9),rgba(242,140,40,.55) 55%,rgba(242,140,40,0) 70%);mix-blend-mode:screen;opacity:calc(1 - var(--sunout,0))}
.lp-cine-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,46,64,.5),rgba(31,46,64,.84))}
.lp-cine-txt{position:relative;display:grid;gap:44px;max-width:760px}
.lp-cine .c{display:grid;justify-items:center;gap:8px}
.lp-cine .big{font:800 clamp(4.4rem,15vw,9rem)/.9 var(--lp-head);letter-spacing:-.03em;color:#ffd54a;font-variant-numeric:tabular-nums}
.lp-cine .c span{font:600 clamp(1.05rem,2.6vw,1.55rem)/1.45 var(--lp-bodyf);max-width:32ch}
.lp-cine-cta{margin-top:18px}
.lp-cine-dots{display:none}
.lp-cine.on{height:300vh}
.lp-cine.on .lp-cine-pin{position:sticky;top:0;height:100vh;min-height:0;padding:0 24px}
.lp-cine.on .lp-cine-txt{position:absolute;inset:0;max-width:none;display:block}
.lp-cine.on .c{position:absolute;left:50%;top:50%;width:min(92%,760px);transform:translate(-50%,calc(-50% + (1 - var(--o,1))*40px));opacity:var(--o,1);pointer-events:none}
.lp-cine.on .c3{pointer-events:auto}
.lp-cine.on .lp-cine-dots{display:flex;gap:10px;position:absolute;left:50%;bottom:34px;transform:translateX(-50%)}
.lp-cine-dots i{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.35);transition:width .3s,background .3s}
.lp-cine-dots i.a{width:30px;background:#f28c28}

/* 8. Partikel serbuk sari */
.mo-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

@media(max-width:700px){.lp-cine.on{height:240vh}.mo-sun{width:180px;height:180px;margin-left:-90px}}
@media(prefers-reduced-motion:reduce){.mo-intro,.mo-prog,.mo-cur,html.mo-cur-in::before,.mo-cloud,.mo-fx{display:none!important}
 html.mo .mo-r,html.mo .lp-pre,html.mo .lp-tag,html.mo .lp-sub,html.mo .lp-actions>*,html.mo .lp-person-img,html.mo .lp-badge,html.mo .lp-info-i,html.mo .lp-big .ch>i{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;transform:none!important;animation:none!important}
 html.mo .lp-palm{animation:none}.lp-cine.on{height:auto}.lp-land{--p:1!important}}
html.mo:not(.mo-go) .lp-big:not([data-mo]){opacity:0}
/* sticky butuh overflow-x:clip (bukan hidden) pada html/body */
html.mo,html.mo body,html.mo body.lp-body{overflow-x:clip}
.mo-intro .mo-box{margin-top:-30vh}

/* Panorama realistis; air bergerak mengikuti progres guliran --p. */
.lp-land{--p:0;max-width:1180px;margin:24px auto 40px;padding:0 24px;text-align:center}
.lp-land .village-scene{position:relative;overflow:hidden;min-height:clamp(290px,41vw,480px);border-radius:28px;background:#dce9df;box-shadow:0 24px 64px rgba(13,63,45,.18);isolation:isolate}
.lp-land .village-scene::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 49%,rgba(5,47,35,.43));pointer-events:none}
.lp-land img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:calc(1.055 - var(--p)*.025);transform:translate3d(0,calc((.5 - var(--p))*20px),0);will-change:transform}
.lp-land .water-flow{position:absolute;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:calc(.13 + var(--p)*.82);will-change:transform,background-position}
.lp-land .waterfall{left:4%;top:27%;width:36%;height:55%;background:repeating-linear-gradient(100deg,transparent 0 9px,rgba(255,255,255,.68) 11px 17px,transparent 20px 31px);filter:blur(1px);clip-path:polygon(2% 0,90% 0,100% 100%,0 100%);transform:translateY(calc((var(--p) - .5)*58px));background-position:0 calc(var(--p)*200px);animation:realFall 1.08s linear infinite}
.lp-land .river{left:0;right:-5%;bottom:-8%;height:40%;background:repeating-linear-gradient(169deg,transparent 0 21px,rgba(205,248,255,.5) 24px 29px,transparent 32px 49px);transform:translateX(calc((var(--p) - .5)*38px));background-position:calc(var(--p)*240px) 0;animation:realRiver 3s linear infinite}
.lp-land .scene-mist{position:absolute;z-index:2;inset:34% -8% 8%;background:radial-gradient(ellipse at 26% 50%,rgba(255,255,255,.46),transparent 37%),radial-gradient(ellipse at 73% 34%,rgba(255,255,255,.23),transparent 46%);filter:blur(18px);opacity:calc(.64 - var(--p)*.22);transform:translateX(calc((var(--p) - .5)*74px));pointer-events:none}
.lp-land-cap{position:relative;z-index:4;display:grid;gap:4px;margin:-72px 30px 0;padding:22px 26px;border-radius:20px;background:rgba(7,61,43,.92);color:#fff;box-shadow:0 16px 38px rgba(5,46,34,.24);backdrop-filter:blur(8px)}
.lp-land-cap strong{font:800 clamp(1.18rem,2.2vw,1.68rem)/1.25 var(--lp-head)}.lp-land-cap span{color:rgba(255,255,255,.88);line-height:1.55}
@keyframes realFall{to{background-position:0 94px}}@keyframes realRiver{to{background-position:155px 0}}
@media(max-width:640px){.lp-land{padding:0 14px}.lp-land .village-scene{min-height:320px;border-radius:20px}.lp-land img{object-position:38% center}.lp-land-cap{margin:-54px 12px 0;padding:18px 16px}.lp-land .waterfall{width:50%;left:0}}
@media(prefers-reduced-motion:reduce){.lp-land .water-flow{animation:none}.lp-land img,.lp-land .water-flow,.lp-land .scene-mist{transform:none!important}}