/* ===== Desa Lakatan — lapisan gerak =====
   Semua efek hanya memakai transform/opacity. Aktif bila <html class="mo"> (diberi lk-motion.js).
   Tanpa JS atau saat "kurangi gerakan" aktif, halaman tampil statis dan utuh. */

/* --- 1. Pembuka: tirai biru dengan lambang yang "digambar" --- */
.mo-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:linear-gradient(160deg,#14296b,#2a62b5 60%,#4a8bdc);color:#fff;transition:transform .9s cubic-bezier(.77,0,.18,1);will-change:transform}
.mo-intro.out{transform:translateY(-101%)}
.mo-intro .mo-box{display:grid;justify-items:center;gap:18px;text-align:center;transition:opacity .35s,transform .6s}
.mo-intro.out .mo-box{opacity:0;transform:translateY(-14px)}
.mo-ring{width:128px;height:128px;transform:rotate(-90deg)}
.mo-ring circle{fill:none;stroke:#ff7a2f;stroke-width:3;stroke-linecap:round;stroke-dasharray:352;stroke-dashoffset:352;animation:moDraw 1.05s .1s cubic-bezier(.65,0,.35,1) forwards}
.mo-logo{position:absolute;width:76px;height:76px;object-fit:contain;opacity:0;transform:scale(.7);animation:moPop .6s .55s cubic-bezier(.2,1.4,.4,1) forwards}
.mo-stage{position:relative;display:grid;place-items:center}
.mo-name{font:800 1.5rem/1.1 'Nunito Sans',system-ui,sans-serif;letter-spacing:.01em;opacity:0;animation:moUp .6s .75s ease forwards}
.mo-name small{display:block;margin-top:6px;font-weight:600;font-size:.82rem;opacity:.8;letter-spacing:.02em}
@keyframes moDraw{to{stroke-dashoffset:0}}
@keyframes moPop{to{opacity:1;transform:scale(1)}}
@keyframes moUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- 2. Hero hidup --- */
html.mo .lk-top{background-size:160% 160%;animation:moGrad 16s ease-in-out infinite alternate}
@keyframes moGrad{0%{background-position:0% 30%}100%{background-position:100% 70%}}
html.mo .lk-ring{animation:moDrift 22s ease-in-out infinite alternate}
html.mo .lk-r2{animation-duration:28s;animation-direction:alternate-reverse}
html.mo .lk-r3{animation-duration:34s}
@keyframes moDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(36px,26px,0) scale(1.08)}}
/* judul muncul kata demi kata */
html.mo .lk-hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
html.mo .lk-hero h1 .w>span{display:inline-block;transform:translateY(105%);transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*70ms + var(--d,0ms))}
html.mo.mo-go .lk-hero h1 .w>span{transform:none}
html.mo .lk-lede,html.mo .lk-pill,html.mo .lk-hint{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
html.mo .lk-lede{transition-delay:calc(var(--d,0ms) + 450ms)}html.mo .lk-pill{transition-delay:calc(var(--d,0ms) + 600ms)}html.mo .lk-hint{transition-delay:calc(var(--d,0ms) + 700ms)}
html.mo.mo-go .lk-lede,html.mo.mo-go .lk-pill,html.mo.mo-go .lk-hint{opacity:1;transform:none}
/* Kades naik dari bawah, lingkaran desa berputar masuk */
html.mo .lk-kades{opacity:0;transform:translateY(60px);transition:opacity .9s ease .35s,transform 1s cubic-bezier(.2,.8,.2,1) .35s}
html.mo.mo-go .lk-kades{opacity:1;transform:translate3d(var(--px,0),calc(var(--py,0px) + var(--sy,0px)*-.06),0)}
html.mo .lk-vil{opacity:0;transform:scale(.6) rotate(-25deg);transition:opacity .8s ease .55s,transform 1.1s cubic-bezier(.2,.9,.2,1) .55s}
html.mo.mo-go .lk-vil{opacity:1;transform:translate3d(calc(var(--px,0px)*-1.4),calc(var(--py,0px)*-1),0)}
/* kartu kaca melayang */
html.mo .lk-glass,html.mo .lk-chip{opacity:0;transform:translateY(18px) scale(.94);transition:opacity .6s ease,transform .7s cubic-bezier(.2,1.2,.4,1);transition-delay:calc(var(--d,0ms) + 800ms + var(--k,0)*120ms)}
html.mo.mo-go .lk-glass,html.mo.mo-go .lk-chip{opacity:1;transform:none;animation:moFloat 5.5s ease-in-out calc(var(--k,0)*.7s + 1.8s) infinite alternate}
@keyframes moFloat{to{transform:translateY(-9px)}}
.lk-glass:hover,.lk-chip:hover{animation-play-state:paused}

/* --- 3. Muncul saat digulir --- */
html.mo .mo-r{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0)*70ms)}
html.mo .mo-r.mo-in{opacity:1;transform:none}
html.mo .mo-r.mo-l{transform:translateX(-30px)}html.mo .mo-r.mo-l.mo-in{transform:none}
html.mo .mo-r.mo-z{transform:scale(.92)}html.mo .mo-r.mo-z.mo-in{transform:none}
/* bilah anggaran tumbuh */
html.mo .lk-bars i{width:0!important;transition:width 1.3s cubic-bezier(.2,.8,.2,1) .2s}
html.mo .lk-bars.mo-in i{width:var(--w)!important}

/* --- 4. Interaksi mikro --- */
.mo-prog{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#ff7a2f,#ffb36b);z-index:9998;pointer-events:none}
.lp-body .svc-card{transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.lp-body .svc-card:hover .svc-ic,.lp-body .svc-card:hover svg,.lp-body .svc-card:hover .lp-ic{animation:moWiggle .55s ease}
.lp-body .svc-card:active{transform:scale(.94)}
@keyframes moWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg) scale(1.08)}60%{transform:rotate(7deg) scale(1.08)}}
.lk-sheet a.btn,.lp-body .btn,.lk-pill button,.lp-nav-cta,.lk-cta a,.lk-newscard a{position:relative;overflow:hidden}
.mo-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:moRip .6s ease-out forwards;pointer-events:none}
@keyframes moRip{to{transform:scale(1);opacity:0}}
.lk-newscard{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.lk-newscard:hover{transform:translateY(-6px)}
.lk-newscard img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.lk-newscard:hover img{transform:scale(1.06)}
.lk-bluecard{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.lp-header .lp-nav a{position:relative}

@media(prefers-reduced-motion:reduce){
  .mo-intro,.mo-prog{display:none!important}
  html.mo .mo-r,html.mo .lk-kades,html.mo .lk-vil,html.mo .lk-glass,html.mo .lk-chip,html.mo .lk-lede,html.mo .lk-pill,html.mo .lk-hint,html.mo .lk-hero h1 .w>span{opacity:1!important;transform:none!important;animation:none!important}
  html.mo .lk-bars i{width:var(--w)!important}
}
html.mo .lk-hero h1:not([data-mo]){opacity:0}

/* --- 5. Tirai antar halaman --- */
html.mo-cur-in::before,.mo-cur{content:"";position:fixed;inset:0;z-index:10000;background:linear-gradient(160deg,#14296b,#2a62b5);transform:translateY(0);pointer-events:none}
.mo-cur{transform:translateY(101%);transition:transform .5s cubic-bezier(.77,0,.18,1);display:grid;place-items:center}
.mo-cur.on{transform:none}
.mo-cur i{width:54px;height:54px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#ff7a2f;animation:moSpin .8s linear infinite}
@keyframes moSpin{to{transform:rotate(360deg)}}
html.mo-cur-in::before{transition:transform .65s cubic-bezier(.77,0,.18,1)}
html.mo-cur-out::before{transform:translateY(-101%)}

/* --- 6. Lanskap desa yang tergambar saat digulir --- */
.lk-land{--p:1;max-width:1100px;margin:6px auto 0;padding:0 20px;text-align:center;color:var(--biru-d)}
.lk-land svg{display:block;width:100%;height:auto;overflow:visible}
.lk-land .ln path{fill:none;stroke:currentColor;stroke-width:2.4;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)}
.lk-land .ln:nth-child(2) path,.lk-land .ln:nth-child(4) path{opacity:.55}
.lk-land .sunf{fill:#ff7a2f;opacity:clamp(0,calc(var(--p)*2.4 - 1.3),.95)}
.lk-land-cap{margin:6px auto 0;max-width:46ch;font:700 1rem/1.5 var(--f);color:var(--navy);opacity:clamp(0,calc(var(--p)*3 - 1.6),1)}

/* --- 7. Bagian sinematik: iris + teks bergantian, dipaku saat digulir --- */
.lk-cine{position:relative;margin:30px 0}
.lk-cine-pin{position:relative;overflow:hidden;display:grid;place-items:center;min-height:440px;padding:70px 20px;color:#fff;background:#14296b;text-align:center}
.lk-cine-bg{position:absolute;inset:-6%;background:url(../images/hero-lakatan.jpg) center/cover;transform:scale(calc(1.25 - var(--iris,1)*.22));clip-path:circle(calc(var(--iris,1)*80%) at 50% 52%);will-change:transform,clip-path}
.lk-cine-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,41,107,.55),rgba(20,41,107,.82))}
.lk-cine-txt{position:relative;display:grid;gap:44px;max-width:760px}
.lk-cine .c{display:grid;justify-items:center;gap:8px}
.lk-cine .big{font:900 clamp(4.2rem,15vw,9rem)/.9 var(--f);letter-spacing:-.04em;color:#ffd9bd;font-variant-numeric:tabular-nums}
.lk-cine .c span{font:700 clamp(1.05rem,2.6vw,1.6rem)/1.4 var(--f);max-width:30ch}
.lk-cine-cta{margin-top:16px;background:var(--orange);color:#fff}
.lk-cine-dots{display:none}
.lk-cine.on{height:var(--len,300vh);margin:30px 0}
.lk-cine.on .lk-cine-pin{position:sticky;top:0;height:100vh;min-height:0;padding:0 20px}
.lk-cine.on .lk-cine-txt{position:absolute;inset:0;max-width:none;display:block}
.lk-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}
.lk-cine.on .c3{pointer-events:auto}
.lk-cine.on .lk-cine-dots{display:flex;gap:10px;position:absolute;left:50%;bottom:34px;transform:translateX(-50%)}
.lk-cine-dots i{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.35);transition:width .3s,background .3s}
.lk-cine-dots i.a{width:30px;background:#ff7a2f}

/* --- 8. Teks bacaan menyala per kata, garis bawah judul menggambar diri, partikel, tilt --- */
.mo-wd{opacity:calc(.2 + var(--a,1)*.8);transition:none}
html.mo .lk-sec h2::after,html.mo .lk-about h2::after{content:"";display:block;height:4px;width:64px;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 .lk-sec h2.mo-in::after,html.mo .lk-about h2.mo-in::after{transform:none}
.mo-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.lk-tilt{transform-style:preserve-3d;transition:transform .25s ease-out}
@media(max-width:700px){.lk-cine-pin{min-height:420px}.lk-cine.on{--len:240vh}}
@media(prefers-reduced-motion:reduce){.mo-cur,html.mo-cur-in::before{display:none!important}.lk-cine.on{height:auto}.lk-land{--p:1!important}.mo-wd{opacity:1!important}}