/* ===== Desa Malangga — lapisan gerak "desa wisata": daun, kabut, kunang-kunang, air terjun =====
   Hanya transform/opacity. Aktif bila <html class="mo">; tanpa JS / "kurangi gerakan" halaman tampil statis utuh. */

/* 0. Perapian form layanan baru */
.lay-find{display:flex;align-items:center;gap:14px;max-width:560px;margin:0 auto 22px}
.lay-find input{flex:1;min-width:0;padding:13px 18px;border:1.5px solid var(--line,#d1d5db);border-radius:999px;font:inherit;background:#fff}
.lay-find input:focus{outline:3px solid rgba(5,150,105,.25);border-color:#059669}
.lay-find span{font-size:.85rem;color:var(--ink-mute,#64748b);white-space:nowrap}
button.layanan-icon-card{font:inherit;cursor:pointer;background:#fff;text-align:center;width:100%}
.lay-empty{text-align:center;color:var(--ink-mute,#64748b);margin-top:16px}
.ml-cta{display:grid;gap:12px;align-content:center}.ml-cta h3{margin:0}.ml-cta p{margin:0}

/* 1. Pembuka: dua helai daun membuka seperti tirai */
.mo-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;color:#fff;pointer-events:all}
.mo-leaf{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(160deg,#0f6b47,#0a4a33 70%);transition:transform 1.05s cubic-bezier(.77,0,.18,1)}
.mo-leaf{transition:transform 1.05s cubic-bezier(.77,0,.18,1),border-radius 1.05s}
.mo-leaf.l{left:0}
.mo-leaf.r{right:0;background:linear-gradient(200deg,#0f6b47,#0a4a33 70%)}
.mo-intro.out .mo-leaf.l{border-radius:0 50% 50% 0/0 100% 100% 0}.mo-intro.out .mo-leaf.r{border-radius:50% 0 0 50%/100% 0 0 100%}
.mo-leaf::after{content:"";position:absolute;top:8%;bottom:8%;width:2px;background:rgba(255,255,255,.18)}
.mo-leaf.l::after{right:14px}.mo-leaf.r::after{left:14px}
.mo-intro.out .mo-leaf.l{transform:translateX(-102%)}.mo-intro.out .mo-leaf.r{transform:translateX(102%)}
.mo-box{position:relative;z-index:2;display:grid;justify-items:center;gap:12px;text-align:center;transition:opacity .45s,scale .45s}
.mo-intro.out .mo-box{opacity:0;scale:1.08}
.mo-logo{width:88px;height:88px;object-fit:contain;opacity:0;scale:.6;animation:moPop .8s .25s cubic-bezier(.2,1.5,.4,1) forwards;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.mo-name{font-weight:800;font-size:1.6rem;line-height:1.1;opacity:0;animation:moUp .7s .55s ease forwards}
.mo-name small{display:block;margin-top:8px;font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#a7f3d0}
.mo-bar{width:140px;height:3px;border-radius:9px;background:rgba(255,255,255,.2);overflow:hidden;opacity:0;animation:moUp .4s .8s forwards}
.mo-bar i{display:block;height:100%;background:#fcd34d;transform-origin:left;animation:moLoad 1.2s .8s cubic-bezier(.4,0,.2,1) forwards;transform:scaleX(0)}
@keyframes moPop{to{opacity:1;scale:1}}
@keyframes moUp{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes moLoad{to{transform:scaleX(1)}}

/* 2. Hero */
html.mo .hero-slide.active{animation:moKen 24s ease-in-out infinite alternate}
@keyframes moKen{from{scale:1.02}to{scale:1.13;translate:-1.5% -1%}}
.mo-mist{position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;z-index:1;overflow:hidden}
.mo-mist i{position:absolute;bottom:-20%;left:-30%;width:90%;height:100%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent);filter:blur(18px);animation:moMist 30s linear infinite}
.mo-mist i:nth-child(2){left:20%;animation-duration:42s;animation-delay:-14s;opacity:.7}
.mo-mist i:nth-child(3){left:55%;animation-duration:36s;animation-delay:-24s;opacity:.55}
@keyframes moMist{from{translate:-10% 0}to{translate:70% -6%}}
html.mo .hero-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em}
html.mo .hero-title .w>span{display:inline-block;translate:0 110%;transition:translate .85s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0ms) + var(--i)*70ms)}
html.mo.mo-go .hero-title .w>span{translate:0 0}
html.mo:not(.mo-go) .hero-title:not([data-mo]){opacity:0}
html.mo .hero-badge,html.mo .hero-sub,html.mo .hero-actions,html.mo .hero-stats{opacity:0;translate:0 22px;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0ms) + var(--k,0)*120ms)}
html.mo.mo-go .hero-badge,html.mo.mo-go .hero-sub,html.mo.mo-go .hero-actions,html.mo.mo-go .hero-stats{opacity:1;translate:0 0}
html.mo .hero-kades-photo{opacity:0;translate:0 60px;transition:opacity 1s ease calc(var(--d,0ms) + 300ms),translate 1.2s cubic-bezier(.2,.8,.2,1) calc(var(--d,0ms) + 300ms)}
html.mo.mo-go .hero-kades-photo{opacity:1;translate:0 0}
html.mo .hero-float,html.mo .hero-name-badge{opacity:0;scale:.85;transition:opacity .6s ease calc(var(--d,0ms) + 700ms),scale .7s cubic-bezier(.2,1.4,.4,1) calc(var(--d,0ms) + 700ms)}
html.mo.mo-go .hero-float,html.mo.mo-go .hero-name-badge{opacity:1;scale:1}
html.mo.mo-go .hero-float{animation:moBob 5s ease-in-out 2.4s infinite alternate}
@keyframes moBob{to{translate:0 -7px}}
html.mo.mo-go .hero .btn-primary{animation:moGlow 5s ease-in-out 3s infinite}
@keyframes moGlow{0%,80%,100%{box-shadow:0 8px 20px -8px rgba(5,150,105,.5)}90%{box-shadow:0 0 0 12px rgba(52,211,153,.25)}}
.mo-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* 3. Muncul saat digulir (kartu tumbuh seperti tunas) */
html.mo .mo-r{opacity:0;translate:0 34px;scale:.96;transition:opacity .75s ease,translate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--k,0)*80ms)}
html.mo .mo-r.mo-in{opacity:1;translate:0 0;scale:1}
html.mo .section-head .eyebrow{position:relative}
html.mo .section-head h2{position:relative}
html.mo .section-head.mo-r h2::after{content:"";display:block;height:4px;width:54px;margin:12px 0 0;border-radius:9px;background:linear-gradient(90deg,#059669,#fcd34d);transform:scaleX(0);transform-origin:left;transition:transform .9s .3s cubic-bezier(.2,.8,.2,1)}
html.mo .section-head.mo-r.mo-in h2::after{transform:none}
html.mo .section-head[style*="center"].mo-r h2::after{margin-left:auto;margin-right:auto;transform-origin:center}

/* 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,#059669,#34d399,#fcd34d);z-index:9998;pointer-events:none}
.btn,.layanan-icon-card,.quick-card{position:relative;overflow:hidden}
.mo-pt{position:absolute;width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:50% 0 50% 0;background:#34d399;pointer-events:none;animation:moPt .7s cubic-bezier(.2,.8,.3,1) forwards}
.mo-pt:nth-child(even){background:#fcd34d;border-radius:50%}
@keyframes moPt{to{translate:var(--x) var(--y);rotate:200deg;opacity:0;scale:.3}}
.wisata-card,.homestay-card,.perangkat-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.ml-tilt{transition:transform .25s ease-out}
.layanan-icon-card:hover{translate:0 -4px}
.layanan-icon-card:active{scale:.95}

/* 5. Tirai antar halaman: dua daun menutup lalu terbuka */
.mo-cur{position:fixed;inset:0;z-index:10000;pointer-events:none;visibility:hidden}
.mo-cur i{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(160deg,#0f6b47,#0a4a33);transition:transform .55s cubic-bezier(.77,0,.18,1)}
.mo-cur i:first-child{left:0;transform:translateX(-102%)}
.mo-cur i:last-child{right:0;transform:translateX(102%)}
.mo-cur.on{visibility:visible}.mo-cur.on i{transform:none}
html.mo-cur-in::before,html.mo-cur-in::after{content:"";position:fixed;top:0;bottom:0;width:50.5%;z-index:10001;background:linear-gradient(160deg,#0f6b47,#0a4a33);transition:transform .8s cubic-bezier(.77,0,.18,1)}
html.mo-cur-in::before{left:0;transition:transform .8s cubic-bezier(.77,0,.18,1),border-radius .8s}
html.mo-cur-in::after{right:0;transition:transform .8s cubic-bezier(.77,0,.18,1),border-radius .8s}
html.mo-cur-out::before{transform:translateX(-102%);border-radius:0 50% 50% 0/0 100% 100% 0}html.mo-cur-out::after{transform:translateX(102%);border-radius:50% 0 0 50%/100% 0 0 100%}

/* 6. Panorama realistis: gerak kamera dan kabut dibuat lembut agar tetap natural */
.ml-land{--p:1;max-width:1180px;margin:22px auto 34px;padding:0 24px;text-align:center}
.ml-land-photo{position:relative;overflow:hidden;min-height:clamp(270px,39vw,460px);border-radius:28px;background:#dcece4;box-shadow:0 24px 60px rgba(6,78,59,.16)}
.ml-land-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(3,37,28,.44));pointer-events:none}
.ml-land-photo img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center;scale:1.035;animation:mlLandDrift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes mlLandDrift{to{transform:scale(1.035) translate3d(-.8%,.5%,0)}}
.ml-land-mist{position:absolute;z-index:1;inset:38% -12% -18%;background:radial-gradient(ellipse at 28% 55%,rgba(255,255,255,.38),transparent 42%),radial-gradient(ellipse at 70% 45%,rgba(255,255,255,.26),transparent 46%);filter:blur(16px);opacity:.55;animation:mlMist 16s ease-in-out infinite alternate;pointer-events:none}
@keyframes mlMist{to{translate:4% -2%;opacity:.38}}
.ml-land-cap{position:relative;z-index:2;display:grid;gap:4px;margin:-72px 28px 0;padding:22px 26px;border-radius:20px;background:rgba(4,56,42,.9);color:#fff;box-shadow:0 16px 36px rgba(3,37,28,.2);backdrop-filter:blur(8px)}
.ml-land-cap strong{font-size:clamp(1.2rem,2.2vw,1.7rem)}
.ml-land-cap span{font-size:clamp(.92rem,1.5vw,1.05rem);line-height:1.55;color:rgba(255,255,255,.88)}
@media(max-width:640px){.ml-land{padding:0 14px;margin-top:14px}.ml-land-photo{min-height:300px;border-radius:20px}.ml-land-cap{margin:-54px 12px 0;padding:18px 16px}.ml-land-photo img{object-position:43% center}}

/* 7. Sorotan sinematik: lingkaran "mata" terbuka dari tengah */
.ml-cine{position:relative;background:#052e22}
.ml-cine-pin{position:relative;overflow:hidden;display:grid;place-items:center;min-height:480px;padding:80px 24px;color:#fff;text-align:center;background:#052e22}
.ml-cine-bg{position:absolute;inset:-5%;background:url(../images/desa-landscape.jpg) center/cover;scale:calc(1.22 - var(--iris,1)*.18);clip-path:circle(calc(var(--iris,1)*82%) at 50% 50%);will-change:scale,clip-path}
.ml-cine-ring{position:absolute;left:50%;top:50%;width:calc(var(--iris,1)*164vmax);height:calc(var(--iris,1)*164vmax);translate:-50% -50%;border-radius:50%;border:3px solid rgba(252,211,77,.7);opacity:calc(1 - var(--done,1));pointer-events:none}
.ml-cine-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,46,34,.55),rgba(5,46,34,.88))}
.ml-cine-txt{position:relative;display:grid;gap:44px;max-width:780px}
.ml-cine .c{display:grid;justify-items:center;gap:8px}
.ml-cine .big{font-weight:800;font-size:clamp(5rem,17vw,11rem);line-height:.9;letter-spacing:-.04em;color:#fcd34d;font-variant-numeric:tabular-nums;font-family:var(--font-display,inherit)}
.ml-cine .c span{font-weight:600;font-size:clamp(1.05rem,2.6vw,1.55rem);line-height:1.45;max-width:30ch}
.ml-cine-cta{margin-top:18px}
.ml-cine-dots{display:none}
.ml-cine.on{height:calc(var(--n,3)*100vh + 100vh)}
.ml-cine.on .ml-cine-pin{position:sticky;top:0;height:100vh;min-height:0;padding:0 24px}
.ml-cine.on .ml-cine-txt{position:absolute;inset:0;max-width:none;display:block}
.ml-cine.on .c{position:absolute;left:50%;top:50%;width:min(92%,780px);translate:-50% calc(-50% + (1 - var(--o,1))*40px);opacity:var(--o,1);pointer-events:none}
.ml-cine.on .c:last-child{pointer-events:auto}
.ml-cine.on .ml-cine-dots{display:flex;gap:10px;position:absolute;left:50%;bottom:34px;translate:-50% 0}
.ml-cine-dots i{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.35);transition:width .3s,background .3s}
.ml-cine-dots i.a{width:30px;background:#fcd34d}

/* sticky butuh overflow-x:clip */
html.mo,html.mo body{overflow-x:clip}
@media(max-width:700px){.ml-cine.on{height:calc(var(--n,3)*80vh + 100vh)}.lay-find{flex-direction:column;align-items:stretch}.lay-find span{text-align:center}}
@media(prefers-reduced-motion:reduce){.mo-intro,.mo-prog,.mo-cur,html.mo-cur-in::before,html.mo-cur-in::after,.mo-fx,.mo-mist{display:none!important}
 html.mo .mo-r,html.mo .hero-badge,html.mo .hero-sub,html.mo .hero-actions,html.mo .hero-stats,html.mo .hero-kades-photo,html.mo .hero-float,html.mo .hero-name-badge,html.mo .hero-title .w>span{opacity:1!important;translate:none!important;scale:none!important;transform:none!important;animation:none!important}
 html.mo .hero-slide.active{animation:none}.ml-cine.on{height:auto}.ml-land{--p:1!important}}

/* Aliran air realistis: posisi dan intensitas mengikuti guliran halaman. */
.ml-land .water-flow{position:absolute;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:calc(.14 + var(--p)*.8);will-change:transform,background-position}
.ml-land .waterfall{left:2%;top:33%;width:28%;height:49%;background:repeating-linear-gradient(101deg,transparent 0 8px,rgba(255,255,255,.7) 10px 15px,transparent 18px 28px);filter:blur(1px);clip-path:polygon(3% 0,78% 0,96% 100%,0 100%);transform:translateY(calc((var(--p) - .5)*54px));background-position:0 calc(var(--p)*190px);animation:realFall 1.1s linear infinite}
.ml-land .river{left:0;right:-4%;bottom:-7%;height:34%;background:repeating-linear-gradient(168deg,transparent 0 20px,rgba(205,248,255,.48) 23px 28px,transparent 31px 47px);transform:translateX(calc((var(--p) - .5)*36px));background-position:calc(var(--p)*230px) 0;animation:realRiver 3.1s linear infinite}
@keyframes realFall{to{background-position:0 92px}}@keyframes realRiver{to{background-position:152px 0}}
@media(max-width:640px){.ml-land .waterfall{width:42%;left:0}.ml-land .river{height:38%}}
@media(prefers-reduced-motion:reduce){.ml-land .water-flow{animation:none;transform:none!important}}

/* Pencarian dan pelacakan tiket dibuat ringkas dalam satu baris. */
.lay-tools{display:grid;grid-template-columns:minmax(280px,1fr) minmax(360px,1.25fr);gap:14px;align-items:start;margin:0 auto 22px;max-width:1040px}
.lay-tools .lay-find{max-width:none;margin:0;min-height:64px;padding:8px 12px;border:1px solid var(--line,#d7e0e7);border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.06)}
.lay-track{display:grid;grid-template-columns:auto minmax(210px,1fr);gap:8px 14px;align-items:center;min-height:64px;padding:8px 10px 8px 16px;border:1px solid var(--line,#d7e0e7);border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.06)}
.lay-track>span{display:grid;gap:2px;text-align:left;color:var(--ink,#0f172a)}.lay-track>span b{font-size:.9rem}.lay-track>span small{font-size:.72rem;color:var(--ink-mute,#64748b)}
.lay-track .status-track-box{margin:0;display:flex;gap:6px;padding:0;border:0;box-shadow:none}.lay-track .status-track-box input{min-width:0;padding:10px 12px;border:1px solid var(--line,#d7e0e7);border-radius:12px;font:700 .86rem var(--font-mono,monospace)}.lay-track .status-track-box .btn{padding:10px 16px;border-radius:12px}
.lay-track #lacakResult{grid-column:1/-1;text-align:left}.lay-track #lacakResult:empty{display:none}
@media(max-width:820px){.lay-tools{grid-template-columns:1fr}.lay-track{grid-template-columns:1fr}.lay-track .status-track-box,.lay-track #lacakResult{grid-column:1}}
@media(max-width:480px){.lay-tools .lay-find{flex-direction:row;align-items:center}.lay-track .status-track-box{display:grid;grid-template-columns:1fr auto}.lay-track{padding:13px}.lay-track>span small{display:none}}